En la sección Opportunities de tu informe de Lighthouse, se enumeran todas las imágenes de tu página que no tienen el tamaño adecuado, junto con el posible ahorro en kibibytes (KiB). Cambia el tamaño de estas imágenes para ahorrar datos y mejorar el tiempo de carga de la página:

Cómo calcula Lighthouse las imágenes demasiado grandes
Para cada imagen de la página, Lighthouse compara el tamaño de la imagen renderizada con el tamaño de la imagen real. El tamaño renderizado también tiene en cuenta la proporción de píxeles del dispositivo. Si el tamaño renderizado es al menos 4 KiB más pequeño que el tamaño real, la imagen no pasa la auditoría.
Estrategias para ajustar el tamaño de las imágenes de forma adecuada
Idealmente, tu página nunca debería publicar imágenes que sean más grandes que la versión renderizada en la pantalla del usuario. Cualquier valor mayor solo genera bytes desperdiciados y ralentiza el tiempo de carga de la página.
La estrategia principal para publicar imágenes con el tamaño adecuado se denomina "imágenes responsivas". Con las imágenes responsivas, generas varias versiones de cada imagen y, luego, especificas qué versión usar en tu código HTML o CSS con consultas de medios, dimensiones de viewport, etcétera. Además, RespImageLint es un bookmarklet útil para identificar los valores óptimos de srcset
y sizes
para tus imágenes. Consulta Cómo publicar imágenes responsivas para obtener más información sobre estos atributos.
Las CDN de imágenes son otra estrategia principal para publicar imágenes con el tamaño adecuado. Puedes considerar las CDN de imágenes como APIs de servicios web para transformar imágenes.
Otra estrategia es usar formatos de imagen basados en vectores, como SVG. Con una cantidad finita de código, una imagen SVG se puede escalar a cualquier tamaño. Consulta Cómo reemplazar íconos complejos por SVG para obtener más información.
Las herramientas como gulp-responsive o responsive-images-generator pueden ayudar a automatizar el proceso de convertir una imagen en varios formatos. También existen CDN de imágenes que te permiten generar varias versiones, ya sea cuando subes una imagen o cuando la solicitas desde tu página.
Orientación específica para la pila
AMP
Usa la compatibilidad del componente amp-img
con srcset
para especificar qué recursos de imagen usar según el tamaño de la pantalla. Consulta también Imágenes responsivas con srcset, tamaños y alturas.
Angular
Se recomienda usar la utilidad de BreakpointObserver
en el kit de desarrollo de componentes (CDK) para administrar las interrupciones de imágenes.
Drupal
Asegúrate de usar los estilos de imágenes responsivas que proporciona Drupal
. Utiliza los estilos de imágenes responsivas cuando renderices campos de imágenes a través de modos de vista, vistas o imágenes subidas a través del editor WYSIWYG.
Gatsby
Usa el complemento gatsby-image para generar varias imágenes más pequeñas para smartphones y tablets. También puede crear marcadores de posición de imágenes SVG para una carga diferida eficiente.
Joomla
Considera usar un complemento de imágenes responsivas.
WordPress
Carga imágenes directamente a través de la biblioteca de medios para garantizar que estén disponibles los tamaños de imagen requeridos y, luego, insértalas desde la biblioteca de medios o usa el widget de imágenes para asegurarte de que se utilicen los tamaños de imagen óptimos (incluidos los que se emplean para interrupciones receptivas). Evita usar imágenes Full Size
, a menos que las dimensiones sean adecuadas para su empleo. Consulta Cómo insertar imágenes en publicaciones y páginas.