Cómo optimizar imágenes WebP en WordPress: Guía 2026
Si tu sitio WordPress carga lento, las imágenes son probablemente el culpable número uno. Y no es casualidad: una imagen sin optimizar puede pesar 10x más de lo necesario.
WebP es el formato que soluciona este problema, pero hay detalles que muchos sitios ignoran.
¿Qué es WebP y por qué importa en 2026?
WebP es un formato de imagen desarrollado por Google que ofrece:
En 2026, WebP ya no es opcional. Los navegadores modernos (Chrome, Firefox, Edge, Safari) lo soportan nativamente. Google lo favorece en Core Web Vitals.
El problema: WordPress no usa WebP por defecto
WordPress sube imágenes en JPEG, PNG o GIF. No convierte a WebP automáticamente.
Sin optimización:
Con WebP:
Solución 1: Plugin automático (recomendado para la mayoría)
Para sitios que no quieren complicaciones técnicas.
Opción A: WebP Express (gratis, abierto)
Ventajas:
Instalación:
1. Plugins → Añadir nuevo
2. Buscar «WebP Express»
3. Instalar y activar
Configuración recomendada:
`
Modo: Varied image responses (máxima compatibilidad)
Calidad: 80 (equilibrio calidad/peso)
Convertir al subir: Sí
Redimensionar originales: No (mantener resoluciones)
`
Resultado: Todas las imágenes nuevas se sirven en WebP automáticamente.
Ventajas:
Configuración:
1. Smush → Settings
2. Activar «Automatically Smush my images on upload»
3. Activar «Enable WebP conversion»
4. Ejecutar «Bulk Smush» para imágenes existentes
Límite gratis: 50 imágenes a la vez en bulk.
Solución 2: Conversión desde nivel servidor (máximo control)
Si tienes acceso SSH a tu hosting, esta es la opción más potente.
Requisitos previos
`bash
Verificar si cwebp está instalado
which cwebp
Si no está, instalar
sudo apt-get install webp # Debian/Ubuntu
`
Script de conversión bulk
`bash
#!/bin/bash
convertir-webp.sh
Uso: ./convertir-webp.sh /ruta/a/wp-content/uploads
UPLOADS_DIR=»$1″
find «$UPLOADS_DIR» -type f \( -iname «.jpg» -o -iname «.jpeg» -o -iname «*.png» \) | while read img; do
# Crear WebP
cwebp -q 80 «$img» -o «${img%.*}.webp»
# Servir WebP con .htaccess (más abajo)
echo «Convertido: $img → ${img%.*}.webp»
done
`
Ejecución:
`bash
chmod +x convertir-webp.sh
./convertir-webp.sh /ruta/a/wp-content/uploads
`
Reglas .htaccess para servir WebP
Añadir a .htaccess en la raíz de WordPress:
`apache
RewriteEngine On
# Servir WebP si existe
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1,L]
Header append Vary Accept env=REDIRECT_accept
AddType image/webp .webp
`
Resultado: Si imagen.jpg.webp existe, se sirve. Si no, se sirve el JPEG original.
Solución 3: CDN con conversión automática
Para sitios con tráfico alto o sin recursos de servidor.
Cloudflare Polish (de pago)
Ventajas:
Configuración:
1. Cloudflare Dashboard → Speed → Optimization
2. Activar «Polish»
3. Seleccionar «On» para WebP
4. Opcional: Activar «Lossless» para máxima calidad
Cloudinary (gratis hasta 25 GB/mes)
Ventajas:
Uso básico:
`
URL original:
https://misitio.com/uploads/foto.jpg
URL con WebP via Cloudinary:
https://res.cloudinary.com/micuenta/image/upload/q_80,f_webp/foto.jpg
`
Plugin WordPress: «Cloudinary Image Upload and Manipulation»
Métricas antes y después
Sitio de prueba (120 imágenes)
Antes de WebP:
Después de WebP (calidad 80):
Impacto real: El sitio pasó de «amenaza roja» en PageSpeed a «verde» en móvil y escritorio.
Errores comunes (y cómo evitarlos)
Error 1: Calidad demasiado baja
Problema: Usar calidad 60 o menos para «ahorrar más».
Resultado: Imágenes pixeladas, mala impresión.
Solución: Calidad 80-85 es el punto óptimo. Más de 85 es desperdicio, menos de 75 es visible.
Error 2: No servir WebP en HTTPS
Problema: Tu sitio es HTTPS pero las imágenes se sirven en HTTP.
Resultado: «Mixed content» → imágenes no cargan.
Solución: Asegurar que todas las URLs sean HTTPS. Plugin: «Really Simple SSL».
Error 3: Convertir PNG complejos a WebP
Problema: PNG con transparencias complejas o degradados.
Resultado: WebP más pesado que el original.
Solución: Para logos y gráficos simples, mantener PNG. Para fotos, usar WebP.
Error 4: No validar después de convertir
Problema: Convientes todo, pero no verificas que funcione.
Resultado: Imágenes rotas, navegadores antiguos sin fallback.
Solución: SIEMPRE probar en:
¿Cómo validar que WebP está funcionando?
1. Click derecho → Inspeccionar
2. Network tab
3. Recargar página
4. Filtrar por «Img»
5. Ver «Type» column → Debe decir «image/webp»
Método 2: Herramientas online
Método 3: Google Search Console
`
Experience → Core Web Vitals
Revisar URLs con «LCP» lento
Comprobar si son imágenes pesadas
`
Casos especiales
WooCommerce y productos
WooCommerce maneja imágenes de forma diferente. Necesitas:
1. Activar WebP Express o Smush
2. Regenerar thumbnails: «Regenerate Thumbnails» plugin
3. Verificar imágenes de producto, galería y miniaturas
Recomendación: Para WooCommerce, usar Smush Pro (mejor integración).
Retina y pantallas de alta densidad
Para servir WebP para pantallas retina:
`php
// Añadir a functions.php
add_filter(‘wp_calculate_image_srcset’, function($sources) {
foreach ($sources as &$source) {
if (strpos($source[‘url’], ‘.webp’) === false) {
$source[‘url’] .= ‘.webp’;
}
}
return $sources;
});
`
Nota: Requiere que el servidor convierta a WebP en tiempo real (ver Solución 2).
Alternativa a WebP: AVIF
AVIF es el siguiente formato (hasta 50% más ligero que WebP).
Problema en 2026: Soporte de navegadores aún incompleto (Safari 17+).
Recomendación: Usar AVIF + WebP fallback. Plugins: «Ewww Image Optimizer» (soporta ambos).
Conclusión
WebP no es magia, es física mejor aplicada. Menos bytes = menos datos = más velocidad = mejor experiencia.
Basándome en experiencia real: La conversión a WebP es una de las pocas optimizaciones que paga dividendos inmediatos. No requiere cambiar tu hosting, no requiere rediseñar el sitio.
Es simplemente reemplazar un archivo pesado por uno ligero que se ve igual.
Si en 2026 tu sitio WordPress no sirve imágenes en WebP, estás dejando dinero en la mesa: peor posicionamiento, más rebote, menos conversión.
Mi recomendación: Instala WebP Express hoy. Configúralo con calidad 80. Ejecuta bulk optimizer. Mide resultados antes y después.
Si ves mejora (y la verás), considera el siguiente paso: lazy loading + CDN + compresión de texto. Pero WebP es el fundamento.
