Propiedad CSS image-rendering | Referencia CSS W3docs

La propiedad CSS image-rendering le indica al navegador qué algoritmo de escalado usar cuando una imagen se muestra en un tamaño diferente a su resolución natural (intrínseca). Controla cómo se interpolan los píxeles, no si la imagen se escala.

Esta página explica qué hace cada valor, cuándo usar pixelated frente a crisp-edges, cómo manejar las diferencias entre navegadores e incluye ejemplos ejecutables.

¿Cuándo lo usaría?

De forma predeterminada, el navegador aplica interpolación suave (bilineal o bicúbica) cuando escala una imagen hacia arriba o hacia abajo. Eso se ve muy bien en fotografías, pero desenfoca las imágenes que deben mantenerse nítidas píxel a píxel. Recurre a image-rendering cuando:

Estás ampliando pixel art, sprites de juegos retro o iconos de 8 bits y quieres que los píxeles en bloque se conserven en lugar de difuminarse.
Estás haciendo zoom en un código QR, código de barras o diagrama técnico donde cada píxel tiene significado.
Escales deliberadamente una imagen de baja resolución y prefieras bordes nítidos y duros sobre un resultado suave y turbio.
Estás construyendo un juego basado en canvas y quieres que el navegador mantenga los píxeles del canvas escalado nítidos.

Para fotografías y degradados, déjalo en auto — el suavizado es exactamente lo que quieres en esos casos.

Consejo

crisp-edges y pixelated son similares pero no idénticos. pixelated garantiza el escalado por vecino más próximo; crisp-edges deja que cada navegador elija un algoritmo nítido. Los autores a menudo enumeran ambos para que uno actúe como alternativa del otro entre motores.

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

Sintaxis

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

La propiedad acepta una sola palabra clave. No existe una forma abreviada.

Valores

Valor	Descripción
`auto`	El navegador elige un algoritmo que maximiza la calidad visual. Para la mayoría de los navegadores, esto significa interpolación bilineal o bicúbica — suave, pero puede verse borroso en pixel art. Este es el valor predeterminado.
`crisp-edges`	La imagen se escala sin ningún suavizado ni antialiasing. El navegador elige su propio algoritmo de alto contraste (puede ser vecino más próximo u otro método nítido). Los resultados pueden variar ligeramente entre motores.
`pixelated`	Escalado estricto por vecino más próximo. Cada píxel fuente se asigna a uno o más píxeles de destino del mismo color sin mezcla. Garantiza el aspecto de píxel en bloque en todos los navegadores compatibles.
`initial`	Restablece la propiedad a su valor predeterminado (`auto`).
`inherit`	Hereda el valor del elemento padre.

`pixelated` frente a `crisp-edges` — ¿cuál es la diferencia?

Ambos valores evitan el suavizado, pero sus contratos difieren:

pixelated es una especificación precisa: el navegador debe usar el escalado por vecino más próximo. Cada píxel en la salida se asigna exactamente a un píxel fuente — se obtienen resultados duros, irregulares e intencionalmente pixelados. Esto es en lo que confían los juegos de pixel art.
crisp-edges dice "evita el suavizado y preserva el contraste" pero deja el algoritmo a criterio del navegador. Firefox usa su propio algoritmo nítido; Safari antiguo usaba -webkit-optimize-contrast. El resultado visual suele ser muy similar a pixelated, pero no se garantiza que sea idéntico.

Para pixel art, prefiere pixelated. Usa crisp-edges como red de seguridad para navegadores más antiguos que no implementaron pixelated.

Ejemplos

Comparación básica: auto frente a pixelated

El ejemplo a continuación muestra la misma imagen pequeña renderizada al triple de su ancho natural. La versión auto está borrosa; pixelated mantiene los bordes duros.

<!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://api.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://api.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://api.w3docs.com/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
      </div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Uso de crisp-edges con alternativa

Debido a que crisp-edges tiene un historial irregular (Safari antiguo requería -webkit-optimize-contrast), lo más seguro es apilar las tres declaraciones. El navegador conserva el último valor que reconoce:

.sharp-upscale {
  image-rendering: -webkit-optimize-contrast; /* Safari < 13 */
  image-rendering: crisp-edges;               /* Firefox, most modern browsers */
  image-rendering: pixelated;                 /* Chrome, Edge, Safari 13+ */
}

Aplicar image-rendering a un fondo CSS

La propiedad también funciona en background-image además de en elementos <img>. Esto es útil para fondos de pixel art en mosaico:

.pixel-bg {
  background-image: url('sprite-sheet.png');
  background-size: 300%;        /* zoom in */
  image-rendering: pixelated;   /* keep pixels sharp */
}

Aplicar image-rendering a un elemento canvas

Cuando dibujas con una resolución lógica baja en un <canvas> y luego escalas el elemento hacia arriba mediante CSS, pixelated mantiene los píxeles del canvas nítidos — una técnica común en juegos de pixel art:

<canvas
  id="game"
  width="64"
  height="64"
  style="width: 320px; height: 320px; image-rendering: pixelated;"
></canvas>

Los atributos width/height establecen la superficie de dibujo (64 × 64 píxeles). Los valores CSS width/height escalan el elemento 5× en pantalla. Sin pixelated, el navegador difuminaría el canvas escalado.

Cosas a tener en cuenta

Solo afecta a las imágenes escaladas. Si una imagen se muestra en su tamaño natural no hay nada que interpolar, por lo que image-rendering no tiene efecto visible.
La herencia puede sorprenderte. La propiedad se hereda, por lo que establecer image-rendering: pixelated en un <div> se aplica a todos los <img> descendientes y a las imágenes de fondo, a menos que lo sobreescribas.
pixelated también reduce el tamaño. El vecino más próximo también se aplica cuando la imagen es más pequeña que su fuente, lo que puede verse con aliasing. Para el escalado descendente general, auto suele verse mejor.
Se aplica a <img>, background-image, <canvas> y elementos SVG <image> — no al contenido vectorial (rutas SVG en línea) que el navegador rasteriza sobre la marcha.
Pantallas HiDPI / Retina. En una pantalla 2×, el pixel art mostrado con image-rendering: pixelated aparecerá con 2 píxeles CSS por píxel fuente. Considera proporcionar una regla @media (min-resolution: 2dppx) con una imagen natural más grande si deseas más detalle en píxeles físicos.
object-fit se ejecuta antes que image-rendering. La propiedad object-fit decide cómo la imagen rellena su caja; image-rendering luego decide cómo se ve el resultado escalado.

Compatibilidad con navegadores

pixelated está bien soportado en Chrome, Edge, Safari 13+ y Firefox 93+. crisp-edges es compatible con todos los navegadores modernos (Firefox, Chrome, Safari, Edge) y es la opción más segura para código que debe ejecutarse en navegadores más antiguos. El valor heredado -webkit-optimize-contrast solo es necesario para Safari 12 y versiones anteriores.

Propiedades relacionadas

background-image — establece imágenes que image-rendering puede luego hacer más nítidas.
background-size — escala imágenes de fondo, haciendo que image-rendering sea relevante.
object-fit — controla cómo un elemento reemplazado rellena su caja antes de que entre en juego el renderizado.
object-position — reposiciona la imagen dentro de la caja junto con object-fit.
width — redimensiona los elementos, lo que es lo que hace que image-rendering sea importante.
filter — aplica efectos visuales (desenfoque, contraste, etc.) después del renderizado.
Propiedades CSS3 — explora otras propiedades CSS modernas.

Práctica

¿Qué controla la propiedad CSS image-rendering?

Ajusta el tamaño del archivo de la imagen.Especifica el algoritmo utilizado para escalar una imagen hacia arriba o hacia abajo.Cambia el color de fondo detrás de la imagen.Evita la mezcla suave al escalar pixel art, manteniendo los píxeles nítidos.Crea un borde alrededor de la imagen.