Cómo servir WebP mediante .htaccess y optimizar la carga

El formato WebP es capaz de reducir el peso de tus imágenes hasta un 80% sin que el ojo humano note la diferencia. Pero cuidado: no sirve de nada tener un archivo .webp si tu código sigue llamando al .jpg.

La clave no es sustituir las imágenes a mano, sino configurar el archivo .htaccess para que, si el navegador del usuario acepta WebP, el servidor se lo entregue automáticamente aunque la URL termine en .jpg o .png.

El concepto, negociación de contenido

Esto es lo que separa a un consultor SEO de un «subidor de contenidos». Mediante el .htaccess, creamos una regla que dice:

• «Si el navegador me dice que entiende WebP Y existe una versión WebP de esta imagen en la carpeta… ¡Dásela!»
  
• «Si no, dale el JPG de toda la vida».

Esto evita que la web se rompa en navegadores antiguos (aunque hoy ya son minoría).

El código que necesitas

Para que esto funcione, primero debes haber convertido tus imágenes (puedes usar herramientas en lote o plugins que solo hagan la conversión, no la entrega). Una vez tengas tus archivos imagen.jpg e imagen.jpg.webp en la misma carpeta, mete esto en tu .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  # Comprobar si el navegador acepta WebP
  RewriteCond %{HTTP_ACCEPT} image/webp
  # Comprobar si existe la versión .webp de la imagen
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  # Servir el WebP en lugar del JPG/PNG
  RewriteRule (.+)\.(jpe?g|png|gif)$ $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

¿Por qué es mejor que usar un plugin de entrega?

En nuestros análisis de WPO en VisibilidadOn, siempre vemos lo mismo:

• Menos consultas a la base de datos. El servidor resuelve la imagen antes de que WordPress siquiera se despierte.
  
• Caché más eficiente. Al no cambiar la URL de la imagen en el HTML, no mareas a los sistemas de caché ni a los CDNs.
  
• Código limpio. Evitas el exceso de etiquetas <picture> que a veces ensucian el DOM y complican el mantenimiento.

El checklist de comprobación

No te fíes de lo que dice el código; compruébalo:

1. Abre tu web en Chrome.
2. Inspecciona (F12) -> pestaña Network.
3. Filtra por «Img» y recarga.
4. Mira la columna Type. Si pone «webp» pero la URL termina en «.jpg», lo has clavado.

Si quieres profundizar en cómo esto afecta directamente al LCP (Largest Contentful Paint), tienes todos los detalles técnicos en nuestro Curso de WPO.

El problema de los «falsos optimizados»

Muchos clientes nos llegan diciendo que ya usan WebP porque instalaron un plugin X. El problema es que muchos de esos plugins generan URLs nuevas (ej. /uploads/webp/imagen.webp).

¿Qué pasa si mañana borras el plugin? Miles de errores 404. Hacerlo por .htaccess es la forma profesional de blindar el SEO de la web. Mantienes tus URLs originales, pero sirves tecnología del futuro. Es eficiencia pura. Si no estás sirviendo WebP así, estás dejando que tu competencia te adelante por la derecha en los Core Web Vitals.