Entregar 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 según tus necesidades. Sigue los lineamientos de esta página para mejorar la experiencia del usuario con distintos tamaños de imagen para distintos 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 elegir una de las opciones de imágenes que se óptimo para la visualización en función de esos criterios. Esto permite ahorrar datos para tus usuarios, principalmente entregando imágenes más pequeñas a dispositivos con pantallas más pequeñas.
Los efectos de una carga más rápida también pueden extenderse a la carga Largest Contentful Paint (LCP). Por ejemplo, si la página Un elemento LCP es una imagen, que se entrega puede reducir la 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 la puntuación de LCP de la página. Un LCP más bajo implica que los usuarios verán que tu sitio se carga más rápido. sobre todo porque carga su contenido más importante (el elemento LCP) más rápido. La entrega 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 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 imágenes son el paquete nitidez npm y la herramienta de la 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). Integra es rápido y se integra bien con las secuencias de comandos de compilación y las herramientas. ImageMagick es más conveniente para cambiar el tamaño de una imagen por única vez porque se ejecuta completamente desde el comando línea.
intenso
Para usar Sharp como una secuencia de comandos de Node, guarde este código como una secuencia de comandos separada en su y 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 tu 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 la 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 sola palabra “correcta” respuesta a esta pregunta. Sin embargo, es común mostrar de 3 a 5 tamaños diferentes de una imagen. Publicar más tamaños de imagen es mejor para rendimiento, pero ocupa más espacio en los servidores y requiere que escribas un poco más de HTML.
Otras opciones
Servicios de imagen, como Thumbor (código abierto) y Cloudinary. Ambos son y sencillos para crear imágenes responsivas que también proporcionen contenido la manipulación a pedido. Para configurar Thumbor, instálalo en tu servidor. Cloudinario se encarga de los detalles por ti y no requiere configuración de servidor.
Entrega varias versiones de imágenes
Cuando especificas varias versiones de imágenes, el navegador elige la mejor usa:
| Antes | Después |
|---|---|
| <img src="flower-large.jpg"> | <img src="flor-grande.jpg" srcset="flower-small.jpg 480w, flor-grande.jpg 1080w" size="50vw"> |
La etiqueta <img>
src,
srcset,
y sizes
y atributos interactúan para lograr
este resultado final.
El “src” atributo
El atributo src hace que este código funcione en navegadores que no lo hacen.
admitir srcset y sizes.
atributos. Esos navegadores recurren a la carga del recurso especificado en el archivo
atributo src.
El comando “srcset” atributo
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 usa
descriptores de ancho
que le indican al navegador qué tan ancha es una imagen para que no tenga que descargar la
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 1080 px de ancho.
Crédito adicional: No necesitas saber sobre los descriptores de densidad para entregar diferentes tamaños de imagen. Sin embargo, si quieres saber cómo funcionan los descriptores de densidad, consulta la Codelab de Resolution Switching. Los descriptores de densidad se usan para entregar imágenes diferentes densidad de píxeles.
Los "tamaños" atributo
El atributo de tamaños le indica al navegador el ancho de la imagen cuando se sin afectar el tamaño de visualización de la imagen, así que necesitas CSS.
El navegador utiliza esta información, junto con lo que sabe acerca de la dispositivo (incluidas sus dimensiones y densidad de píxeles), para determinar qué imagen de carga de trabajo.
Si un navegador no reconoce el "sizes" recurre a
cargando la imagen especificada por "src" . (sizes y srcset
se introdujeron al mismo tiempo, de modo que todos los navegadores admiten
atributos o ninguno).
Crédito adicional: Si desea un estilo más elaborado, también puede usar el atributo de tamaños para especificar varios tamaños de ranuras. Esto se adapta a los sitios web que utilizan diferentes diseños para diferentes tamaños de viewport. Consulta esta muestra de código de varias ranuras. para aprender a hacerlo.
Crédito extra (incluso más)
Además de todo el crédito extra ya mencionado (las imágenes son complejas), puedes también puedes usar estos mismos conceptos para dirección artística. La dirección artística es la práctica de publicar imágenes de aspecto completamente diferente. (en lugar de diferentes versiones de la misma imagen) a diferentes viewports. Tú puedes obtener más información en el lab de código de Art Directions.
Verificar
Después de implementar imágenes responsivas, puedes usar Lighthouse para asegurarte de no se perdió ninguna imagen. Ejecuta la auditoría de rendimiento de Lighthouse (Lighthouse > Opciones > Rendimiento) y busca los resultados de la Realiza una auditoría de Tamaños adecuados de imágenes. En estos resultados, se enumeran las imágenes que aún necesitas cambiar el tamaño.