WebP es un formato de imagen moderno desarrollado por Google que ofrece compresión superior a JPEG y PNG con la misma calidad perceptual. Convertir tus imágenes a WebP puede reducir su peso entre un 25 % y un 35 %, lo que acelera directamente el tiempo de carga y mejora métricas como el LCP (Largest Contentful Paint).
En esta guía verás cómo convertir imágenes a WebP, cómo servirlas correctamente con respaldo para navegadores antiguos y cómo automatizar el proceso en WordPress.
¿Qué es WebP y por qué usarlo?
WebP combina compresión con pérdida (como JPEG) y sin pérdida (como PNG) en un solo formato. También admite transparencia (canal alfa) y animaciones, lo que lo hace versátil para cualquier tipo de imagen en la web.
Comparativa rápida de formatos:
| Formato | Compresión típica | Transparencia | Soporte de navegadores |
|---|---|---|---|
| JPEG | Base | No | Universal |
| PNG | +10–20 % vs JPEG | Sí | Universal |
| WebP | −25–35 % vs JPEG | Sí | +97 % (Chrome, Firefox, Safari, Edge) |
| AVIF | −40–50 % vs JPEG | Sí | ~95 % (soporte en crecimiento) |
WebP tiene soporte en más del 97 % de los navegadores en uso, por lo que ya es seguro usarlo como formato principal con un simple respaldo para el pequeño porcentaje restante.
Cómo convertir imágenes a WebP
Opción 1: herramientas en línea (sin instalación)
Squoosh (squoosh.app) es la opción más sencilla: arrastra la imagen, selecciona WebP como formato de salida, ajusta la calidad (80 suele ser el punto óptimo) y descarga el resultado. También puedes comparar el antes y el después en tiempo real.
Otras opciones populares: Convertio y CloudConvert, útiles para conversiones por lotes sin instalar software.
Opción 2: línea de comandos con cwebp
cwebp es la herramienta oficial de Google. En Linux y macOS puedes instalarlo con el gestor de paquetes del sistema. Uso básico:
cwebp -q 80 imagen-original.jpg -o imagen-salida.webpPara convertir todos los JPEG de un directorio de forma masiva:
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; doneOpción 3: en WordPress con un plugin
Si tu sitio corre sobre WordPress, los siguientes plugins convierten y sirven WebP de forma automática:
- Imagify: convierte al subir y reconvierte la biblioteca existente. Tiene plan gratuito con límite mensual.
- ShortPixel: conversión en la nube, excelente calidad, créditos gratuitos al mes.
- WebP Express: convierte en el servidor usando la librería nativa de PHP (GD o Imagick), totalmente gratuito.
Cómo servir WebP con respaldo para navegadores antiguos
Aunque el soporte es amplio, siempre es buena práctica incluir un respaldo. La forma más elegante es el elemento <picture> de HTML5:
<picture>
<source srcset="imagen.webp" type="image/webp">
<img src="imagen.jpg" alt="Descripción de la imagen" width="800" height="600">
</picture>El navegador selecciona automáticamente WebP si lo soporta; de lo contrario, carga el JPEG. No necesitas JavaScript ni detección de características.
Respaldo desde el servidor con Apache (.htaccess)
Si prefieres no modificar el HTML y servir WebP de forma transparente desde el servidor, añade esto a tu .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>Este fragmento verifica si el navegador envía Accept: image/webp en la solicitud y si existe el archivo .webp equivalente; si ambas condiciones se cumplen, sirve la versión WebP de forma transparente.
Para más estrategias de optimización de velocidad, consulta los recursos de elenlace.com sobre rendimiento web profesional.
Impacto en Core Web Vitals y SEO
Las imágenes son frecuentemente el recurso más pesado de una página. Reducir su tamaño con WebP tiene impacto directo en:
- LCP (Largest Contentful Paint): si la imagen hero o el producto principal está en WebP, el tiempo hasta que se pinta ese elemento disminuye.
- Total Blocking Time: menos bytes que transferir libera ancho de banda para el JavaScript crítico.
- Puntuación de PageSpeed Insights: Google recomienda explícitamente WebP en la auditoría "Serve images in next-gen formats".
Puedes ampliar el análisis de tus imágenes y otras métricas desde la categoría de rendimiento web de nuestro blog.
Conclusiones clave
- WebP reduce el peso de las imágenes entre un 25 % y un 35 % frente a JPEG, con calidad visual equivalente.
- El soporte de navegadores supera el 97 %, por lo que es seguro usarlo como formato principal hoy.
- Usa el elemento
<picture>con respaldo<img>para compatibilidad completa sin JavaScript. - En WordPress, plugins como Imagify o ShortPixel automatizan todo el proceso de conversión y entrega.
- Servir WebP mejora directamente el LCP y la puntuación en PageSpeed Insights, beneficiando al SEO.
¿Quieres que un equipo experto optimice las imágenes y el rendimiento de tu sitio de forma profesional? En elenlace.com te ayudamos a implementar WebP y otras mejoras técnicas para que tu sitio cargue más rápido y posicione mejor.
Preguntas frecuentes
¿WebP es compatible con todos los navegadores?
Sí, en más del 97 % de los navegadores actualmente en uso, incluyendo Chrome, Firefox, Safari (desde 2020), Edge y Opera. El pequeño porcentaje restante (algunos IE y Safari muy antiguos) puede recibir el formato original JPEG o PNG mediante el elemento <picture> como respaldo.
¿Qué calidad debo usar al convertir a WebP?
Para fotografías e imágenes con gradientes, un valor de calidad entre 75 y 85 ofrece el mejor equilibrio entre tamaño de archivo y calidad visual. Para imágenes con texto o gráficos con bordes nítidos, prueba primero con calidad 90; la compresión sin pérdida de WebP también es una opción válida para esos casos.
¿Necesito mantener las imágenes originales (JPEG/PNG) después de convertir a WebP?
Sí, especialmente si usas el método de respaldo con <picture> o la reescritura desde Apache. Los archivos originales actúan como respaldo para los navegadores que no soportan WebP y como fuente de verdad para futuras reconversiones si necesitas ajustar la calidad.
¿WebP o AVIF: cuál debo usar?
AVIF ofrece una compresión aún mayor (40–50 % vs JPEG), pero su soporte de navegadores (~95 %) y las herramientas de conversión son menos maduras. La estrategia más robusta hoy es servir AVIF primero, WebP como segundo respaldo y JPEG/PNG como último recurso dentro del elemento <picture>, aunque para la mayoría de los proyectos WebP como formato principal es más que suficiente.
Recursos útiles
Otros proveedores y guías que vale la pena comparar:
