Convertir JPG a WebP para la web: mejora el LCP
Las imágenes representan el 60–80 % del peso total de una página web típica. Cada kilobyte extra en una imagen retrasa la carga y penaliza los Core Web Vitals. Convertir tus JPG a WebP es la acción con mayor retorno en optimización de rendimiento web: mismo aspecto visual, 25–35 % menos de peso, mejor posición en Google.
Por qué WebP mejora el posicionamiento web
Google incorporó los Core Web Vitals como señal de ranking en 2021. El Largest Contentful Paint (LCP) mide cuánto tarda en cargarse el elemento visual más grande de la página, que en la mayoría de sitios es la imagen hero o el banner principal. Un LCP <2.5 s se considera "bueno"; por encima de 4 s, Google lo penaliza.
Al reducir el peso de la imagen hero con WebP, el navegador la descarga antes y el LCP mejora directamente. Además, Lighthouse incluye la auditoría "Serve images in next-gen formats": mientras uses JPG, esta advertencia aparecerá y restarás puntos de Performance. Al migrar a WebP, desaparece del informe.
- LCP: imagen más ligera → descarga más rápida → métrica verde.
- Ancho de banda: menos datos por sesión → mejor experiencia en 4G/5G.
- Lighthouse Performance: puntuación más alta → mejor percepción de calidad por Google.
Qué imágenes de tu web convertir primero
No todas las imágenes tienen el mismo impacto en el rendimiento. Prioriza según el orden en que las carga el navegador y su peso individual:
-
Imagen hero / above the fold: es el elemento LCP. Conviértela primero,
usa
loading="eager"y definewidthyheightexplícitos. - Imágenes OG (Open Graph): controlan el preview cuando alguien comparte tu página en redes sociales. 1200×630 px, calidad 85 %.
-
Imágenes de contenido (artículos, secciones): usa
loading="lazy"para cargarlas solo cuando el usuario se acerque a ellas. Menos peso crítico. - Thumbnails y listados: suelen ser muchas en una sola página; el ahorro acumulado es muy significativo. Calidad 75–80 % es suficiente.
Para integrar WebP con fallback, usa la etiqueta <picture>:
el navegador elige automáticamente el formato que soporta.
Parámetros de calidad WebP por posición en la página
| Posición | Dimensiones | Calidad | Peso objetivo |
|---|---|---|---|
| Hero / Above the fold | 1200–1600 px | 82–85 % | <200 KB |
| Imagen Open Graph | 1200×630 px | 85 % | <150 KB |
| Imagen de contenido | 800×500 px | 80–82 % | <100 KB |
| Thumbnail de listado | 600×400 px | 75–80 % | <60 KB |
| Logo / icono | <200 px | SVG o PNG | <10 KB |
Preguntas frecuentes
¿WebP afecta directamente al ranking en Google?
No de forma directa, pero Google usa Core Web Vitals como señal de ranking desde 2021. WebP mejora el LCP al reducir el tamaño de la imagen principal. Una mejora en LCP puede subir la puntuación PageSpeed y contribuir positivamente a la posición orgánica.
¿Necesito un fallback JPG para navegadores sin soporte WebP?
En 2026, WebP supera el 96% de soporte global. Para máxima cobertura usa la etiqueta <picture> con un <source type="image/webp"> y un <img> JPG como fallback. WordPress y la mayoría de CDNs lo gestionan automáticamente.
¿WebP también mejora el CLS (Cumulative Layout Shift)?
Indirectamente. WebP no corrige el CLS por sí solo, pero combinado con los atributos width y height correctos en la etiqueta <img>, evita el reflow que causa saltos de layout. El beneficio es real aunque indirecto.
¿Cuánto mejora PageSpeed al pasar todas las imágenes a WebP?
Depende del peso inicial de las imágenes. En sitios donde representan el 60-80% del peso total, cambiar a WebP puede subir 10-20 puntos en la puntuación Performance de Lighthouse y eliminar la auditoría "Serve next-gen formats".
¿Las imágenes OG para redes sociales deben ser WebP?
No es obligatorio. Facebook y Twitter aceptan WebP para Open Graph desde 2021. Si ya tienes la imagen en WebP, úsala sin problema. El tamaño canónico es 1200×630 px a calidad 85% para un peso óptimo en previews compartidos.