Cómo optimizar imágenes en WordPress: WebP/AVIF y lazy load
Las imágenes son, con diferencia, el factor que más pesa en una página web: suelen representar el 50–70 % del peso total. En WordPress, cargar una foto de 2 MB que se muestra a 400 px es desperdiciar ancho de banda, ralentizar el LCP y hundir la puntuación en Core Web Vitals.
La buena noticia: optimizar imágenes es de los arreglos con mejor relación esfuerzo/resultado en cualquier WordPress. No tocas código ni necesitas cambiar de hosting. Estos son los pasos.
Por qué las imágenes ralentizan tu web
Cuando un visitante entra, el navegador tiene que descargar cada imagen antes de poder pintar la página. Tres problemas típicos:
- Formato equivocado: JPEG/PNG antiguos pesan mucho más que WebP o AVIF.
- Tamaño sobredimensionado: el archivo es de 4000 px cuando se muestra a 800 px.
- Sin carga diferida: el navegador descarga imágenes que ni siquiera se ven al cargar.
Arreglar estos tres puntos suele bajar el peso total de la página un 70–90 % y mejorar el LCP de forma inmediata, algo que verás reflejado en PageSpeed Insights. Si tu problema es la velocidad en general, repasa antes la guía para acelerar WordPress.
WebP vs AVIF: qué formato usar
Los dos formatos “next-gen” son mucho más eficientes que JPEG y PNG. La diferencia:
| Formato | Peso relativo vs JPEG | Compatibilidad | Uso recomendado |
|---|---|---|---|
| JPEG | 100 % (referencia) | Total | Fotos, cuando el servidor no soporta lo demás |
| WebP | ~65–75 % | Todos los navegadores modernos | El estándar seguro, con pérdida 70–80 % |
| AVIF | ~50–60 % | Todos los navegadores modernos | Máxima compresión, un poco más lento de codificar |
Regla práctica: usa WebP como base (compatibilidad total y buena compresión) y, si quieres exprimir el último 10–15 %, AVIF con respaldo WebP mediante picture. Los plugins de optimización hacen este “servir el mejor formato disponible” de forma automática.
Comprime sin perder calidad visible
La compresión es donde más se gana con menos riesgo. Ajustes recomendados:
- Calidad 70–80 % con pérdida: la pérdida es imperceptible en pantalla, el ahorro enorme.
- Activa la compresión de imágenes ya subidas (los plugins optimizan toda la biblioteca).
- Borra los tamaños intermedios que no uses o limita los tamaños que genera WordPress (
srcset).
Activa el lazy load (carga diferida)
La carga diferida evita descargar imágenes que están fuera de pantalla hasta que el usuario hace scroll. WordPress 5.5 ya la añade por defecto (loading="lazy"), pero conviene verificar que no se rompe con tu tema y que la imagen del LCP (la primera) nunca lleve lazy — eso penalizaría la velocidad percibida.
Además, sirve imágenes con dimensiones correctas (width y height) para evitar saltos de layout (CLS) mientras cargan.
Plugins que lo hacen todo automáticamente
La vía más rápida es un plugin que comprima, convierta y sirva el formato correcto sin que toques nada. Los más usados:
- ShortPixel — compresión, WebP/AVIF y CDN de imágenes; buen equilibrio gratis/pago.
- EWWW Image Optimizer — sin límites en el plan gratuito local; muy popular.
- Converter for Media — conversión masiva a WebP/AVIF con modo “picture”.
- Imagify — de los creadores de WP Rocket, con límite mensual gratis.
- Los plugins de caché como WP Rocket o LiteSpeed Cache incluyen optimización de imágenes en sus planes.
Con cualquiera de ellos: comprime la biblioteca una vez, activa la entrega de WebP/AVIF y deja que haga el resto.
Conclusión
En resumen: elige WebP (o AVIF con respaldo), comprime al 70–80 %, activa lazy load y deja que un plugin automatice la conversión. Re-mide en PageSpeed Insights antes y después: en la mayoría de sitios verás el LCP caer de golpe. Es, junto a la caché y un buen hosting, de lo que más rendimiento devuelve en WordPress. Para más tácticas de rendimiento, visita el pilar de Velocidad.