Las imágenes son una de las partes más importantes del diseño web. Normalmente dejamos que sean los navegadores los que redimensionen y escalen las imágenes para que encajen bien en el diseño y se vean lo mejor posible. No obstante, en ocasiones es mejor controlar explícitamente cómo se escalan las imágenes.
Por ese motivo, la versión 41 de Google Chrome añadió soporte para el nuevo valor pixelated de la propiedad image-rendering de CSS 3. Gracias a esta propiedad, podrás definir el algoritmo utilizado para ampliar las imágenes.
En concreto, el valor pixelated permite desactivar el suavizado de imágenes cuando se amplia su tamaño. Este suavizado normalmente se realiza mediante una interpolación bilineal. El valor pixelated hace que el algoritmo utilizado sea el denominado "nearest neighbor", que consigue imágenes perfectamente pixeladas (más adelante verás por qué a veces nos interesan las imágenes pixeladas en vez de suavizadas).
La siguiente imagen muestra el resultado de ampliar una imagen pequeña mediante el algoritmo por defecto de los navegadores:
Utilizando el algoritmo asociado al valor pixelated, el resultado de ampliar la misma imagen es el siguiente:
Para aplicar este algoritmo, simplemente utiliza la propiedad image-rendering con el nuevo valor pixelated:
<img style="image-rendering: pixelated;" width="100" height="100" src="...">Si tu navegador es Google Chrome 41 u Opera 26, puedes probar la demo del funcionamiento de esta propiedad.
Además de las imágenes, esta propiedad se puede aplicar también a los siguientes elementos:
<canvas>- cualquier elemento con una propiedad
background-image
¿Cuándo es útil mostrar las imágenes pixeladas?
Obviamente, si tu sitio incluye fotografías, nunca deberías aplicar esta propiedad porque se verían muy mal.
El primer caso de uso de esta propiedad son los juegos, ya que normalmente redimensionas el elemento <canvas> del juego para que ocupe toda la anchura del navegador. Antes el juego podía llegar a verse ligeramente borroso al ampliar la imagen, pero ahora se verá perfecto.
El otro caso de uso más útil es el de las aplicaciones que muestran códigos QR, códigos de barras y gráficos similares. En estas aplicaciones es normal que el usuario amplie la imagen del código hasta ocupe toda la pantalla del móvil, así que es muy importante mantener la pixelación de la imagen para que se reconozca el código sin problemas.
Esta es la imagen de un código QR ampliado y suavizado:
Esta es la imagen de un código QR ampliado y pixelado (sólo lo verás bien en Google Chrome 41 y Opera 26):
Recursos útiles
Sobre el autor
Este artículo fue publicado originalmente por Paul Kinlan y ha sido traducido con permiso por Javier Eguiluz.