A todos nos ha pasado: te olvidaste de reducir el tamaño de una imagen antes de agregarla a la página. La imagen se ve bien, pero desperdicia los datos de los usuarios y afecta el rendimiento de la página.
Identifica imágenes con un tamaño incorrecto
Lighthouse facilita la identificación de imágenes con un tamaño incorrecto. Ejecuta la auditoría de rendimiento (Lighthouse > Options > Performance) y busca los resultados de la auditoría Properly size images. La auditoría enumera todas las imágenes que se deben cambiar de tamaño.
Determina el tamaño de imagen correcto
El tamaño de las imágenes puede ser engañosamente complicado. Por este motivo, proporcionamos dos enfoques: el “bueno” y el “mejor”. Ambas mejorarán el rendimiento, pero el enfoque “mejor” puede tardar un poco más en comprenderse y aplicarse. Sin embargo, también te recompensará con mayores mejoras de rendimiento. La mejor opción para ti es la que te resulte más fácil implementar.
Nota breve sobre las unidades de CSS
Existen dos tipos de unidades de CSS para especificar el tamaño de los elementos HTML, incluidas las imágenes:
- Unidades absolutas: Los elementos con diseño de unidades absolutas siempre se mostrarán con el mismo tamaño, independientemente del dispositivo. Ejemplos de unidades CSS absolutas válidas: px, cm, mm, in.
- Unidades relativas: Los elementos con diseño de unidades relativas se mostrarán en tamaños variados, según la longitud relativa especificada. Ejemplos de unidades de CSS relativas válidas: %, vw (1 vw = 1% del ancho de la ventana de visualización), em (1.5 em = 1.5 veces el tamaño de la fuente).
El enfoque "Bueno"
Para imágenes con tamaño basado en lo siguiente:
- Unidades relativas: Cambia el tamaño de la imagen a uno que funcione en todos los dispositivos.
Te recomendamos que revises tus datos de estadísticas (p. ej., Google Analytics) para ver qué tamaños de visualización suelen usar tus usuarios. Como alternativa, screensiz.es proporciona información sobre las pantallas de muchos dispositivos comunes. - Unidades absolutas: Cambia el tamaño de la imagen para que coincida con el tamaño en el que se muestra.
El panel Elements de las Herramientas para desarrolladores se puede usar para determinar el tamaño con el que se muestra una imagen.
El enfoque "mejor"
Para las imágenes con tamaños absolutos y relativos, usa los atributos srcset y sizes para entregar diferentes imágenes a diferentes densidades de pantalla.
Lee la guía sobre imágenes responsivas.
El término "densidad de pantalla" hace referencia al hecho de que las diferentes pantallas tienen diferentes densidades de píxeles. En igualdad de condiciones, una pantalla con alta densidad de píxeles se verá más nítida que una con baja densidad de píxeles.
Como resultado, se necesitan varias versiones de imagen si deseas que los usuarios experimenten las imágenes más nítidas posibles, independientemente de la densidad de píxeles de su dispositivo.
Las técnicas de imágenes responsivas hacen posible esto, ya que te permiten enumerar varias versiones de imágenes y que el dispositivo elija la que mejor funcione para él.
Una imagen que funcione en todos los dispositivos será innecesariamente grande para los dispositivos más pequeños. Las técnicas de imágenes responsivas, en particular srcset y sizes, te permiten especificar varias versiones de imagen y que el dispositivo elija el tamaño que mejor funcione para él.
Cambiar el tamaño de las imágenes
Independientemente del enfoque que elijas, te recomendamos que uses ImageMagick para cambiar el tamaño de tus imágenes. ImageMagick es la herramienta de línea de comandos más popular para crear y editar imágenes. La mayoría de las personas pueden cambiar el tamaño de las imágenes mucho más rápido cuando usan la CLI que un editor de imágenes basado en una GUI.
Cambia el tamaño de la imagen al 25% del tamaño original:
convert flower.jpg -resize 25% flower_small.jpg
Ajustar la imagen para que se ajuste a "200 px de ancho por 100 px de alto":
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Si vas a cambiar el tamaño de muchas imágenes, puede que te resulte más conveniente usar una secuencia de comandos o un servicio para automatizar el proceso. Puedes obtener más información sobre esto en la guía de imágenes responsivas.
Especifica dimensiones para evitar cambios de diseño
Si bien en esta guía se analizan las dimensiones de las imágenes en el contexto de la reducción de la cantidad de bytes descargados innecesarios, es importante tener en cuenta que reservar el espacio correcto para las imágenes en el diseño es otro componente fundamental a la hora de minimizar la métrica de Cambio de diseño acumulado de una página. Cuando publiques imágenes en HTML, asegúrate de usar los atributos width y height adecuados para que el navegador sepa cuánto espacio asignar en el diseño para la imagen:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Sin estos atributos, o el tamaño de CSS equivalente, el navegador no tiene idea de cuánto espacio ocupará la imagen hasta que se cargue. Esto provocará cambios de diseño en el documento, lo que puede ser frustrante para los usuarios cuando el contenido se mueve después de que comenzaron a consumirlo. Esto puede provocar que los usuarios pierdan su lugar de lectura o que "pierdan" el objetivo de hit deseado y terminen haciendo clic en algo que no querían durante la carga de la página.
Una alternativa a proporcionar el ancho y la altura de forma explícita es usar la propiedad aspect-ratio de CSS en la imagen. Esto tiene un efecto similar en el tamaño de un elemento que los atributos width y height en el sentido de que el contenedor mantendrá una relación de aspecto coherente. Sin embargo, la diferencia es que esto puede provocar que se use una relación de aspecto diferente a la que se proporciona en la imagen, por lo que es probable que desees usar una configuración de object-fit para asegurarte de que la imagen no se distorsione en esta vista explícita de 16/9:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Verificar
Una vez que hayas cambiado el tamaño de todas tus imágenes, vuelve a ejecutar Lighthouse para verificar que no te hayas perdido nada.