Imágenes responsive en WordPress con srcset

Últimamente, la mayoría de páginas webs están adaptadas a la versión responsive, para que así puedan adaptarse a las pantallas de cualquier dispositivo, ya sea teléfono móvil o tablet. Pero, simplemente tienen la página adaptada, no su contenido. Es decir, la pantalla se adaptará al teléfono móvil pero su contenido no. Sí que se ajustará a la resolución de la pantalla y el usuario lo visualizará bien pero es poco óptimo en cuanto al consumo de recursos (ancho de banda, procesador…) que requiere de los dispositivos de los usuarios.

Con esto lo que queremos decir es que no tiene ningún sentido que una imagen que pesa 1MB y hace 1200×1200, se cargue reducida en 600×600. Ya que además esto producirá una ralentización en la carga de las imágenes de los productos en un ecommerce, lo cual hará disminuir la satisfacción del usuario.

En resumen, la mayoría de las webs responsive no tienen en cuenta los recursos y eso hace que carguen imágenes mucho más pesadas de lo necesario.

El atributo srcset

Tenemos distintas opciones para poder adaptar las imágenes a la versión responsive; una de ellas es el atributo srcset.

Por lo general, cuando incluimos una imagen en nuestra web, incluimos un código HTML como el siguiente:

<img src="imagen_grande.jpg" alt="la imagen de mi producto">

Este código lo que hace es decirle al navegador qué es lo que tiene que mostrar en esa parte de la página. Si utilizamos el atributo srcset, podemos darle distintas opciones de imagen en función de la resolución del dispositivo desde el cual se visite la página:

<img src="imagen_grande.jpg" srcset="imagen_pequena.jpg 300w, imagen_mediana.jpg 1000w, imagen_grande.jpg 2000w"alt="la imagen de mi producto">

De esta manera lo que le estamos diciendo al navegador es que tiene una imagen por defecto, que es imagen_grande.jpg, pero también hay otras opciones:

• Una imagen que se llama imagen_pequena.jpg que tiene un ancho de 300 píxeles
• Una imagen que se llama imagen_mediana que tiene un ancho de 1000 píxeles

Con esta información, el navegador ya sabe cuál es la imagen que debe cargar según el dispositivo que se esté utilizando. De esta manera, la imagen que se cargue será la correcta y no se cargarán imágenes de mayores tamaños, lo cual solo haría ralentizar la página web.

El atributo sizes

El atributo sizes nos permite tener un mayor control en cuanto a la imagen que se debe cargar. En vez de ser el navegador quien elige la imagen adecuada para cada dispositivo, somos nosotros quien forzamos dicho condicionamiento.

Este sería un ejemplo:

<img src="imagen_grande.jpg" srcset="imagen_pequena.jpg 300w, imagen_mediana.jpg 1000w, imagen_grande.jpg 2000w" sizes="(max-width: 400px) 300px, (max-width: 1200px) 1000px, 2000px" alt="la imagen de mi producto">

Aquí en vez de informarle simplemente de las opciones que tiene, también se le pueden poner condiciones. Por ejemplo: Si el tamaño de la pantalla es como mucho de 600 píxeles entonces carga la imagen que tiene 500 píxeles de ancho.

Con estos dos atributos mostrados anteriormente, se puede tener un mayor control sobre qué imágenes se deben cargar en la página web según el dispositivo con el cual cada usuario accede. De esta manera, también se optimiza el tiempo de carga de dicha página, se ahorran costes y se mejora la experiencia de compra de los usuarios.