Usa srcset para elegir automáticamente el tamaño de imagen correcto.
Según HTTP Archive, un página web típica para dispositivos móviles pesa más de 2, 6 MB y más de dos tercios de eso el peso de las imágenes. Es una gran oportunidad para la optimización.
Resumen
- No guardes imágenes que superen su tamaño de visualización.
- Guarde varios tamaños para cada imagen y utilice la
srcsetpara 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="…">
Guarda imágenes con el tamaño adecuado
Puedes hacer que tu sitio web sea más rápido y requiera menos datos si usas imágenes con dimensiones que coincidan con el tamaño de visualización. En otras palabras, ofrece a las imágenes ancho y alto cuando los guardas.
Echa un vistazo a 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 es mucho más grande en tamaño de archivo porque se guarda con dimensiones mucho más grande que el tamaño de visualización. Ambas imágenes se muestran con una imagen un ancho de 300 píxeles, por lo que tiene sentido usar una imagen guardada en el mismo de tamaño del ensamble.
Para anchos fijos, use imágenes guardadas con las mismas dimensiones que la el tamaño de visualización.
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.
Los elementos de imagen pueden tener un ancho porcentual o ser parte de diseños responsivos en el 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 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?, entonces permitir que el navegador elija el mejor tamaño para el dispositivo y la pantalla? Lamentablemente, hay una catch-22 cuando se trata de determinar cuál es la mejor imagen. El navegador debe usar la menor cantidad posible pero no puede saber el ancho de una imagen sin descargarla para verificarla.
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 de w muestran el ancho de cada imagen en píxeles. Por ejemplo:
small.jpg 500w indica al navegador que small.jpg es 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 comprobar su tamaño.
Puedes ver srcset en acción para 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, usa el panel Network de las herramientas de tu navegador para verificar qué imagen se usó.
(Tendrás que 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?
Debes establecer varios tamaños disponibles para cada imagen que quieras usar.
con srcset.
En el caso de las imágenes únicas, como las hero image, puedes guardar manualmente distintos tamaños. Si tienes muchas imágenes, como fotos de productos, que debes automatizar. Para eso, 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 imágenes de diferentes tamaños versiones de tus imágenes. Consulta "Cómo usar Imagemin para comprimir imágenes". para obtener más información.
Usa un servicio de imágenes
La creación y publicación 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.
Tú subes las imágenes de alta resolución, y el servicio de imágenes se crea automáticamente
Crea y publica diferentes formatos y tamaños de imagen en función de la URL.
parámetros. Por ejemplo, abre esta imagen de muestra en Cloudinary y, luego, intenta cambiar el valor w o la extensión del archivo en la barra de URL.
Los servicios de imagen también tienen funciones más avanzadas, como la capacidad de automatizar “recorte inteligente” para diferentes tamaños de imagen y publicar imágenes WebP automáticamente a navegadores que admitan el formato, en lugar de JPEG, sin cambiar el archivo .
¿Qué sucede si la imagen no se ve bien en distintos tamaños?
En ese caso, deberás usar el elemento <picture> para "dirección artística":
proporcionar una imagen o un recorte de imagen diferentes en tamaños diferentes. 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 un teléfono de alta gama podría tener el doble o el triple de píxeles píxeles como un dispositivo más económico.
Esto puede afectar el tamaño que necesitas para guardar tus imágenes. No entraremos en la sangre detalles, pero puedes obtener más información en la Codelab "Usa 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 utiliza todo el ancho del viewport cuando elige una
de un elemento srcset. El atributo sizes le indica al navegador el ancho que un
un elemento de imagen, para que el navegador elija la menor
de imagen, antes de realizar los cálculos de diseño.
En el siguiente ejemplo, sizes="50vw" le indica al navegador que esta imagen será
se muestra en el 50% del ancho de la 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 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
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 excelentes mejoras progresivas.
Más información
Consulta la sección "Optimiza tus imágenes" de web.dev para profundizar en la optimización de imágenes. Si deseas ver una guía del usuario, considere probar la versión gratuita " Imágenes” que ofrece Udacity.