La propiedad CSS proporciona una pista al navegador sobre el algoritmo que debe usar para escalar imágenes. Se aplica al elemento mismo, así como a cualquier imagen suministrada en otras propiedades del elemento. No tiene efecto en las imágenes sin escala .image-rendering
Ejemplos
Ejemplo 1
/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
div {
background: url(chessboard.gif) no-repeat 50% 50%;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
Ejemplos en vivo
Renderizado de imágenes: automático;
78% 
100% 138% downsized upsized
Representación de imágenes: pixelada; (-ms-interpolation-mode: vecino más cercano)
78% 100% 138% downsized upsized
Representación de imágenes: bordes nítidos; (-webkit-optimizar-contraste)
78% 100% 138% downsized upsized
Sintaxis
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;
Valores
auto
Valor predeterminado, la imagen debe escalarse con un algoritmo que maximice la apariencia de la imagen. En particular, los algoritmos de escalado que "suavizan" los colores son aceptables, como la interpolación bilineal. Esto está diseñado para imágenes como fotos. Desde la versión 1.9 (Firefox 3.0), Gecko utiliza remuestreo bilineal (alta calidad).
crisp-edges
La imagen se debe escalar con un algoritmo que conserve el contraste y los bordes de la imagen, y que no suavice los colores ni desenfoque la imagen en el proceso. Esto está destinado a imágenes como pixel art.
pixelated
Al aumentar la escala de la imagen, se debe usar el "vecino más cercano" o un algoritmo similar, de modo que la imagen parezca estar compuesta de píxeles grandes. Al reducir la escala, esto es lo mismo que 'auto'.
Los valores y presentes en el borrador inicial (y provenientes de su contraparte SVG) se definen como sinónimos del valor. optimizeQualityoptimizeSpeedauto
Sintaxis formal
auto | crisp-edges | pixelated
Descripción
La propiedad CSS proporciona una pista al navegador sobre el algoritmo que debe usar para escalar imágenes. Se aplica al elemento mismo, así como a cualquier imagen suministrada en otras propiedades del elemento. No tiene efecto en las imágenes sin escala .image-rendering
Por ejemplo, si el tamaño natural de la imagen es 100 × 100 px pero el autor de la página especifica sus dimensiones como 200×200px(o 50×50px), la imagen se ampliará (o reducirá) a las nuevas dimensiones utilizando el algoritmo especificado. El escalado también puede aplicarse debido a la interacción del usuario (zoom).
Compatibilidad con el navegador
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
Basic support (auto) |
(Yes) | 3.6 (1.9.2) | No support[1] | 11.60 | (Yes) |
crisp-edges |
No support | 3.6 (1.9.2)-moz | No support | 11.60-o | (Yes) [2] |
pixelated |
41.0 | No support (bug 856337) | No support | 26.0 | (Yes) [3] |
optimizeQuality, optimizeSpeed |
No support | 3.6 (1.9.2) | No support | 11.60 | (Yes) |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 41.0 | ? | ? | ? | ? |
Notas
[1]Internet Explorer 7 y 8 admiten la-ms-interpolation-modepropiedad no estándar con dos valores (bicubicynearest-neighbor):
- se aplica solo a imágenes (JPG, GIF, PNG, ...)
- en IE7 solo para imágenes sin transparencia
- no hereda
- valor por defecto IE7: nearest-neighbor(baja calidad)
- valor predeterminado IE8: bicubic(alta calidad)
- obsoleto a partir de IE9
[2] Compatible con un nombre no estándar: -webkit-optimize-contrast.
[3] Compatibilidad con WebKit Nightly, ver error
Canvas puede proporcionar una solución alternativa para obtener bordes nítidos/optimizar el contraste a través de la manipulación manual de datos de imagen.
Fuentes de consulta: https://reference.codeproject.com/css/image-rendering
| Salu2 y bendiciones, Atte, Angel Paz |  |
