Cómo corregir «Mejorar la entrega de imágenes» en PageSpeed Insights

1. 01Abre la página afectada en PageSpeed Insights o Lighthouse. Elige el informe móvil o de escritorio, despliega «Mejorar la entrega de imágenes» y apunta la URL señalada y el cambio sugerido.
2. 02Localiza esa imagen en la página. En las herramientas del navegador, compara el archivo descargado con sus dimensiones mostradas, considerando la densidad de pantalla. Revisa la fuente elegida, no solo el original de la biblioteca.
3. 03Si la imagen entregada tiene demasiados píxeles, corrige primero los tamaños adaptables o el tema. Si encajan, compara la compresión o un formato alternativo admitido.
4. 04Prepara una copia con las dimensiones necesarias en un editor. Usa el compresor Bitinz con archivos adecuados y revisa textos, bordes, transparencias y degradados antes de sustituirlos.
5. 05Publica la imagen nueva o el cambio de plantilla. Confirma que se solicita la nueva versión y no una copia antigua en caché, y repite el informe con el mismo dispositivo.

Chrome calcula el ahorro según el peso descargado y una proporción eficiente de bytes por píxel para ese formato. No señala imágenes con ahorro estimado inferior a 4 KiB. Es un umbral del informe, no un tamaño máximo recomendado.

Lighthouse 13 sustituyó las auditorías anteriores por esta información; Lighthouse 12 ya la mostraba por defecto. Los formatos, dimensiones excesivas y animaciones pesadas requieren soluciones distintas. Para el proceso completo, consulta cómo comprimir imágenes para una web.

• WordPress: comprueba el tamaño elegido en el bloque o tema y las etiquetas srcset y sizes reales. WordPress genera candidatos adaptables, pero una plantilla personalizada o una descripción incorrecta del diseño puede entregar tamaños inadecuados. Cambiar solo el original puede dejar copias generadas en uso.
• Shopify: su CDN ya optimiza las imágenes de la tienda y selecciona formatos. Shopify indica que no hace falta comprimir manualmente antes de subir. Ante un aviso, revisa el ancho pedido por el tema y el marcado adaptable, sin degradar repetidamente la fuente. Quien desarrolle el tema puede comprobar image_url y image_tag.
• Next.js: utiliza la configuración adaptable de Image y ajusta sizes al diseño real, especialmente con fill. Sin un valor adecuado, una imagen estrecha puede tratarse como si ocupara toda la ventana y descargarse más grande. Cambiar solo la calidad no corrige ese desajuste.

Guarda un original editable. Si sirves imágenes independientes, compara tamaño real y aspecto; la comparativa JPG, PNG y WebP ayuda a elegir. Bitinz no redimensiona. La conversión WebP puede aumentar el archivo: conserva la versión adecuada para la página.

Para publicaciones recurrentes, la API para desarrolladores procesa archivos adecuados con una cuenta y cuota mensual. No repara etiquetas del tema ni diseños adaptables. Revisa la página servida después de integrar la automatización.

• La URL señalada coincide con la imagen y versión modificadas.
• El navegador elige una fuente adecuada tanto en móvil como en pantallas anchas.
• La compresión conserva detalles útiles, transparencia y degradados suaves.
• La imagen principal visible no se retrasa por una carga diferida inadecuada.
• El nuevo informe utiliza el mismo dispositivo; también se revisan aspecto y carga reales.