Optimización

Imágenes adaptables

Lo que se pretende con esta técnica es mostrar diferentes imágenes, en función diferentes situaciones (como el tamaño del dispositivo).

Los atributos de HTML srcset y sizes proporcionan rutas de imágenes adicionales e indicaciones al navegador.

<img srcset="rusia-san-petersburgo-320w.jpg 320w,
rusia-san-petersburgo-480w.jpg 480w,
rusia-san-petersburgo-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="rusia-san-petersburgo.jpg" alt="San Petersburgo, Rusia">

srcset define un conjunto de imágenes, cuya sintaxis es, para cada grupo separado por comas:

nombre_imagen ancho_en_píxelesw

donde ‘ancho_en_píxeles.w‘ se refiere al número de píxeles de ancho reales de la imagen, seguidos de ‘w’ en lugar de ‘px’.

sizes define un conjunto de condiciones (usualmente ancho de pantalla). El uso de sizes es opcional, y en caso de omitirlo el navegador asume que cuando usamos una imagen, esta va a llenar el ancho entero del viewport. La sintaxis:

condición tamaño_slot

donde ‘tamaño_slot’ es el tamaño que la imagen llenará cuando la condición sea cierta, p.ej. (max-width: 480px) = 480 píxeles o menos.

Así, el navegador: busca la primera condición cierta; busca el tamaño de slot dado para esa media query; carga la imagen definida en srcset que más se acerca al tamaño de slot.

La sintaxis presentada es la recomendada, aunque existe un segundo enfoque o sintaxis que usa las etiquetas <picture> y <source>, método más rígido y menos eficiente. Este puede encontrarse en w3schools.

image-set(), el equivalente a srcset para las imágenes de fondo

image-set() permite proporcionar imágenes alternativas asignadas como fondo con con la propiedad CSS background-image, en vez de la etiqueta HTML <img>, para la que habría que usar el atributo srcset.

Proporciona un conjunto de imágenes para que el navegador elija la más apropiada en función de la pantalla de visualización del usuario. Además de esto, nos permite el uso imágenes de próxima generación (AVIF, WebP, …), añadiendo reglas para que ofrecer imágenes de formato clásico (como JPG, …) a los navegadores antiguos o no compatibles con las de próxima generación.

.capa  {
  /* Se configura una imágen de fondo para aquellos navegadores que no soporten la función: */
  background-image: url("imagen.jpg");
  /* Se configura también con el prefico -webkit para la compatibilidad con Chrome, Safari y otros varios */
  background-image: -webkit-image-set(
    url("imagen-600px.jpg") 1x,
    url("imagen-1600px.jpg") 2x);
  background-image: image-set(
    url("imagen-600px.jpg") 1x,
    url("imagen-1600px.jpg") 2x);
}

1x se usa para la imagen en baja resolución, mientras que 2x se usa para definir la imagen de alta resolución. x es un alias de dppx, abrevaitura de dos per pixel unit.
Los usuarios con gran ancho de banda y pantalla grande, verán la imangen asignada como 2x. Usuarios con poco ancho de banda o pantallas pequeñas, su navegador decidirá por sí mismo mostrar la imágen 1x.

Su uso se explica en la página image-set de MDN,  y con mucho más detalle en Using Performant Next-Gen Images in CSS with image-set, de CSS-TRICKS.

Enlaces de interés

• [developer.mozilla.org] Mozilla Developer Network ofrece una guía detallada.
• [css-tricks.com] Otra excelente guía de css-tricks, que explica entre otras cosas, por qué es peor la sintaxis con <picture> y <source>, o el uso opcional de sizes, y se adentra mucho más con consejos.

La técnica Lazy Loading

Lazy loading es una técnica en desarrollo web consistente en cargar las imágenes de una página cuando deben aparecer en pantalla, y no antes. Así, a medida que el usuario hace scroll las imágenes inicialmente escondidas van cargándose cuando son realmente necesarias, con el consiguiente ahorro en el tiempo de carga inicial. Si se desea conocer los efectos negativos en SEO de un tiempo de carga lento, ver apartado El tiempo de carga de las páginas web, de la introducción al SEO.