Usa srcset para elegir automáticamente el tamaño de imagen adecuado.
Según HTTP Archive, una página web móvil típica pesa más de 2.6 MB, y más de dos tercios de ese peso son imágenes. Esta es una gran oportunidad para optimizar la campaña.
Resumen
- No guardes imágenes más grandes que su tamaño de visualización.
- Guarda varios tamaños para cada imagen y usa el atributo
srcsetpara permitir que el navegador elija el más pequeño. El valorwle indica al navegador el ancho de cada versión:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
Cómo guardar imágenes con el tamaño adecuado
Puedes hacer que tu sitio web sea más rápido y consuma menos datos si usas imágenes con dimensiones que coincidan con el tamaño de la pantalla. En otras palabras, asigna a las imágenes el ancho y el alto correctos cuando las guardes.
Mira las imágenes a continuación.
Parecen casi idénticos, pero el tamaño de archivo de uno es más de 10 veces mayor que el del otro.
El primer archivo de imagen es mucho más grande porque se guardó con dimensiones mucho mayores que el tamaño de la pantalla. Ambas imágenes se muestran con un ancho fijo de 300 píxeles, por lo que tiene sentido usar una imagen guardada con el mismo tamaño.
Para anchos fijos, usa imágenes guardadas con las mismas dimensiones que el tamaño de la pantalla.
Pero… ¿qué sucede si el tamaño de la pantalla varía?
En un mundo de múltiples dispositivos, las imágenes no siempre se muestran en un solo tamaño fijo.
Es posible que los elementos de imagen tengan un ancho porcentual o formen parte de diseños responsivos en los que los tamaños de visualización de las imágenes cambian para adaptarse al tamaño de la pantalla.
… ¿y qué sucede con los dispositivos que requieren muchos píxeles, como las pantallas Retina?
Ayuda al navegador a elegir el tamaño de imagen correcto
¿No sería genial que pudieras hacer que cada imagen esté disponible en diferentes tamaños y, luego, dejar que el navegador elija el mejor tamaño para el dispositivo y el tamaño de visualización? Lamentablemente, hay una catch-22 cuando se trata de determinar qué imagen es la mejor. El navegador debería usar la imagen más pequeña posible, pero no puede conocer el ancho de una imagen sin descargarla para verificarlo.
Aquí es donde srcset resulta útil. Guardas imágenes en diferentes tamaños y, luego, le indicas al navegador el ancho de cada versión:
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
Los valores de w muestran el ancho de cada imagen en píxeles. Por ejemplo, small.jpg 500w le indica al navegador que small.jpg tiene 500 píxeles de ancho. Esto permite que el navegador elija la imagen más pequeña posible, según el tipo de pantalla y el tamaño de la ventana gráfica, sin tener que descargar imágenes para verificar su tamaño.
Puedes ver srcset en acción en la siguiente imagen. Si estás en una laptop o computadora de escritorio, cambia el tamaño de la ventana del navegador y vuelve a abrir esta página.
Luego, usa el panel Network de las herramientas del navegador para verificar qué imagen se usó.
(Deberás hacerlo en una ventana de incógnito o privada; de lo contrario, se almacenará en caché el archivo de imagen original).
¿Cómo puedo crear varios tamaños de imágenes?
Deberás tener disponibles varios tamaños para cada imagen que quieras usar con srcset.
En el caso de imágenes únicas, como las imágenes principales, puedes guardar manualmente diferentes tamaños. Si tienes muchas imágenes, como fotos de productos, deberás automatizar el proceso. Para ello, existen dos enfoques.
Incorpora el procesamiento de imágenes en tu proceso de compilación
Como parte del proceso de compilación, puedes agregar pasos para crear versiones de diferentes tamaños de tus imágenes. Consulta "Usa Imagemin para comprimir imágenes" para obtener más información.
Usa un servicio de imágenes
La creación y la entrega de imágenes se pueden automatizar con un servicio comercial como Cloudinary o un equivalente de código abierto como Thumbor que puedes instalar y ejecutar por tu cuenta.
Subes tus imágenes de alta resolución, y el servicio de imágenes crea y entrega automáticamente diferentes formatos y tamaños de imágenes según los parámetros de la URL. Por ejemplo, abre esta imagen de muestra en Cloudinary y trata de cambiar el valor de w o la extensión del archivo en la barra de URL.
Los servicios de imágenes también tienen funciones más avanzadas, como la capacidad de automatizar el "recorte inteligente" para diferentes tamaños de imágenes y entregar automáticamente imágenes WebP a los navegadores que admiten el formato, en lugar de JPEG, sin cambiar la extensión del archivo.
¿Qué sucede si la imagen no se ve bien en diferentes tamaños?
En ese caso, deberás usar el elemento <picture> para la "dirección de arte": proporcionar una imagen o un recorte de imagen diferente en diferentes tamaños. Para obtener más información, consulta el codelab "Dirección de arte".
¿Qué sucede con la densidad de píxeles?
Los dispositivos de alta gama tienen píxeles físicos más pequeños (más densos). Por ejemplo, un teléfono de alta gama puede tener dos o tres veces más píxeles en cada fila de píxeles que un dispositivo más económico.
Esto puede afectar el tamaño con el que necesitas guardar tus imágenes. No profundizaremos en los detalles aquí, pero puedes obtener más información en el codelab "Usa descriptores de densidad".
¿Qué sucede con el tamaño de la pantalla de la imagen?
Puedes usar sizes para que srcset funcione aún mejor.
Sin él, el navegador usa el ancho completo del viewport cuando elige una imagen de un srcset. El atributo sizes le indica al navegador el ancho con el que se mostrará un elemento de imagen, de modo que el navegador pueda elegir el archivo de imagen más pequeño posible antes de realizar cualquier cálculo de diseño.
En el siguiente ejemplo, sizes="50vw" le indica al navegador que esta imagen se mostrará en el 50% del ancho de la ventana gráfica.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
Puedes ver esto en acción en simpl.info/sizes y en el codelab "Cómo especificar varios anchos de ranura".
¿Qué sucede con la compatibilidad con navegadores?
srcset y sizes son compatibles con más del 90% de los navegadores a nivel mundial.
Si un navegador no admite srcset o sizes, recurrirá al uso del atributo src.
Esto hace que srcset y sizes sean excelentes mejoras progresivas.
Más información
Consulta la sección "Optimiza tus imágenes" de web.dev para obtener más información sobre la optimización de imágenes. Para una experiencia más guiada, considera probar el curso gratuito "Imágenes responsivas" que ofrece Udacity.