A todos nos pasó: olvidaste reducir la escala de una imagen antes de agregarla a la página. La imagen se ve bien, pero desperdicia los datos de los usuarios y perjudica el rendimiento de la página.
Identifica imágenes con el tamaño incorrecto
Lighthouse facilita la identificación de imágenes cuyo tamaño es incorrecto. Ejecuta la Auditoría de rendimiento (Lighthouse > Options > Performance) y busca los resultados de la auditoría Haz un tamaño adecuado de las imágenes. La auditoría enumera todas las imágenes a las que debas cambiar el tamaño.
Determina el tamaño correcto de la imagen
El tamaño de la imagen puede ser engañosamente complicado. Por esta razón, hemos proporcionado dos enfoques: el "bueno" y el "mejor". Ambos mejorarán el rendimiento, pero el enfoque “mejor” puede llevar un poco más de tiempo en comprenderse e implementarse. Sin embargo, también te recompensará con mejoras de rendimiento más importantes. La mejor opción para ti es aquella que te resulte conveniente implementar.
Una aclaración breve sobre las unidades 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 diseñados con unidades absolutas siempre se mostrarán con el mismo tamaño, independientemente del dispositivo. Ejemplos de unidades de CSS absolutas válidas: px, cm, mm, in.
- Unidades relativas: Los elementos cuyo diseño se establece con unidades relativas se mostrarán en distintos tamaños, según la longitud relativa especificada. Ejemplos de unidades de CSS relativas válidas: %, vw (1vw = 1% del ancho del viewport), em (1.5 em = 1.5 veces el tamaño de la fuente).
El "buen" enfoque
Para imágenes con tamaño basado en...
- Unidades relativas: Cambia el tamaño de la imagen a uno que funcione en todos los dispositivos.
Puede resultarte útil revisar tus datos de Analytics (p.ej., Google Analytics) para ver qué tamaños de visualización usan comúnmente los 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 Herramientas para desarrolladores se puede usar para determinar el tamaño en el que se muestra una imagen.
El enfoque "mejor"
En el caso de imágenes con tamaño absoluto y relativo, usa los atributos srcset y sizes para mostrar imágenes diferentes a distintas densidades de visualización.
Consulta la guía sobre imágenes responsivas.
"Densidad de visualización" se refiere al hecho de que diferentes pantallas tienen diferentes densidades de píxeles. En igualdad de condiciones, una pantalla con una densidad de píxeles alta se verá más nítida que una con una densidad de píxeles baja.
Como resultado, se necesitan varias versiones de imagen si quieres 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 posibilitan esto, ya que te permiten crear una lista de varias versiones de una imagen y que el dispositivo elija la que mejor se adapte a ellas.
Una imagen que funciona en todos los dispositivos será innecesariamente grande para dispositivos más pequeños. Las técnicas de imágenes responsivas, específicamente srcset y los tamaños, te permiten especificar varias versiones de la imagen y que el dispositivo elija el tamaño que mejor se adapte a ellas.
Cambiar el tamaño de las imágenes
Sin importar el enfoque que elijas, puede resultarte útil usar 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 se usa la CLI que con un editor de imágenes basado en 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 cambias 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 Imágenes responsivas.
Especifica dimensiones para evitar los 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 crucial de la minimización de la métrica Cambio de diseño acumulado de una página. Al publicar 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 mueva después de que haya comenzado a consumirlo. Esto puede provocar que los usuarios pierdan su lugar al leer o que "perdan" su objetivo de hit y terminen haciendo clic en algo más que no pensaba mientras se cargaba la página.
Para no proporcionar el ancho y la altura de forma explícita, puedes 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 de la que se proporciona en la imagen, por lo que es probable que desees usar una configuración 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.