Usa srcset para elegir automáticamente el tamaño de imagen correcto.
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 las imágenes. Esta es una excelente oportunidad de optimización.
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 lograr 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 visualización. En otras palabras, dales a las imágenes el ancho y alto correctos cuando las guardes.
Mira las siguientes imágenes.
Parecen casi idénticos, pero el tamaño de archivo de uno es más de 10 veces más grande que el otro.
La primera imagen tiene un tamaño de archivo mucho mayor porque se guarda con dimensiones mucho más grandes 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 visualización.
Pero ¿qué pasa si el tamaño de la pantalla varía?
En un mundo con múltiples dispositivos, las imágenes no siempre se muestran en un solo tamaño fijo.
Los elementos de imagen pueden tener un porcentaje de ancho o ser parte de diseños responsivos en los que los tamaños de visualización de la imagen cambian para adaptarse al tamaño de la pantalla.
¿Y qué sucede con los dispositivos con muchos píxeles, como las pantallas Retina?
Ayuda al navegador a elegir el tamaño de imagen correcto
¿No sería genial si 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 la pantalla? Lamentablemente, hay un catch-22 cuando se trata de determinar qué imagen es la mejor. El navegador debe usar la imagen más pequeña posible, pero no puede saber el ancho de una imagen sin descargarla para comprobarlo.
Aquí es donde srcset resulta útil. Guardas imágenes en diferentes tamaños y, luego,
indícale 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 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 del viewport, sin tener que descargar imágenes para verificar su tamaño.
Puedes ver el funcionamiento de srcset en la siguiente imagen. Si usas una laptop o computadora de escritorio, cambia el tamaño de la ventana del navegador y vuelve a abrir esta página.
A continuación, utiliza el panel Red de las herramientas del navegador para comprobar qué imagen se usó.
Debes hacerlo en una ventana privada o de incógnito. De lo contrario, el archivo de imagen original se almacenará en caché.
¿Cómo puedo crear varios tamaños de imagen?
Deberás hacer que varios tamaños estén disponibles para cada imagen que desees usar con srcset.
En el caso de las imágenes únicas, como las hero images, puedes guardar manualmente diferentes tamaños. Si tienes muchas imágenes, como fotos de productos, deberás realizar una automatización. Para ello, existen dos enfoques.
Incorpora el procesamiento de imágenes en el proceso de compilación
Como parte de tu proceso de compilación, puedes agregar pasos para crear versiones de diferentes tamaños de tus imágenes. Si deseas obtener más información, consulta "Cómo usar Imagemin para comprimir imágenes".
Usa un servicio de imágenes
La creación y entrega de imágenes se pueden automatizar mediante un servicio comercial como Cloudinary o un equivalente de código abierto, como Thumbor, que instalas y ejecutas por tu cuenta.
Subes tus imágenes de alta resolución y el servicio de imágenes creará y entregará automáticamente diferentes tamaños y formatos de imagen según los parámetros de URL. Por ejemplo, abre esta imagen de muestra en Cloudinary y cambia el valor w o la extensión de archivo en la barra de URL.
Los servicios de imagen también tienen funciones más avanzadas, como la capacidad de automatizar el "recorte inteligente" para diferentes tamaños de imagen y entregar automáticamente imágenes WebP a navegadores que admiten el formato, en lugar de JPEG, sin cambiar la extensión del archivo.
¿Qué pasa si la imagen no se ve bien en los diferentes tamaños?
En ese caso, deberás usar el elemento <picture> para "dirección artística": proporciona un recorte de imagen o imagen diferente en diferentes tamaños. Para obtener más información, consulta el codelab "Dirección artística".
¿Qué ocurre 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 que necesitas para guardar las imágenes. Aquí no entraremos en detalles sangrientos, pero puedes encontrar más información en el codelab "Cómo usar descriptores de densidad".
¿Qué ocurre con el tamaño de visualización 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 en el que se mostrará un elemento de imagen para que este 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á al 50% del ancho del viewport.
<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 ranuras".
¿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á a solo usar el atributo src.
Esto hace que srcset y sizes sean grandes 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. Si deseas obtener una experiencia más guiada, considera probar el curso gratuito "Imágenes responsivas" que ofrece Udacity.