La entrega de imágenes del tamaño de una computadora de escritorio a dispositivos móviles puede usar de 2 a 4 veces más datos de los necesarios. Sigue los lineamientos de esta página para mejorar la experiencia del usuario a través de la publicación de diferentes tamaños de imagen en diferentes dispositivos.
Imágenes responsivas y Métricas web esenciales
Cuando publicas imágenes responsivas, tu página evalúa las capacidades de visualización del dispositivo del usuario y elige una de un conjunto de imágenes candidatas que son óptimas para la visualización en función de esos criterios. Esto ahorra datos para los usuarios, principalmente, porque se entregan imágenes más pequeñas a los dispositivos con pantallas más pequeñas.
Los efectos de una carga de imágenes más rápida también se pueden extender al Procesamiento de imagen con contenido más grande (LCP) de tu página. Por ejemplo, si el elemento LCP de tu página es una imagen, publicarla de forma responsiva puede reducir su duración de carga de recursos.
Las duraciones de carga de recursos más bajas reducen el tiempo de carga de una imagen de LCP, lo que mejora el puntaje 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 carga su contenido más importante (el elemento LCP) más rápido. La publicación de imágenes responsivas también puede reducir la contención de ancho de banda para otros recursos de la página, lo que puede mejorar la velocidad de carga de la página en general.
Cambiar el tamaño de las imágenes
Dos de las herramientas de cambio de tamaño de imagen más populares son el paquete npm 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 miniaturas de varios tamaños para todos los videos de tu sitio web). Es rápido y se integra bien con las herramientas y secuencias de comandos de compilación. ImageMagick es más conveniente para cambiar el tamaño de una imagen de forma única, ya que se ejecuta por completo desde la línea de comandos.
intenso
Para usar sharp como una secuencia de comandos de Node, guarda este código como una secuencia de comandos independiente en tu proyecto y, luego, ejecútala 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 para que se ajuste 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 la imagen deberías crear?
No hay una sola respuesta “correcta” a esta pregunta. Sin embargo, es habitual publicar entre 3 y 5 tamaños diferentes de una imagen. Publicar más tamaños de imagen es mejor para el rendimiento, pero ocupa más espacio en tus servidores y requiere que escribas un poco más de código HTML.
Otras opciones
También vale la pena consultar los servicios de imágenes, como Thumbor (código abierto) y Cloudinary. Ambas son formas sencillas de crear imágenes responsivas que también proporcionan manipulación de imagen a pedido. Para configurar Thumbor, instálalo en tu servidor. Cloudinary se encarga de los detalles por ti y no requiere configuración de servidores.
Publica varias versiones de imágenes
Cuando especificas varias versiones de imagen, el navegador elige la mejor para usar:
| Antes | Después |
|---|---|
| <img src="flor-grande.jpg"> | <img src="flor-grande.jpg" srcset="flor-pequeña.jpg 480w, flor-grande.jpg 1080w" sizes="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. Esos navegadores recurren 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 archivos 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 extra: No necesitas conocer los descriptores de densidad para entregar diferentes tamaños de imagen. Sin embargo, si te interesa saber cómo funcionan los descriptores de densidad, consulta el lab de código de cambio de resolución. Los descriptores de densidad se usan para entregar diferentes imágenes según la densidad de píxeles del dispositivo.
El atributo "sizes"
El atributo sizes le indica al navegador qué tan ancha será la imagen cuando se muestre, aunque no afecta el tamaño de visualización de la imagen, por lo que aún necesitas CSS para eso.
El navegador usa esta información, junto con lo que sabe sobre el dispositivo del usuario (incluidas sus dimensiones y densidad de píxeles), para determinar qué imagen cargar.
Si un navegador no reconoce el atributo "sizes", recurre a cargar la imagen especificada por el atributo "src". (sizes y srcset se introdujeron al mismo tiempo, por lo que todos los navegadores admiten ambos atributos o ninguno).
Crédito extra: Si quieres ser más sofisticado, también puedes usar el atributo de tamaños 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 varios segmentos para aprender a hacerlo.
(Incluso más) Crédito extra
Además de todo el crédito adicional que ya se mencionó (las imágenes son complejas), también puedes usar estos mismos conceptos para la dirección de arte. La dirección de arte es la práctica de publicar imágenes de aspecto completamente diferente (en lugar de diferentes versiones de la misma imagen) en diferentes viewports. Puedes obtener más información en el codelab de dirección de arte.
Verificar
Después de implementar las imágenes responsivas, puedes usar Lighthouse para asegurarte de que no te hayas perdido ninguna. Ejecuta la auditoría de rendimiento de Lighthouse (Lighthouse > Options > Performance) y busca los resultados de la auditoría Properly size images. En estos resultados, se enumeran las imágenes que aún debes cambiar de tamaño.