Cómo servir imágenes WebP automáticamente en WordPress con .htaccess

🖼️ Cómo servir imágenes WebP automáticamente en WordPress con .htaccess (¡y acelerar tu web!)

¿Te preocupa la velocidad de tu sitio?
¿Sabías que las imágenes suelen representar más del 50% del peso total de una página web?

Hoy aprenderás cómo hacer que WordPress sirva imágenes en formato WebP automáticamente usando solo .htaccess, sin necesidad de instalar plugins, y con beneficios reales para tu rendimiento 🚀

🤔 ¿Qué es WebP y por qué usarlo?

WebP es un formato de imagen desarrollado por Google que ofrece:

🗜️ Mejor compresión (hasta un 30% menos peso que JPEG o PNG)
✅ Calidad visual prácticamente idéntica
🚀 Soporte amplio en navegadores modernos (más del 95%)
💡 Ideal para mejorar el rendimiento sin sacrificar estética

❝ Usar WebP es una de las formas más efectivas y sencillas de acelerar tu sitio sin cambiar nada del diseño. ❞

🎯 ¿Qué lograrás con este artículo?

✅ Servir imágenes WebP automáticamente (si el navegador lo permite)
✅ Sin plugins
✅ Sin tocar WordPress
✅ Solo configurando el archivo .htaccess

📦 Requisitos previos

Antes de aplicar esta solución, necesitas cumplir con lo siguiente:

✅ Tener versiones .webp de tus imágenes (misma ruta que los .jpg o .png)
✅ Usar Apache como servidor (la mayoría de hostings lo usan)
✅ Acceso al archivo .htaccess de tu sitio WordPress
(Opcional) mod_rewrite y mod_headers habilitados (lo están en la mayoría de hostings)

❝ Si usas un plugin como ShortPixel o EWWW Image Optimizer, ya puedes generar versiones WebP fácilmente. ❞

✍️ Código `.htaccess` para servir WebP automáticamente

Añade el siguiente bloque de código al inicio de tu archivo .htaccess, justo después de la línea # BEGIN WordPress:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

🧠 ¿Qué hace este código?

🔍 Comprueba si el navegador acepta WebP (HTTP_ACCEPT)
🔄 Detecta si existe una versión .webp del archivo solicitado
📤 Sirve la versión WebP en lugar de la original
🧠 Añade el encabezado Vary: Accept para evitar problemas de caché

❝ Esto es como tener un «interruptor automático» que muestra la versión más ligera si el navegador lo permite. ❞

📂 Estructura de archivos esperada

Tu carpeta de imágenes debe verse algo así:

/wp-content/uploads/imagen.jpg  
/wp-content/uploads/imagen.webp

El navegador moderno pedirá imagen.jpg, pero recibirá imagen.webp.
El navegador antiguo seguirá recibiendo la .jpg sin errores.

🧪 ¿Cómo probar si está funcionando?

Abre tu sitio en Google Chrome
Haz clic derecho → «Inspeccionar» → pestaña Red
Filtra por “.jpg” o “.png”
Verás que el navegador recibe un archivo .webp
También puedes ver la cabecera content-type: image/webp

🎯 Otra opción: usar herramientas como WebPageTest.org o GTmetrix para verificar el tipo de imagen servida.

⚠️ ¿Y si el navegador no soporta WebP?

No pasa nada.
La magia de este sistema es que automáticamente sirve la imagen original si el navegador no soporta WebP (lo cual ya es raro hoy día).

❝ Esta solución es 100% compatible, segura y sin riesgo para tus visitantes. ❞

💬 ¿Y los plugins?

Podrías usar plugins como WebP Express, Imagify o ShortPixel.
Pero si ya tienes tus .webp generadas y sabes usar .htaccess, no necesitas sobrecargar tu WordPress con más plugins.

🚀 Ventajas de esta solución

Ventaja	Explicación
🔋 Mejora de rendimiento	Las imágenes pesan menos → la web carga más rápido
💚 Menos consumo de ancho de banda	Ahorra recursos del servidor
📈 Mejor puntuación en PageSpeed	Especialmente en «Imagen en formatos modernos»
🔒 Compatible con caché y CDNs	Si usas Cloudflare o LiteSpeed, también funciona
🎯 Sin afectar diseño	No cambia el aspecto de tu web

Htaccess Webp ⚙️

📖 Lista de palabras de nuestro .htaccess con explicación clara:

RewriteRule → Regla que dice cómo cambiar la dirección de un archivo o imagen.
RewriteCond → Condición que debe cumplirse antes de aplicar una regla.
RewriteEngine → El motor que activa las reglas de cambio en .htaccess.
IfModule → Comando que ejecuta un bloque de reglas solo si un módulo está activado.
mod_rewrite.c → Módulo de Apache que permite redirigir y reescribir direcciones.
mod_headers.c → Módulo para modificar o añadir cabeceras (información extra) en la respuesta.
mod_mime.c → Módulo para decir qué tipo de archivo es (imagen, vídeo, texto, etc.).
mod_expires.c → Módulo para controlar cuánto tiempo un navegador guarda un archivo en caché.
AddType → Indica a Apache que un tipo de archivo (ej: .webp) es de un tipo específico (ej: imagen WebP).
image/webp → Tipo de imagen más ligera que JPG o PNG.
%{HTTP_ACCEPT} → Lista de formatos que el navegador dice que soporta.
%{DOCUMENT_ROOT} → Carpeta principal donde están los archivos del sitio web.
$1 → Referencia al primer grupo capturado en una expresión regular.
$2 → Referencia al segundo grupo capturado en una expresión regular.
jpe?g → Forma de escribir tanto .jpg como .jpeg.
png → Tipo de archivo de imagen (Portable Network Graphics).
gif → Tipo de archivo de imagen animada o simple (Graphics Interchange Format).
L → Bandera que significa «última regla», no sigas buscando más reglas después de esta.
T=image/webp → Dice que el archivo es del tipo imagen WebP.
E=REQUEST_image → Crea una variable interna que marca si se pidió una imagen.
R → Bandera que fuerza una redirección (redirige al navegador).
Vary Accept → Instrucción para que el servidor diga: “la respuesta cambia según el navegador”.
Header append → Añade información extra (cabecera) a la respuesta del servidor.
ExpiresActive → Activa la opción de fechas de expiración de archivos.
ExpiresDefault → Tiempo de expiración por defecto de todos los archivos.
ExpiresByType → Tiempo de expiración según el tipo de archivo (ej: imágenes).
access plus 1 month → Guardar el archivo en caché durante 1 mes.
access plus 2 days → Guardar el archivo en caché durante 2 días.
REQUEST_URI → Dirección exacta del archivo que pidió el navegador.
assets/webp → Carpeta donde están las imágenes WebP.
img/ → Carpeta típica donde se guardan imágenes.
site/views/00_projects/ → Ejemplo de ruta dentro de un sitio web.
content/image/ → Carpeta dentro del sitio web para guardar imágenes.
webp/ → Subcarpeta dedicada a imágenes en formato WebP.
-f → Verifica si un archivo realmente existe.
^ → Signo que en las reglas significa “empieza con…”.
$ → Signo que en las reglas significa “termina con…”.
(?:… ) → Grupo en expresiones regulares que agrupa, pero no guarda.
(?i) → Opción que hace que las reglas no distingan entre mayúsculas y minúsculas.
L,T=image/webp → Combinación de banderas: “última regla” y “el archivo es WebP”.

👉 En conclusion:
Estas palabras son principalmente directivas de Apache (RewriteRule, RewriteCond, etc.), módulos (mod_rewrite, mod_headers…) y tipos de archivos o expresiones usadas para redirigir imágenes clásicas (JPG, PNG, GIF) hacia su versión optimizada en WebP.

✅ En resumen

Servir imágenes WebP automáticamente con .htaccess es una de las mejoras más potentes, limpias y efectivas que puedes aplicar hoy en tu WordPress.

No necesitas plugins, no necesitas tocar el theme. Solo entender cómo funciona y copiar el código correctamente.
Y con eso, tu web será más rápida, más ligera y mejor optimizada para Google.

❝ Haz que tu WordPress vuele, una imagen a la vez. 🪶⚡ ❞