Servir una alternativa WebP de la misma carpeta con Apache

Este ejemplo sirve image.jpg.webp para una solicitud a image.jpg cuando el navegador admite WebP. Es una integración opcional de Apache, no una regla generada por la interfaz de POM Cache.

Pruébalo en staging y adáptalo al generador de imágenes y a la raíz del documento reales.

Preparar un par real

Elige una subida no crítica y confirma que ambos archivos son válidos:

wp-content/uploads/2026/07/example.jpg
wp-content/uploads/2026/07/example.jpg.webp

Abre cada archivo directamente antes de añadir la negociación. El archivo WebP debe estar ya generado; Apache no convierte el JPEG durante la solicitud.

Ejemplo de bloque de Apache

Coloca el bloque revisado antes de las reglas de archivo existente/controlador frontal de WordPress:

# BEGIN same-folder WebP
<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp [NC]
    RewriteCond %{REQUEST_FILENAME} \.(?:jpe?g|png)$ [NC]
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteCond %{REQUEST_FILENAME}.webp -f
    RewriteRule ^(.+\.(?:jpe?g|png))$ $1.webp [NC,L]
</IfModule>

<IfModule mod_headers.c>
    <FilesMatch "\.(?:jpe?g|png|webp)$">
        Header merge Vary Accept
    </FilesMatch>
</IfModule>
# END same-folder WebP

El bloque usa:

• mod_rewrite para seleccionar la alternativa;
• mod_mime para asociar .webp con image/webp;
• mod_headers para combinar Accept en Vary.

Apache documenta la correspondencia entre extensión y tipo de medio en mod_mime y los cambios condicionales de cabeceras en mod_headers.

Entender cada condición

HTTP_ACCEPT impide la entrega de WebP a un cliente que no lo solicitó.

La condición de nombre de archivo limita la negociación a las solicitudes JPEG y PNG. Las dos comprobaciones -f exigen que existan tanto el archivo original como original.webp.

La reescritura interna mantiene la URL del visor sin cambios:

viewer URL: /uploads/example.jpg
served file: /uploads/example.jpg.webp

Header merge evita añadir un token Accept duplicado cuando otra regla ya lo ha proporcionado.

Si tu generador usa image.webp

No uses el ejemplo sin modificaciones. La comprobación de existencia y la sustitución deben eliminar la extensión original en lugar de añadir .webp.

Anota pares de ejemplo para .jpg, .jpeg y .png, incluyendo nombres de archivo en mayúsculas si el sistema de archivos distingue mayúsculas de minúsculas, y pide al administrador del servidor que valide la expresión resultante.

Una regla no debe esperar a veces image.jpg.webp y a veces image.webp.

Validar en el origen

Evita la CDN y luego haz dos solicitudes a la URL pública original.

Con soporte de WebP:

curl -sS -D - -o /dev/null \
  -H 'Accept: image/webp,image/*,*/*' \
  'https://example.com/wp-content/uploads/2026/07/example.jpg'

Sin soporte de WebP:

curl -sS -D - -o /dev/null \
  -H 'Accept: image/jpeg,image/*,*/*' \
  'https://example.com/wp-content/uploads/2026/07/example.jpg'

La primera respuesta debe ser Content-Type: image/webp; la segunda debe seguir siendo image/jpeg. Ambas deben incluir un valor Vary apropiado que contenga Accept.

Compara también los bytes de la respuesta o la información de la imagen del navegador. Las cabeceras por sí solas no pueden demostrar que el cuerpo usa el formato indicado.

Añade la CDN al final

Configura la CDN para que la URL pública original tenga variantes de caché distintas para los valores Accept compatibles e incompatibles. Purga cualquier objeto de imagen almacenado en caché antes de que se habilitara esta política.

Luego repite ambas solicitudes a través de la distribución pública. Si ambas reciben el formato que se solicitó primero, la clave de caché de borde está incompleta.

Usa Conservar la imagen original como alternativa segura antes de aplicar la regla a todo el árbol de subidas.