Hoy en día todo gira en torno al diseño web responsivo o responsive web design, la experiencia que el usuario tenga con nuestra web será la prueba de fuego para conseguir nuestros objetivos, independientemente del medio que esté utilizando para verla.
Hoy en día todo gira en torno al diseño web responsivo o responsive web design, la experiencia que el usuario tenga con nuestra web será la prueba de fuego para conseguir nuestros objetivos, independientemente del medio que esté utilizando para verla.
«La experiencia de usuario debe ser prioritaria a la hora de pensar en cualquier tipo de estrategia.»
Pero os pongo en situación, antes cuando un desarrollador se ponía manos a la obra con una web, tenía serios problemas a la hora de optimizar las imagenes de la misma.
No tenía sentido que la utilizada para cubrir una pantalla completa de un ordenador con un peso determinado, fuera la misma imagen que apareciera en un dispositivo móvil o en una pantalla mucho más pequeña consumiendo muchos más recursos.
En la actualidad tenemos varias opciones para subsanar este inconveniente con las imágenes que utilicemos en nuestros proyectos web. Os voy a contar algunas de ellas.
Una de ellas es utilizando los atributos srcset y sizes del elemento img.
Srcset.
El atributo srcset permite crear una lista de imágenes, que separaremos por comas y que el navegador gestionará en función de la densidad de píxeles del dispositivo. (dpi)
Para ello tenemos que indicarle la siguiente información sobre cada imagen.
Lo primero la ruta al archivo (path) y a continuación la densidad de pixeles (pixel density).
Para indicar la densidad de pixeles añadimos un valor (Nx) que se trata de la referencia que el navegador utilizará para seleccionar la imagen que mejor se ajuste a la densidad de pixeles del dispositivo que va a mostrarla.
El código sería el siguiente:
<img src="primera-imagen-jpg"
srcset="segunda-imgen@2x.jpg 2x, tercera-imagen@3x.jpg 3x, cuarta-imgen@4x.jpg 4x"
alt="descripcion de la imagen">
Como veréis la primera imagen no tiene el valor (Nx) esto es porque por defecto su valor es 1x.
Sizes.
El atributo sizes muestra imágenes en función del tamaño de la ventana o pantalla del dispositivo.
Para ello podemos utilizar todos los valores admitidos que utilizamos normalmente para asignar tamaños (px, rem, unidades relativas al viewport, @medias queries.)
Tenemos que tener presente que para utilizar este atributo debemos indicar:
Una condición de media query que indique en qué casos se deberá aplicar este tamaño y el ancho que tomará la imagen en unidades CSS.
<img src="nuestra-imagen-400.jpg" alt="descripción de la imagen" sizes="(min-width: 640px) 60vw, 100vw"
srcset="nuestra-imagen-200.jpg 200w,
nuestra-imagen-400.jpg 400w,
nuestra-imagen-800.jpg 800w,
nuestra-imagen-1200.jpg 1200w">Como veis en el código le estamos diciendo que para anchos de pantalla de 640px y superiores utilizaremos una imagen con un ancho del 60% de la ventana del navegador mientras que para anchos inferiores utilizaremos una imagen que ocupe el 100%. Lo que le decimos al navegador es que seleccione la imagen que mejor se adapte aportándole diferentes anchos 200px, 400px, 800px y 1200px.
En el caso de que utilicemos un navegador que no soporten estos atributos mencionados, lo que ocurrirá es que obtendrán la imagen del atributo regular src.
Tras ver estos atributos del elemento <img> nos encontramos con el elemento <picture>, el que nos permite poner múltiples etiquetas y cargar varias imagenes en función de las condiciones que necesitemos.
Picture.
Picture hace uso de srcset para especificar la imagen, y nos aporta un nuevo atributo media que funciona de igual manera que los Media Queries en CSS.
Por ejemplo:
<picture>
<source srcset="imagen-320.jpg" media="(min-width: 320)">
<source srcset="imagen-728.jpg" media="(min-width: 728px)">
<source srcset="imagen-1024.jpg" media="(min-width: 1024px)">
<img src="imagen.jpg" alt="Descripción de la imagen">
</picture>
Podemos observar que el código indica lo siguiente, para dispositivos con el ancho mínimo de 320px utiliza la imagen image-320.jpg, si el ancho mínimo es 728px utiliza la imagen-728.jpg, si el ancho mínimo es 1024px utiliza la imagen-1024.jpg y si no se llega a cumplir ninguna de esas reglas, utiliza lo que hay en la etiqueta img.
También podemos determinar la imagen más adecuada, dependiendo el tipo de pantalla.
<picture>
<source srcset="imagen-320.jpg, imagen-320@2x.jpg 2x" media="(min-width: 468px)">
<source srcset="imagen-728.jpg, imagen-728@2x.jpg 2x" media="(min-width: 728px)">
<source srcset="imagen-1024.jpg, imagen-1024@2x.jpg 2x" media="(min-width: 1024px)">
<img src="imagen.jpg" srcset="imagen@2x.jpg 2x" alt="descripcion de la imagen">
</picture>
Así mismo, podemos usar el elemento Picture para cargar el tipo de formato más adecuado, dependiendo del navegador que se está usando.
<picture>
<source srcset="imagen.webp" type="image/webp">
<img src="imagen.jpg" alt="descripcion de la imagen">
</picture>
Recordad que, al igual que en los anteriores atributos, no va a funcionar en todos los navegadores así que lo mejor es consultar aquellos que lo soportan en el siguiente enlace: ver soporte.
Ahora ya sabéis cómo resolver algunos de los problemas que se presentan al crear una web responsiva, ¿conocíais alguna de estas opciones? ¡Contadnos vuestros trucos!