jueves, 1 de diciembre de 2022

Propiedad CSS - image-rendering (representación de imágenes)

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% example 100% example 138% example downsized example upsized example

Representación de imágenes: pixelada; (-ms-interpolation-mode: vecino más cercano)

78% example 100% example 138% example downsized example upsized example

Representación de imágenes: bordes nítidos; (-webkit-optimizar-contraste)

78% example 100% example 138% example downsized example upsized example

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



¡¡Aprender es interesante y divertido!!


Salu2 y bendiciones,
Atte, Angel Paz
Duda con el Efecto rayo 71pkhu