Imágenes WebP en PrestaShop: configuración y problemas comunes

Qué es WebP y por qué importa para PrestaShop

WebP es un formato de imagen moderno desarrollado por Google que proporciona compresión tanto con pérdida como sin pérdida para imágenes web. Comparado con formatos tradicionales como JPEG y PNG, WebP típicamente ofrece archivos un 25-35% más pequeños con calidad visual equivalente. Para una tienda de comercio electrónico que ejecuta PrestaShop, donde las páginas de producto a menudo contienen docenas de imágenes, cambiar a WebP puede reducir drásticamente el peso de la página, mejorar los tiempos de carga y aumentar las puntuaciones de Core Web Vitals—todo lo cual impacta directamente en las clasificaciones SEO y las tasas de conversión.

A diferencia de formatos de nueva generación más antiguos que lucharon con la adopción, WebP ha alcanzado un soporte de navegadores casi universal. A partir de 2026, todos los navegadores principales—Chrome, Firefox, Safari, Edge, Opera y sus equivalentes móviles—soportan WebP completamente. Incluso los últimos bastiones como las versiones antiguas de Safari en macOS Catalina son ahora estadísticamente irrelevantes, representando menos del 0,3% del tráfico global. Esto significa que puedes servir imágenes WebP con confianza a prácticamente todos los visitantes sin preocuparte por problemas de compatibilidad.

Para los comerciantes de PrestaShop, las ganancias de rendimiento son sustanciales. Un catálogo de productos típico con 1.000 productos y 5 imágenes cada uno puede ver reducido el peso total de imágenes de 500 MB a menos de 350 MB. En las páginas de listado de productos que muestran de 20 a 40 miniaturas, esto se traduce en 200-400 KB ahorrados por carga de página—suficiente para mejorar significativamente las métricas de Time to First Contentful Paint y Largest Contentful Paint.

Activar WebP en PrestaShop 1.7 y 8.x

PrestaShop 1.7.8+ y todas las versiones 8.x incluyen soporte nativo para WebP. La funcionalidad está integrada en el sistema de regeneración de imágenes y puede activarse a través del back office. Así es cómo activarlo:

1. Navega a Diseño > Ajustes de imágenes (en PS 8.x) o Preferencias > Imágenes (en PS 1.7).
2. Busca la sección Opciones de generación de imágenes en la parte inferior de la página.
3. Encuentra el ajuste Formato de imagen y selecciona una de las opciones relacionadas con WebP. PrestaShop típicamente ofrece: solo JPEG, solo PNG, solo WebP, o JPEG/PNG + WebP (genera ambos formatos).
4. Selecciona JPEG/PNG + WebP si quieres compatibilidad con fallback, o Solo WebP si estás seguro de que todos tus visitantes usan navegadores modernos.
5. Establece el deslizador de calidad WebP. Un valor entre 80 y 85 proporciona un excelente equilibrio entre tamaño de archivo y calidad visual para fotografía de productos.
6. Haz clic en Guardar, luego haz clic en Regenerar miniaturas para crear versiones WebP de todas las imágenes existentes.

El proceso de regeneración puede llevar un tiempo considerable en catálogos grandes. Para una tienda con más de 5.000 productos, espera que el proceso dure de 30 minutos a varias horas dependiendo de los recursos del servidor. Es altamente recomendable ejecutar la regeneración durante las horas de menor actividad o vía CLI para evitar problemas de timeout de PHP.

Regeneración por CLI para catálogos grandes

Para tiendas con miles de productos, la regeneración desde el navegador probablemente excederá el tiempo límite. Usa el enfoque por CLI en su lugar:

php bin/console prestashop:image:regenerate --format=all

Este comando se ejecuta sin las restricciones de timeout del servidor web. También puedes apuntar a tipos de imagen específicos:

php bin/console prestashop:image:regenerate --type=products --format=all
php bin/console prestashop:image:regenerate --type=categories --format=all

En versiones de PrestaShop 1.7 que carecen del comando de consola, puedes aumentar los límites de timeout de PHP y ejecutar la regeneración a través del panel de administración, o usar un PHP personalizado que llame a la clase ImageManager directamente.

Configuración del servidor: reglas .htaccess de Apache

Incluso después de activar la generación de WebP en PrestaShop, tu servidor debe estar configurado para servir el formato correcto. PrestaShop genera archivos WebP junto con los archivos JPEG/PNG originales, pero el servidor necesita saber cuándo servir qué formato.

Para servidores Apache, añade las siguientes reglas a tu archivo .htaccess en el directorio raíz de PrestaShop o en el directorio img/:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Servir imágenes WebP si el navegador las soporta y el archivo existe
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
  RewriteCond %1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=REQUEST_image,L]
</IfModule>

# Establecer el tipo MIME correcto para WebP
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

# Cabecera Vary para prevenir problemas de caché
<IfModule mod_headers.c>
  Header append Vary Accept env=REQUEST_image
</IfModule>

Estas reglas funcionan de la siguiente manera: cuando un navegador solicita un archivo JPEG o PNG, el servidor verifica si el navegador envía una cabecera Accept: image/webp. Si lo hace, y existe una versión .webp del archivo en el disco, el servidor sirve de forma transparente el archivo WebP en su lugar. La cabecera Vary: Accept asegura que los proxies de caché almacenen versiones separadas para navegadores compatibles con WebP y navegadores que no lo son.

Asegúrate de que mod_rewrite, mod_mime y mod_headers están activados en tu instalación de Apache. La mayoría de los entornos de alojamiento compartido los tienen activados por defecto, pero puedes verificarlo con tu proveedor de hosting.

Configuración de Nginx

Para tiendas que ejecutan Nginx, la configuración va en tu bloque server o en un bloque location dentro del archivo de configuración de tu sitio:

map $http_accept $webp_suffix {
  default "";
  "~*image/webp" ".webp";
}

server {
  # ... configuración existente ...

  location ~* ^(/img/.+)\.(jpe?g|png)$ {
    set $img_path $1;
    add_header Vary Accept;
    try_files $img_path$webp_suffix $uri =404;
  }
}

La directiva map a nivel http verifica si el cliente envía una cabecera Accept compatible con WebP y establece una variable en consecuencia. El bloque location luego usa try_files para intentar primero servir la versión WebP, recurriendo al formato original si el archivo WebP no existe.

Después de modificar la configuración de Nginx, siempre prueba antes de recargar:

nginx -t
nginx -s reload

Consideraciones sobre CDN

Si usas un CDN como Cloudflare, KeyCDN o Bunny.net delante de tu tienda PrestaShop, la entrega de WebP requiere atención adicional.

Cloudflare

Cloudflare ofrece conversión WebP integrada a través de su funcionalidad Polish (disponible en planes Pro y superiores). Cuando Polish está activado con conversión WebP, Cloudflare convierte automáticamente las imágenes a WebP en el borde—lo que significa que no necesitas generar archivos WebP en tu servidor en absoluto. Sin embargo, ten en cuenta estas advertencias:

• Polish solo funciona para imágenes servidas a través del proxy de Cloudflare (nube naranja activada).
• No convierte imágenes mayores de 10 MB o imágenes con ciertos perfiles de color.
• La conversión inicial añade latencia en la primera petición; las peticiones posteriores se sirven desde la caché.
• Si también generas WebP localmente, podrías terminar con doble conversión, lo que puede degradar ligeramente la calidad.

Si prefieres servir tus propios archivos WebP a través de Cloudflare, asegúrate de que la cabecera Vary: Accept se gestione correctamente. Por defecto, Cloudflare elimina la cabecera Vary. Puede que necesites crear una Cache Rule o usar un Worker para asegurar una negociación de contenido adecuada.

Otros CDN

La mayoría de los CDN modernos soportan la negociación de contenido basada en la cabecera Accept, pero debes activarla explícitamente. Consulta la documentación de tu CDN para "soporte de cabecera Vary" o "negociación de contenido". Algunos CDN requieren que actives "Cache by Accept header" en tus reglas de caché. Sin esto, el CDN puede cachear la primera versión que vea (JPEG o WebP) y servirla a todos los visitantes independientemente del soporte del navegador.

Ajustes de calidad de imagen

Elegir el ajuste de calidad WebP correcto es crucial. Demasiado alto, y pierdes los beneficios de tamaño de archivo; demasiado bajo, y las imágenes de producto se ven borrosas o muestran artefactos de compresión—algo inaceptable para el comercio electrónico.

Estos son los ajustes de calidad recomendados por tipo de imagen:

• Imágenes de producto (vistas grandes/detalladas): Calidad 82-88. Las fotos de producto necesitan verse nítidas, especialmente para artículos donde la textura y el detalle importan (moda, joyería, electrónica). Con calidad 85, una imagen de producto típica de 800x800 se comprime de ~120 KB (JPEG) a ~80 KB (WebP) sin pérdida de calidad visible.
• Banners de categoría e imágenes hero: Calidad 78-82. Estas se visualizan típicamente a tamaños grandes pero con menor escrutinio del detalle fino.
• Miniaturas e imágenes de listado: Calidad 75-80. En tamaños de visualización pequeños, la menor calidad es menos perceptible. Una miniatura con calidad 75 puede ser un 50-60% más pequeña que su equivalente JPEG.
• Logos y gráficos con bordes nítidos: Usa WebP sin pérdida o manténlos como PNG. La compresión con pérdida crea artefactos visibles alrededor del texto y gráficos con bordes duros.

PrestaShop aplica un único ajuste de calidad de forma global. Si necesitas diferentes niveles de calidad para diferentes tipos de imagen, necesitarías modificar la clase ImageManager o usar un módulo de terceros que proporcione un control más granular.

Estrategias de fallback

Aunque el soporte de navegadores para WebP es casi universal en 2026, implementar una estrategia de fallback sigue considerándose una buena práctica, especialmente si tu tienda sirve a clientes que usan dispositivos antiguos o entornos corporativos restringidos.

Negociación de contenido del lado del servidor

Las reglas de .htaccess y Nginx descritas anteriormente implementan la negociación de contenido del lado del servidor. Este es el enfoque recomendado porque es transparente para la capa de aplicación. El navegador solicita la URL original, y el servidor decide qué formato entregar basándose en la cabecera Accept. No se requieren cambios en las plantillas ni en el código del front end.

El elemento HTML Picture

Un enfoque alternativo usa el elemento <picture> para dejar que el navegador elija el mejor formato:

<picture>
  <source srcset="imagen.webp" type="image/webp">
  <img src="imagen.jpg" alt="Nombre del producto">
</picture>

Esto requiere modificar las plantillas de PrestaShop (Smarty o Twig dependiendo de tu versión). Aunque te da control explícito, es más invasivo y más difícil de mantener a través de las actualizaciones del tema. La negociación del lado del servidor es generalmente preferida para despliegues de PrestaShop.

Fallback integrado de PrestaShop

Cuando seleccionas la opción "JPEG/PNG + WebP" en los ajustes de imagen de PrestaShop, el sistema genera ambos formatos. PrestaShop 8.x gestiona el fallback automáticamente en sus plantillas principales, verificando si el archivo WebP existe antes de referenciarlo. Si usas un tema personalizado, verifica que las plantillas de imágenes de producto del tema soporten este enfoque de formato dual.

Problemas comunes y cómo solucionarlos

1. Imágenes rotas después de activar WebP

El problema más común después de activar WebP son imágenes rotas en toda la tienda. Esto suele ocurrir porque:

• Los archivos WebP no fueron generados. Activar el ajuste solo afecta a las imágenes recién subidas. Debes hacer clic en "Regenerar miniaturas" para crear versiones WebP de las imágenes existentes. Para catálogos grandes, usa el comando CLI.
• Los permisos de archivo son incorrectos. El usuario del servidor web (típicamente www-data) debe tener permisos de escritura en el árbol de directorios img/. Después de la regeneración, verifica los permisos: find img/ -name "*.webp" -exec ls -la {} \;
• Las reglas .htaccess entran en conflicto. El .htaccess predeterminado de PrestaShop contiene reglas de reescritura que pueden entrar en conflicto con las reglas de reescritura WebP. Coloca las reglas WebP antes del bloque de reescritura predeterminado de PrestaShop para asegurar que se evalúen primero.

2. Extensiones GD o Imagick faltantes

La generación de WebP requiere que PHP tenga la biblioteca GD o la extensión ImageMagick compilada con soporte WebP. Para verificar:

php -r "echo gd_info()['WebP Support'] ? 'GD WebP OK' : 'GD WebP FALTA';"

O para ImageMagick:

php -r "echo in_array('WEBP', Imagick::queryFormats()) ? 'Imagick WebP OK' : 'Imagick WebP FALTA';"

Si el soporte WebP falta, necesitas recompilar PHP con los flags apropiados o instalar los paquetes correctos. En Debian/Ubuntu: apt-get install libwebp-dev seguido de recompilar la extensión GD, o instalar una versión de PHP que incluya soporte WebP (PHP 7.4+ típicamente lo incluye por defecto).

En alojamiento compartido, si tu compilación de PHP carece de soporte WebP, contacta a tu proveedor de hosting. La mayoría de los entornos de alojamiento modernos incluyen soporte WebP en las instalaciones de PHP 8.x.

3. Problemas de caché

Los problemas relacionados con la caché están entre los problemas WebP más frustrantes:

• Caché del navegador: Después de activar WebP, los navegadores pueden seguir mostrando versiones JPEG/PNG cacheadas. Aconseja a los usuarios hacer una recarga forzada (Ctrl+Shift+R), pero esto se resuelve solo a medida que las imágenes cacheadas expiran.
• Caché del lado del servidor: Si usas Varnish, Redis o cualquier caché de página completa, la caché debe purgarse después de activar WebP. De lo contrario, las páginas cacheadas referenciarán URLs de imágenes o tipos MIME antiguos.
• Caché del CDN: Purga la caché de tu CDN completamente después de activar WebP. Presta especial atención a las claves de caché del CDN—si el CDN no varía la caché por cabecera Accept, puede servir WebP a navegadores que no lo soportan (o viceversa).
• OPcache: Si modificaste archivos PHP como parte de la activación de WebP (por ejemplo, sobreescrituras personalizadas de ImageManager), reinicia OPcache para asegurar que el nuevo código surta efecto.
• Caché Smarty de PrestaShop: Limpia la caché Smarty desde el back office (Parámetros Avanzados > Rendimiento) o elimina el contenido del directorio var/cache/.

4. Tipos MIME incorrectos

Si tu servidor no reconoce la extensión .webp, los navegadores no podrán renderizar las imágenes aunque los archivos sean válidos. Asegúrate de que la configuración de tu servidor incluya el mapeo de tipo MIME correcto: image/webp para archivos .webp. La directiva AddType en la sección de Apache anterior se encarga de esto.

5. Problemas de subida de imágenes en el back office

El back office de PrestaShop valida los formatos de imagen subidos. En algunas versiones, subir una imagen WebP directamente a través del editor de productos puede fallar con un error de validación. Esto se debe a que la lista blanca del validador de subidas puede no incluir WebP. Verifica las extensiones permitidas en Parámetros Avanzados > Administración o en la configuración correspondiente.

6. Incompatibilidad con módulos de terceros

Algunos módulos de terceros (especialmente sliders, módulos de galería y módulos de zoom de imágenes de producto) codifican las extensiones de archivo de imágenes de forma fija o no soportan WebP. Después de activar WebP, prueba todos los módulos que muestran imágenes. Los síntomas comunes incluyen miniaturas faltantes en módulos de slider o funcionalidad de zoom rota. Contacta al desarrollador del módulo para actualizaciones, o asegúrate de que la negociación de contenido del lado del servidor gestione correctamente el fallback.

Verificar la entrega de WebP

Después de la configuración, verifica que las imágenes WebP realmente se están sirviendo. Estos son varios métodos:

Herramientas de desarrollo del navegador

1. Abre tu tienda en Chrome o Firefox.
2. Abre DevTools (F12) y ve a la pestaña Network (Red).
3. Filtra por tipo Img.
4. Recarga la página.
5. Haz clic en cualquier petición de imagen y comprueba las Response Headers (Cabeceras de respuesta). El Content-Type debería ser image/webp.
6. También comprueba la columna Type en la lista de red—debería mostrar "webp" para las imágenes convertidas.

Pruebas por línea de comandos

Usa curl para verificar que la negociación de contenido funciona correctamente:

# Petición con soporte WebP
curl -s -I -H "Accept: image/webp,image/*" https://tutienda.com/img/p/1/2/3/456-home_default.jpg | grep Content-Type
# Esperado: Content-Type: image/webp

# Petición sin soporte WebP
curl -s -I -H "Accept: image/jpeg" https://tutienda.com/img/p/1/2/3/456-home_default.jpg | grep Content-Type
# Esperado: Content-Type: image/jpeg

Herramientas online

Google PageSpeed Insights y Lighthouse marcan las imágenes que no se sirven en formatos de nueva generación. Ejecuta una auditoría Lighthouse en tus páginas de producto—si WebP está correctamente configurado, no deberías ver la recomendación "Serve images in next-gen formats" (Servir imágenes en formatos de nueva generación).

Impacto en el rendimiento

El impacto real en el rendimiento de WebP en una tienda PrestaShop depende del tamaño del catálogo y la composición de la página, pero las mejoras típicas incluyen:

• Reducción total del peso de página: 15-30% en páginas de listado de productos y 10-20% en páginas de detalle de producto, donde las imágenes constituyen la mayoría de los bytes descargados.
• Largest Contentful Paint (LCP): Mejora de 200-600ms en promedio, ya que la imagen principal del producto se carga más rápido. Esta es una de las tres Core Web Vitals y afecta directamente las clasificaciones de búsqueda.
• Time to Interactive (TTI): Mejora marginal, ya que la carga de imágenes compite con la ejecución de JavaScript por el ancho de banda pero no por la CPU.
• Ahorro de ancho de banda del servidor: Para una tienda que sirve 100.000 páginas vistas al mes, WebP puede reducir el uso mensual de ancho de banda en 20-50 GB, potencialmente reduciendo los costes de alojamiento.
• Rendimiento móvil: Las ganancias más significativas son en conexiones móviles, donde los tamaños de imagen reducidos se traducen directamente en tiempos de carga más rápidos en redes 4G/5G. La indexación mobile-first de Google hace esto especialmente importante.

Ten en cuenta que la generación de WebP añade carga de CPU durante el procesamiento de imágenes (subidas y regeneración). En alojamiento compartido con recursos limitados, regenerar las miniaturas de un catálogo grande puede ralentizar temporalmente el servidor. Programa la regeneración durante períodos de bajo tráfico.

Lista de verificación resumen

Para desplegar WebP con éxito en tu tienda PrestaShop, sigue esta lista de verificación:

1. Verifica que PHP tiene GD o ImageMagick con soporte WebP.
2. Activa la generación WebP en los ajustes de imagen de PrestaShop (usa JPEG/PNG + WebP por seguridad).
3. Establece la calidad en 82-85 para un equilibrio óptimo.
4. Regenera todas las miniaturas (usa CLI para catálogos grandes).
5. Añade reglas de negociación de contenido del lado del servidor (.htaccess o configuración Nginx).
6. Configura tu CDN para variar la caché por cabecera Accept.
7. Purga todas las cachés (navegador, servidor, CDN, Smarty, OPcache).
8. Prueba la entrega usando DevTools del navegador y curl.
9. Verifica que los módulos de terceros muestran las imágenes correctamente.
10. Ejecuta una auditoría Lighthouse para confirmar que no quedan advertencias de "formatos de nueva generación".

WebP ya no es opcional para un comercio electrónico competitivo. Con el soporte integrado de PrestaShop y una configuración de servidor sencilla, no hay razón para seguir sirviendo archivos JPEG y PNG sobredimensionados. La configuración lleva menos de una hora, y los beneficios de rendimiento son inmediatos y medibles.