Debido a la gran variedad de dispositivos y resoluciones que existen hoy en día, y a las que debemos de dar soporte, es necesario poder aportar diferentes alternativas a los navegadores con el objetivo de que la experiencia de usuario no se degrade por imágenes pixeladas o por unas demasiado pesadas para la resolución y la conexión del dispositivo del usuario.

srcset

Durante un corto espacio de tiempo apareció un atributo llamado srcLow, que permitía referenciar una copia de la imagen indicada en src con una calidad inferior. Este atributo ha quedado obsoleto y no se garantiza su continuación. Por otro lado, el atributo srcset, todavía en fase experimental, es más específico y nos permite indicar un lista de fuentes basadas en el ancho, alto y la densidad del píxel de la pantalla del cliente.

<img src="Unix.jpg" srcset="Unix_HD.jpg 2x, Unix_phone.jpg 100w, Unix_HD_phone.jpg 100w 2x" />

Como podemos ver en el código anterior, utilizamos el atributo src para asignar la imagen por defecto, o fallback, y utilizamos srcset para el resto de casos. Los valores que podemos definir para que el navegador detecte cuál es la mejor opción para él son el ancho (nw), el alto (nh) y la densidad del píxel (Nx). Si el ancho o alto son omitidos se considera que tienen un valor infinito. Por otro lado, si no se indica la densidad se considera que tiene valor 1. Las fuentes ofrecidas en el código anterior son las siguientes:

• Unix_HD.jpg 2x: Para aquellos navegadores con el doble de densidad.
• Unix_phone.jpg 100w: Para aquellos dispositivos que tengas un ancho de 100px.
• Unix_HD_Phone.jpg 100w 2x: Exactamente el mismo ancho que el anterior pero con el doble de densidad.

Si el navegador no reconoce el atributo srcset simplemente utilizará la imagen asignada a src, obviando los valores de srcset.

¿Pero qué es realmente Nx en cuanto a la densidad del píxel se refiere?

Básicamente significa que el navegador del cliente tiene N píxeles de más por pixel CSS (En este ejemplo 2 píxeles por cada pixel CSS).

La última actualización del draft fue justo este mes de Noviembre. Sin embargo, todavía no está disponible en los navegadores más populares, aunque Chrome puso a nuestra disposición una propiedad CSS, hace ya algún tiempo, llamada -webkit-image-set. Por otro lado según su Chromium Dashboard srcset ya está implementado para su versión en Android.

Espero que sea de interés 🙂

¡Saludos!