La image-renderingpropiedad define cómo el navegador debe representar una imagen si se escala hacia arriba o hacia abajo de sus dimensiones originales. De forma predeterminada, cada navegador intentará aplicar un alias a esta imagen escalada para evitar la distorsión, pero esto a veces puede ser un problema si queremos que la imagen conserve su forma pixelada original.
img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )Acerca de esos tres valores posibles:
auto: valor predeterminado que utiliza el algoritmo estándar del navegador para maximizar la apariencia de una imagen.crisp-edges: el contraste, los colores y los bordes de la imagen se conservarán sin suavizar ni desenfocar. De acuerdo con la especificación, esto fue diseñado específicamente para pixel art. Este valor se aplica a imágenes escaladas hacia arriba o hacia abajo.pixelated: a medida que la imagen cambia de tamaño, el navegador conservará su estilo pixelado utilizando la escala del vecino más cercano. Este valor solo se aplica a las imágenes ampliadas.
Esta propiedad se puede aplicar a imágenes de fondo, canvaselementos e imágenes en línea. Sin embargo, es importante tener en cuenta que probar estos valores en este momento es particularmente confuso debido a la falta de compatibilidad constante con el navegador.
Ejemplo
Aquí hay una imagen en línea muy pequeña que se compone de cuatro píxeles de colores:
Si cambiamos el ancho de esta imagen en línea a 300pxChrome (41), encontraremos que el navegador ha intentado optimizar la imagen lo mejor que puede:
Para conservar su aspecto pixelado original podemos usar el siguiente pixelatedvalor, así:
img ( image-rendering: pixelated; )Esto da como resultado que el navegador elija un algoritmo alternativo con el que procesar la imagen. En este ejemplo, Chrome eliminará el alias predeterminado:
Desafortunadamente, después de muchas pruebas, parece que los navegadores interpretan los valores crisp-edgesy pixelatedde manera muy confusa en este momento, por lo que es importante tener en cuenta una vez más que esta especificación está en sus inicios. Por ejemplo, Chrome parece renderizar pixelatedimágenes de la misma forma que Firefox y Safari renderizan imágenes crisp-edges.
Ejemplo de código QR
Otro caso de uso de esta propiedad podría ser el de los códigos QR en los que desea aumentar su tamaño sin distorsionarlo mediante el uso del suavizado estándar. Asegúrese de consultar este ejemplo en modo de pantalla completa para ver cómo se estira la imagen:
Vea la demostración de procesamiento de imágenes de Pen de Robin Rendle (@robinrendle) en CodePen.
Alternar ejemplo
En el lápiz a continuación, es posible alternar entre estos valores y ver las discrepancias entre los navegadores:
Vea la demostración de renderizado de Pen Image de Robin Rendle (@robinrendle) en CodePen.
Soporte de navegador
crisp-edgesactualmente requiere prefijos de proveedor ( -moz-crisp-edges) para obtener el mejor soporte posible.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 41 | 3,6 * | 11 * | 79 | 10 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 * | 81 | 10.0-10.2 |
En el momento de esta actualización, Firefox 61 es compatible crisp-edgespero no pixelatedy Chrome 68 es compatible pixelatedpero no crisp-edges.