Usa el tamaño adecuado para las imágenes

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). Cambie el tamaño de estas imágenes para ahorrar datos y mejorar el tiempo de carga de la página:

Captura de pantalla de la auditoría de imágenes de Lighthouse con el tamaño adecuado

Cómo Lighthouse calcula 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 considera 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 dimensionar correctamente las imágenes

Idealmente, tu página nunca debería publicar imágenes más grandes que la versión que se renderiza en la pantalla del usuario. Cualquier elemento más grande que eso solo da como resultado bytes desperdiciados y ralentiza 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 HTML o CSS mediante consultas de medios, las dimensiones de viewport, etcétera. Además, RespImageLint es un marcador útil para identificar los valores óptimos de srcset y sizes para tus imágenes. Consulta Entrega 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 pensar en las CDN de imágenes como las APIs de servicio web para transformar imágenes.

Otra estrategia es usar formatos de imagen basados en vectores, como SVG. Con una cantidad limitada 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 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 cuando la solicitas desde tu página.

Orientación específica para pilas

AMP

Usa la compatibilidad del componente amp-img con srcset para especificar los recursos de imagen que se usarán 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

Usa la función integrada de estilos de imágenes responsivas (disponible en Drupal 8 y versiones posteriores) cuando renderices campos de imágenes a través de modos de vista, vistas o imágenes subidas con el editor WYSIWYG.

Gatsby

Usa el complemento gatsby-image a fin de 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 contenido multimedia para asegurarte de que los tamaños de imagen requeridos estén disponibles y, luego, insértalas desde la biblioteca o usa el widget de imágenes para asegurarte de que se usen los tamaños óptimos de imagen (incluidos los para las 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 entradas y páginas.

Recursos