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 pixelatedhace 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 valorpixelated:<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):
Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
No hay comentarios:
Publicar un comentario