Publicado: 8 de octubre de 2025
Reducir el tiempo de descarga de las imágenes puede mejorar el tiempo de carga percibido de la página y el LCP.
Cómo falla la estadística
La estadística destacará las imágenes que tienen tamaños de descarga innecesariamente grandes. El ahorro estimado en bytes se calcula comparando el tamaño de descarga de la imagen con una relación eficiente de bytes por píxel para el formato de imagen.
Cómo mejorar el tiempo de descarga de imágenes
Esta estadística ofrece varias estrategias para mejorar el tiempo de descarga de la imagen según el tamaño que se muestra y el formato de archivo de la imagen. Implementar una CDN de imágenes puede ser muy útil para todas estas estrategias.
Aumentar el factor de compresión de la imagen
La mayoría de los formatos de imagen admiten un nivel de compresión que se puede ajustar para mejorar el tamaño del archivo de imagen a costa de la calidad de la imagen. Puedes usar herramientas de imágenes, como ImageOptim, Squoosh y Imagemin, para optimizar el factor de compresión de la imagen.
Usa formatos de imagen modernos
AVIF y WebP son formatos de imagen que tienen características de compresión y calidad superiores en comparación con sus contrapartes más antiguas JPEG y PNG. Codificar tus imágenes en estos formatos más nuevos es una buena estrategia para reducir el tamaño de descarga de las imágenes.
AVIF es compatible con la versión más reciente de todos los navegadores principales y ofrece tamaños de archivo más pequeños en comparación con otros formatos con los mismos parámetros de configuración de calidad. Consulta el Codelab sobre cómo publicar imágenes AVIF para obtener más información sobre AVIF.
WebP es compatible con todos los navegadores principales y proporciona una mejor compresión con y sin pérdida para las imágenes en la Web. Consulta Cómo usar imágenes WebP para obtener más información sobre WebP.
Usa formatos de video para incluir contenido animado
Los GIF de gran tamaño no son eficientes para mostrar contenido animado en comparación con los videos. En su lugar, te recomendamos utilizar formatos de video MPEG4/WebM para animaciones y formatos PNG/WebP para imágenes estáticas a fin de ahorrar bytes de la red.
Consulta Cómo reemplazar los GIFs animados por videos para que las páginas se carguen más rápido para obtener información sobre cómo reemplazar las imágenes GIF por videos.
Publica imágenes con tamaño responsivo
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.
Una 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.
Si las imágenes basadas en vectores no son una opción, lo mejor es publicar imágenes "adaptables". 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.
Por ejemplo, el elemento <img> tiene atributos srcset y sizes que pueden especificar URLs de imágenes para diferentes tamaños:
Si necesitas cambiar la imagen por completo, puedes usar el elemento <picture>:
Consulta Imágenes responsivas y El elemento picture para obtener más información.
Orientación específica para la pila
Esta estadística también ofrece orientación específica para la pila de páginas que usan las siguientes tecnologías:
AMP
- Cuando especifiques un resguardo adecuado para otros navegadores, se recomienda mostrar todos los componentes de
amp-imgen formato WebP. - En el caso de contenido animado, utiliza
amp-animpara minimizar el uso de CPU mientras el contenido no aparezca en pantalla.
Drupal
- Se recomienda usar un módulo que optimice y reduzca de forma automática el tamaño de las imágenes que se cargan en el sitio y conserve la calidad.
- Asegúrate de usar los estilos de imágenes responsivas integrados que proporciona Drupal para todas las imágenes renderizadas en el sitio.
Joomla
Puedes utilizar un complemento o servicio que convierta automáticamente las imágenes que subes a los formatos óptimos.
Magento
Considera usar una extensión de Magento de terceros que optimice las imágenes.
WordPress
Puedes usar un complemento de optimización de imágenes de WordPress que comprima tus imágenes y conserve la calidad.