Ejecutar Lighthouse
Esta falla es lo suficientemente pequeña como para que sus imágenes se puedan inspeccionar de forma manual. Sin embargo, para la mayoría de los sitios web, es esencial usar una herramienta como Lighthouse para automatizar este proceso.
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
. - Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
- Haz clic en la pestaña Lighthouse.
- Asegúrate de que la casilla de verificación Rendimiento esté seleccionada en la lista Categorías.
- Haz clic en el botón Generar informe.
- Busca los resultados de la auditoría Tamaño correcto de las imágenes.
La auditoría de Lighthouse muestra que se debe cambiar el tamaño de las dos imágenes de esta página.
Corregir flower_logo.png
Comienza en la parte superior de la página y corrige la imagen del logotipo.
- Inspecciona
flower_logo.pngen el panel Elements de Herramientas para desarrolladores.
Este es el CSS de flower_logo.png:
.logo {
width: 50px;
height: 50px;
}
El ancho de CSS de esta imagen es de 50 píxeles, por lo que se debe cambiar el tamaño de flower_logo.png para que coincida. Puedes usar ImageMagick para cambiar el tamaño de la imagen. ImageMagick es una herramienta de CLI para editar imágenes que viene preinstalada en el entorno del codelab.
- Haz clic en Remix to Edit para que el proyecto sea editable.
- Haz clic en Terminal. (Nota: Si no aparece el botón Terminal, es posible que debas usar la opción Pantalla completa).
- En la consola, escribe lo siguiente:
convert flower_logo.png -resize 50x50 flower_logo.png
Corrige flower_photo.jpg
A continuación, corrige la foto de las flores violetas.
- Inspecciona
flower_photo.jpgen el panel de elementos de Herramientas para desarrolladores.
Este es el CSS de flower_photo.jpg:
.photo {
width: 50vw;
margin: 30px auto;
border: 1px solid black;
}
50vw establece el ancho de CSS de flower_photo.jpg en "la mitad del ancho del navegador".
(1vw es igual al 1% del ancho del navegador).
El tamaño ideal de esta imagen depende del dispositivo en el que se vea, por lo que debes cambiar el tamaño a uno que funcione bien para la mayoría de los usuarios. Puedes revisar tus datos de estadísticas para conocer las resoluciones de pantalla comunes entre tus usuarios:
Estos datos indican que más del 95%de los visitantes del sitio usan resoluciones de pantalla de 1,920 píxeles de ancho o menos.
Con esta información, podemos calcular el ancho de la imagen: (1920 píxeles de ancho) * (50% del ancho del navegador) = 960 píxeles
En resoluciones superiores a 1920 píxeles de ancho, la imagen se estirará para cubrir el área. La imagen redimensionada sigue siendo bastante grande, por lo que sus efectos no deberían ser muy perceptibles.
- Usa ImageMagick para cambiar el tamaño de la imagen a 960 píxeles de ancho. En el tipo de terminal:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg
# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg
Volver a ejecutar Lighthouse
- Vuelve a ejecutar la auditoría de rendimiento de Lighthouse para verificar que cambiaste el tamaño de las imágenes correctamente.
¡Y falla! ¿Por qué pasa eso?
Lighthouse ejecuta sus pruebas en un Nexus 5x. El Nexus 5x tiene una pantalla de 1080 x 1920.
En el caso del Nexus 5x, el tamaño óptimo de flower_photo.jpg sería de 540 píxeles de ancho (1,080 píxeles * . 5). Esto es mucho más pequeño que la imagen redimensionada.
¿Deberías cambiar el tamaño de la imagen para que sea aún más pequeña? Probablemente. Sin embargo, la respuesta no siempre es clara.
La relación es entre la calidad de la imagen en dispositivos de alta resolución y el rendimiento. Es fácil sobreestimar la precisión con la que los usuarios inspeccionarán las imágenes, por lo que probablemente deberías hacerlas más pequeñas, pero sin duda hay casos de uso en los que la calidad de la imagen es más importante.
La buena noticia es que puedes omitir esta compensación por completo usando imágenes responsivas para entregar varios tamaños de imagen. Puedes obtener más información sobre este tema en la guía sobre imágenes responsivas.