A todos nos pasa que olvidamos 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.
Cómo identificar 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 > Opciones > Rendimiento) y busca los resultados de la auditoría Imágenes con tamaño adecuado. En la auditoría, se enumeran las imágenes a las que se debe cambiar el tamaño.
Cómo determinar el tamaño correcto de la imagen
El tamaño de la imagen puede ser engañosamente complicado. Por este motivo, proporcionamos dos enfoques: el "bueno" y el "mejor". Ambos 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 sientas cómodo implementando.
Una aclaración 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 estilo que usan 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 con estilo que usan unidades relativas se mostrarán con tamaños variables, según la longitud relativa especificada. Ejemplos de unidades de CSS relativas válidas: %, vw (1vw = 1% del ancho de la ventana gráfica), em (1.5 em = 1.5 veces el tamaño de la fuente).
El enfoque "bueno"
Para imágenes con tamaño basado en…
- Unidades relativas: Cambia el tamaño de la imagen a un tamaño que funcione en todos los dispositivos.
Te puede resultar útil consultar tus datos de estadísticas (p.ej., Google Analytics) para ver qué tamaños de pantalla son de uso frecuente por 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.
Se puede usar el panel Elementos de DevTools para determinar el tamaño en el que se muestra una imagen.
El enfoque "mejor"
Para las imágenes con tamaño absoluto y relativo, usa srcset
y sizes
atributos para mostrar diferentes imágenes en diferentes densidades de pantalla.
Lee la guía sobre imágenes responsivas.
"Densidad de pantalla" se refiere al hecho de que las diferentes pantallas tienen diferentes densidades de píxeles. Si todo lo demás es igual, una pantalla de alta densidad de píxeles se verá más nítida que una pantalla de baja densidad de píxeles.
Como resultado, se necesitan varias versiones de la 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 lo hacen posible, ya que te permiten enumerar varias versiones de la imagen y que el dispositivo elija la imagen que mejor le funcione.
Una imagen que funciona en todos los dispositivos será innecesariamente grande para los dispositivos más pequeños. Las técnicas de imágenes responsivas, específicamente srcset y sizes, te permiten especificar varias versiones de la imagen y que el dispositivo elija el tamaño que mejor le funcione.
Cómo cambiar el tamaño de las imágenes
Independientemente del enfoque que elijas, te puede resultar ú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 usan la CLI que 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
Ajusta la escala de la imagen para que quepa en "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, te resultará más conveniente usar una secuencia de comandos o un servicio para automatizar el proceso. Puedes obtener más información al respecto en la guía de imágenes responsivas.
Cómo evitar cambios de diseño especificando dimensiones
Si bien en esta guía se analizan las dimensiones de las imágenes en el contexto de reducir la cantidad de bytes innecesarios descargados, es importante tener en cuenta que reservar el espacio correcto para las imágenes en el diseño es otro componente fundamental para minimizar la métrica de Cumulative Layout Shift de una página. Cuando muestres 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 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 generar frustración en los usuarios cuando el contenido se mueve después de que comienzan a consumirlo. Esto puede hacer que los usuarios pierdan su lugar cuando leen o que "pierdan" el objetivo de destino previsto y terminen haciendo clic en otra cosa que no querían durante la carga de la página.
Una alternativa para 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 generar 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 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 las imágenes, vuelve a ejecutar Lighthouse para verificar que no te hayas perdido nada.