La entrega de imágenes del tamaño de una computadora de escritorio a dispositivos móviles puede usar entre 2 y 4 veces más datos que los necesarios. Sigue los lineamientos que se indican en esta página para mejorar la experiencia del usuario mediante la entrega de distintos tamaños de imagen a diferentes dispositivos.
Imágenes responsivas y Métricas web esenciales
Cuando entregas imágenes responsivas, tu página evalúa las capacidades de visualización del dispositivo del usuario y elige una de las opciones de imágenes que son óptimas para mostrarse en función de esos criterios. De esta manera, se ahorran datos para los usuarios, principalmente mediante la entrega de imágenes más pequeñas a dispositivos con pantallas más pequeñas.
Los efectos de una carga más rápida de las imágenes también pueden extenderse al Largest Contentful Paint (LCP) de tu página. Por ejemplo, si el elemento LCP de tu página es una imagen, entregarla de manera responsiva puede reducir el tiempo de carga de los recursos.
Los tiempos de carga de recursos más bajos disminuyen el tiempo de carga de una imagen LCP, lo que mejora la puntuación de LCP de tu página. Un LCP más bajo significa que los usuarios verán que tu sitio se carga más rápido y, en especial, que su contenido más importante (el elemento LCP) se carga más rápido. La entrega de imágenes responsivas también puede reducir la contención del ancho de banda de otros recursos de la página, lo que puede mejorar la velocidad de carga de tu página en general.
Cambiar el tamaño de las imágenes
Dos de las herramientas más populares para cambiar el tamaño de las imágenes son el paquete de npm de Sharp y la herramienta de CLI de ImageMagick.
El paquete Sharp es una buena opción para automatizar el cambio de tamaño de las imágenes (por ejemplo, generar varios tamaños de miniaturas para todos los videos de tu sitio web). Es rápido y se integra bien en las secuencias de comandos de compilación y las herramientas. ImageMagick es más conveniente para cambiar el tamaño de una imagen una sola vez porque se ejecuta completamente desde la línea de comandos.
intenso
Para usar Sharp como secuencia de comandos de Node, guarda este código como una secuencia de comandos independiente en tu proyecto y, luego, ejecútalo para convertir tus imágenes:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
Para cambiar el tamaño de una imagen al 33% de su tamaño original, ejecuta el siguiente comando en la terminal:
convert -resize 33% flower.jpg flower-small.jpg
Para cambiar el tamaño de una imagen a un espacio de 300 px de ancho por 200 px de alto, ejecuta el siguiente comando:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
¿Cuántas versiones de imagen deberías crear?
No hay una única respuesta "correcta" para esta pregunta. Sin embargo, es común entregar entre 3 y 5 tamaños diferentes de una imagen. Entregar más tamaños de imagen es mejor en términos de rendimiento, pero ocupa más espacio en tus servidores y requiere que escribas un poco más de HTML.
Otras opciones
También puedes echar un vistazo a servicios de imagen como Thumbor (de código abierto) y Cloudinary. Ambas son formas sencillas de crear imágenes responsivas que también permiten manipular imágenes a pedido. Para configurar Thumbor, instálalo en tu servidor. Cloudinary se encarga de los detalles por ti y no requiere configuración del servidor.
Publica varias versiones de imagen
Cuando especificas varias versiones de imagen, el navegador elige la mejor para usar:
| Antes | Después |
|---|---|
| <img src="flores-grande.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flor-grande.jpg 1080w" size="50vw"> |
Los atributos src, srcset y sizes de la etiqueta <img> interactúan para lograr este resultado final.
El atributo "src"
El atributo src hace que este código funcione en navegadores que no admiten los atributos srcset y sizes. En esos navegadores, se recurre a la carga del recurso especificado en el atributo src.
El atributo “srcset”
El atributo srcset es una lista separada por comas de nombres de archivo de imagen y sus descriptores de ancho o densidad.
En este ejemplo, se usan descriptores de ancho, que le indican al navegador qué tan ancha es una imagen para que no tenga que descargarla para averiguarlo. 480w es un descriptor de ancho que le indica al navegador que flower-small.jpg tiene 480 px de ancho. 1080w es un descriptor de ancho que le indica al navegador que flower-large.jpg tiene 1,080 px de ancho.
Crédito adicional: No necesitas conocer los descriptores de densidad para publicar diferentes tamaños de imagen. Sin embargo, si quieres saber cómo funcionan los descriptores de densidad, consulta el codelab sobre cambio de resolución. Los descriptores de densidad se usan para entregar imágenes diferentes según la densidad de píxeles del dispositivo.
El atributo "sizes"
El atributo size le indica al navegador el ancho que tendrá la imagen cuando se muestre, aunque no afecta su tamaño de visualización, por lo que necesitarás CSS para eso.
El navegador usa esta información, junto con lo que sabe sobre el dispositivo del usuario (incluidas las dimensiones y la densidad de píxeles), para determinar qué imagen cargar.
Si un navegador no reconoce el atributo "sizes", recurre a la carga de la imagen especificada por el atributo "src". (sizes y srcset se introdujeron al mismo tiempo, por lo que todos los navegadores admiten ambos o ninguno).
Crédito adicional: Si quieres un estilo más sofisticado, también puedes usar el atributo size para especificar varios tamaños de ranuras. Esto se adapta a los sitios web que usan diferentes diseños para diferentes tamaños de viewport. Consulta esta muestra de código de varias ranuras para aprender a hacerlo.
(Aún más) Crédito adicional
Además del crédito adicional que ya se enumera (las imágenes son complejas), también puedes usar estos mismos conceptos para la dirección artística. La dirección artística consiste en entregar imágenes completamente diferentes (en lugar de versiones diferentes de la misma imagen) a diferentes viewports. Puedes obtener más información en el codelab de dirección de arte.
Verificar
Después de implementar imágenes responsivas, puedes usar Lighthouse para asegurarte de que no te hayas perdido ninguna imagen. Ejecuta la auditoría de rendimiento de Lighthouse (Lighthouse > Opciones > Rendimiento) y busca los resultados de la auditoría de Imágenes de tamaño adecuado. En estos resultados, se enumeran las imágenes a las que aún debes cambiar el tamaño.