Propiedad CSS image-rendering

La propiedad image-rendering establece un algoritmo de escalado de imagen.

De forma predeterminada, cada navegador aplicará antialiasing a la imagen escalada para evitar distorsiones, pero puede surgir un problema si deseas conservar la forma pixelada original de la imagen.

TIP

En ocasiones, puedes usar crisp-edges y pixelated como valores de respaldo entre sí para garantizar un renderizado consistente en todos los navegadores.

Valor inicial	auto
Se aplica a	Todos los elementos.
Heredado	Sí.
Animable	Discreto.
Versión	CSS3
Sintaxis DOM	object.style.imageRendering = "pixelated";

Sintaxis

Sintaxis CSS de image-rendering

css

image-rendering: auto | crisp-edges | pixelated | initial | inherit;

Ejemplo de la propiedad image-rendering:

Ejemplo de código CSS de image-rendering

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .pixelated {
        image-rendering: pixelated;
      }
      .wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }
      .resize {
        flex: 1 1 45%;
      }
      .resize img, .original img {
        width: 100%;
        display: block;
      }
      body {
        background-color: #ccc;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Image-rendering property example</h2>
    <div class="wrapper">
      <div class="original">
        <p>Original image size:</p>
        <img src="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
      <div class="resize">
        <p><code>image-rendering: auto</code></p>
        <img src="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
      <div class="resize">
        <p><code>image-rendering: pixelated</code></p>
        <img class="pixelated" src="https://www.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Resultado

CSS image-rendering values list

Valores

Valor	Descripción
auto	Un algoritmo estándar que maximiza la apariencia de una imagen. Este es el valor predeterminado de esta propiedad.
crisp-edges	La imagen se conserva sin suavizado ni desenfoque. Úsalo para arte pixelado que se beneficia de la preservación del contraste, mientras que `pixelated` fuerza un escalado estricto de vecino más cercano.
pixelated	El navegador conserva su estilo pixelado mediante un escalado de vecino más cercano.
initial	Hace que la propiedad utilice su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad 'image-rendering' en CSS?

Ajusta el tamaño de la imagen.Especifica el algoritmo de renderizado de imagen que se debe utilizar.Cambia el color de fondo de la imagen.Permite que las imágenes bitmap se vean más nítidas al escalar la imagen.Crea un borde alrededor de la imagen.

Propiedad CSS image-rendering ​

Sintaxis ​

Ejemplo de la propiedad image-rendering: ​

Resultado ​