A todos nos pasó alguna vez: te olvidaste de reducir la escala de una imagen antes de agregarla a la . La imagen se ve bien, pero desperdicia los recursos de página afectada rendimiento.
Identificar imágenes con tamaños incorrectos
Lighthouse facilita la identificación de imágenes con tamaños incorrectos. Ejecuta el Auditoría de rendimiento (Lighthouse > Opciones > Rendimiento) y busca resultados de la auditoría Tamaño adecuado de las imágenes. La auditoría enumera las imágenes que 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 esta razón, proporcionamos dos enfoques: lo "bueno" y "mejor". Ambas mejorarán el rendimiento, pero "mejor" puede tardar un poco más en entenderse e implementarse. Sin embargo, también lo recompensará con mejoras de rendimiento más importantes. La mejor opción para tú te sientes cómodo con la implementación.
Nota breve sobre las unidades de CSS
Existen dos tipos de unidades CSS para especificar el tamaño de los elementos HTML. incluidas las imágenes:
- Unidades absolutas: los elementos cuyo estilo se usa con unidades absolutas siempre serán se muestren en el mismo tamaño, independientemente del dispositivo. Ejemplos de conversiones válidas, unidades de CSS absolutas: px, cm, mm, in.
- Unidades relativas: los elementos cuyo diseño se ajuste mediante unidades relativas se mostrarán en diferentes 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).
Lo bueno Enfoque
Para imágenes con tamaños basados en...
- Unidades relativas: Cambia el tamaño de la imagen a un tamaño que se adapte a todos los dispositivos.
Puede resultarte útil revisar tus datos de estadísticas (p.ej., Google Analytics) para ver qué tamaños de visualización suelen usar 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 de una imagen. donde se muestran los datos.
La frase "mejor" enfoque
Para imágenes con tamaño absoluto y relativo, usa srcset.
y sizes
para mostrar diferentes imágenes en distintas densidades de pantalla.
Lee la guía sobre imágenes responsivas.
"Densidad de visualización" se refiere al hecho de que las diferentes pantallas tienen diferentes densidades de píxeles. Si todo lo demás permanece constante, una alta densidad de píxeles pantalla se verá más nítida que una de baja densidad de píxeles.
Por eso, se necesitan varias versiones de imágenes si deseas que los usuarios experimentan las imágenes más nítidas posibles, independientemente de la densidad de píxeles su dispositivo.
Las técnicas de imagen responsivas hacen esto posible porque te permiten enumerar varias versiones de imágenes y para que el dispositivo elija la imagen que funciona mejor para él.
Una imagen que funcione en todos los dispositivos será innecesariamente grande para dispositivos más pequeños. Técnicas de imagen responsiva, específicamente srcset y tamaños, te permiten especificar varias versiones de imágenes y que el dispositivo elija el tamaño que mejor se adapte a él.
Cambiar el tamaño de las imágenes
Independientemente del enfoque que elijas, puede resultarte útil usar ImageMagick para cambiar el tamaño de tus imágenes. ImageMagick es el canal más popular. de línea de comandos para crear y editar imágenes. La mayoría de las personas puede cambiar el tamaño de las imágenes mucho más rápido cuando se usa la CLI que un editor de imágenes basado en GUI.
Cambiar el tamaño de la imagen al 25% del 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 un secuencia de comandos o servicio para automatizar el proceso. Puedes obtener más información sobre este tema en la Guía de 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 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 al diseño de la imagen:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Sin estos atributos, o el tamaño equivalente de CSS, 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 resultar frustrante para los usuarios cuando el contenido se mueve después de que comienzan a consumirlo. Esto puede hacer que los usuarios pierdan su lugar cuando lean o se pierdan el objetivo del hit deseado y hacen clic en otro elemento no previsto 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 al que hacen 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 probablemente te convenga usar un parámetro de 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
Cuando hayas cambiado el tamaño de todas tus imágenes, vuelve a ejecutar Lighthouse para verificar que no lo hiciste. no perderte nada.