Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad CSS image-rendering provee una sugerencia al navegador acerca del algoritmo que debe usar para escalar imágenes.

/* Keyword values */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

Esta propiedad aplica tanto al elemento mismo, como a cualquier imagen provista en otra propiedad del elemento. No tiene efecto alguno en imágenes no-escaladas. Por ejemplo, si el tamaño natural de una imágen es 100×100px pero el autor de la página especifica sus dimenciones como  200×200px (o 50×50px), entonces la imágen se escalará (en cualquiér dirección) a sus nuevas dimensiones usando el algoritmo especificado. El escalado podría también aplicar por interacción del usuario (cambiando la escala).

Un Canvas puede proveer una solución de respaldo para crisp-edge/optimize-contrast a través de la manipulación manual de datos de la imagen.

Valor inicialauto
Applies toall elements
Heredableyes
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

Valores

auto
Valor predeterminado, la imagen debe escalarse con un algoritmo que maximice la apariencia de la imagen. En particular, son aceptables los algoritmos de escala que "suavizan" colores, como la interpolación bilinear. So propósito son imágenes de fotografías. Desde la versión 1.9 (Firefox 3.0), Gecko usa remuestreo bilinear (alta calidad).
crisp-edges
La imagen se debe escalar con un algoritmo que preserve el contraste y los bordes de la imagen, y que no suavice los colores ni introduzca borrones en la imagen en el proceso. Los algoritmos adecuados incluyen algoritmos de escalamiento nearest-neighbor y otros algoritmos de escalabilidad tales como algoritmos 2×SaI y hqx-family. Este valor está destinado a imágenes pixel-art, como en juegos de navegador.
pixelated
Al escalar la imagen, se debe usar el algoritmo de vecino más cercano, de modo que la imagen parezca estar compuesta de píxeles grandes. Cuando se reduce la escala, esto es lo mismo que 'auto'.
Nota: Los valores optimizeQuality y optimizeSpeed presentes en un borrador anterior (y proviniendo de su contraparte SVG) son definidos como sinónimos del valor auto.

Formal syntax

auto | crisp-edges | pixelated

Ejemplos

/* aplica a imágenes GIF y PNG; eviar bordes borrosos */
img[src$=".gif"], img[src$=".png"] {
  image-rendering: crisp-edges;
}
div {
  background: url(chessboard.gif) no-repeat 50% 50%;
  image-rendering: crisp-edges;
}

Ejemplos interactivos

image-rendering: auto;

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

image-rendering: crisp-edges; (-webkit-optimize-contrast)

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

Especificaciones

Especificación Estado Comentario
CSS Images Module Level 3
La definición de 'image-rendering' en esta especificación.
Candidate Recommendation Initial definition

Nota: Aunque similar al atributo SVG image-rendering, los valores son bastante diferentes ahora.

Compatibilidad con navegadores

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
image-rendering
Experimental
Chrome Soporte completo 13Edge Sin soporte NoFirefox Soporte completo 3.6IE Sin soporte NoOpera Soporte completo 15Safari Soporte completo 6WebView Android Soporte completo 41Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo 14Safari iOS Soporte completo 6Samsung Internet Android Soporte completo 1.0
crisp-edges
Experimental
Chrome Soporte completo 1
Nombre alternativo
Soporte completo 1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-optimize-contrast
Edge Sin soporte NoFirefox Soporte completo 65
Soporte completo 65
Soporte completo 3.6
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
IE Sin soporte NoOpera Soporte completo 15
Nombre alternativo
Soporte completo 15
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-optimize-contrast
Sin soporte ? — 15
Prefijado
Prefijado Requiere de un prefijo de vendedor : -o-
Safari Soporte completo 6
Nombre alternativo
Soporte completo 6
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-optimize-contrast
WebView Android Soporte completo Si
Nombre alternativo
Soporte completo Si
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-optimize-contrast
Chrome Android Soporte completo 18
Nombre alternativo
Soporte completo 18
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-optimize-contrast
Firefox Android Soporte completo 65
Soporte completo 65
Soporte completo 4
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Opera Android Soporte completo 14
Nombre alternativo
Soporte completo 14
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-optimize-contrast
Sin soporte ? — 14
Prefijado
Prefijado Requiere de un prefijo de vendedor : -o-
Safari iOS Soporte completo 6
Nombre alternativo
Soporte completo 6
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-optimize-contrast
Samsung Internet Android Soporte completo 1.0
Nombre alternativo
Soporte completo 1.0
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-optimize-contrast
pixelated
Experimental
Chrome Soporte completo 41Edge Sin soporte NoFirefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 26Safari ? WebView Android Soporte completo 41Chrome Android Soporte completo 41Firefox Android Sin soporte NoOpera Android Soporte completo 26Safari iOS ? Samsung Internet Android Soporte completo 4.0
optimizeQuality
DeprecadoNo estándar
Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 3.6IE Sin soporte NoOpera Soporte completo SiSafari Soporte completo SiWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 4Opera Android ? Safari iOS ? Samsung Internet Android Sin soporte No
optimizeSpeed
DeprecadoNo estándar
Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 3.6IE Sin soporte NoOpera Soporte completo SiSafari Soporte completo SiWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 4Opera Android ? Safari iOS ? Samsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
No estandar . Esperar poco soporte entre navegadores.
No estandar . Esperar poco soporte entre navegadores.
Deprecado. No debe ser usado en nuevos sitios web.
Deprecado. No debe ser usado en nuevos sitios web.
Usa un nombre no estandar.
Usa un nombre no estandar.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

 

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, rodrigorila
Última actualización por: mdnwebdocs-bot,