En la sección Oportunidades de tu informe de Lighthouse, se enumeran todas las imágenes de tu página que no tienen el tamaño adecuado, junto con los posibles ahorros 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 de gran tamaño
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 relación de píxeles del dispositivo. Si el tamaño renderizado es, al menos, 4 KiB menor que el tamaño real, la imagen no aprobará la auditoría.
Estrategias para que el tamaño de las imágenes sea el adecuado
Lo ideal es que tu página nunca entregue imágenes que sean más grandes que la versión que se renderiza en la pantalla del usuario. Los archivos de mayor tamaño solo generan desperdicio de bytes y ralentizan el tiempo de carga de la página.
La estrategia principal para publicar imágenes del 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 mediante consultas de medios, dimensiones del viewport, etcétera. Además, RespImageLint es unbookmarklet útil para identificar los valores srcset y sizes óptimos para tus imágenes. Consulta Publica imágenes responsivas para obtener más información sobre estos atributos.
Las CDN de imágenes son otra estrategia principal para entregar imágenes de tamaño adecuado. Puedes considerar a 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 puede escalarse a cualquier tamaño. Consulta Reemplaza í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 conversión de una imagen a varios formatos. También hay CDN de imágenes que te permiten generar varias versiones, ya sea cuando subes una imagen o la solicitas desde tu página.
Orientación específica de la pila
AMP
Usa la compatibilidad del componente amp-img con srcset para especificar qué recursos de imagen se deben usar en función del tamaño de la pantalla. Consulta también Imágenes responsivas con srcset, tamaños y alturas.
Angular
Considera usar la utilidad 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 nativos 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 imagen SVG para una carga diferida eficiente.
Joomla
Considera usar un complemento de imágenes responsivas.
WordPress
Sube 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 bien 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 responsivas). Evita usar imágenes Full Size, a menos que las dimensiones sean adecuadas para su uso. Consulta Cómo insertar imágenes en publicaciones y páginas.