WebP activado en PrestaShop 8 y la tienda sigue sirviendo JPG

Gustavo, de la comunidad, lo avisó cuando muchos estaban pasando a 8.1: comprobad que vuestra plantilla sea compatible con el WebP que PrestaShop ya genera solo. Un mes después un compañero lo activó y la tienda seguía sirviendo URL en JPG. No era un fallo de PrestaShop: su plantilla, una comercial muy extendida, todavía no imprimía las imágenes en el formato nuevo. Como resumió Gustavo: nativo es, pero si la plantilla no añade el código, es imposible que se muestre.

Qué hace PrestaShop y qué tiene que hacer la plantilla

Desde la 8.1, en Diseño → Ajustes de imágenes puedes elegir qué formatos genera PrestaShop además del JPG: WebP y, si el servidor lo admite, AVIF. Según la versión, puede que antes tengas que activar la función entre las experimentales de Parámetros avanzados. Al regenerar las miniaturas, junto a cada 123-large_default.jpg aparece su 123-large_default.webp.

Generarlas es la mitad del trabajo. La otra mitad es que la plantilla las pida, normalmente con una etiqueta <picture> que ofrece el WebP al navegador y deja el JPG de reserva. El tema Classic actual ya lo hace. Muchos temas comerciales tardaron en adaptarse, y un tema anterior a la 8 no lo hará nunca solo.

Cómo saber dónde está el fallo

1. Mira si existen los ficheros. Entra en la carpeta de un producto, por ejemplo img/p/1/2/3/. Si no hay ningún .webp, falta regenerar las miniaturas después de activar el formato.
2. Mira qué pide la página. Abre una ficha con las herramientas del navegador, pestaña Red, filtro de imágenes. Si los .webp existen en el servidor pero la página solo descarga .jpg, el problema es la plantilla.
3. Si usas nginx, revisa las reglas de reescritura de imágenes. Un compañero compartió las suyas y solo contemplaban .jpg: con ellas, las URL amigables de los .webp no llegan a ningún sitio.

El código que falta en la plantilla

Gustavo compartió el fragmento que deben tener las plantillas compatibles. La idea, ordenada y para la imagen grande de la ficha, es esta:

<picture>
  {if !empty($product.default_image.bySize.large_default.sources.avif)}
    <source srcset="{$product.default_image.bySize.large_default.sources.avif}" type="image/avif">
  {/if}
  {if !empty($product.default_image.bySize.large_default.sources.webp)}
    <source srcset="{$product.default_image.bySize.large_default.sources.webp}" type="image/webp">
  {/if}
  <img src="{$product.default_image.bySize.large_default.url}"
       alt="{$product.name}" loading="lazy">
</picture>

Hay que repetirlo en cada plantilla donde salen imágenes: ficha, miniaturas de listado, carrito, carruseles. Hazlo en un tema hijo, no en el tema original, o la próxima actualización de la plantilla lo borrará. Pruébalo antes en una copia de la tienda. Un detalle del fragmento original: repetía la misma URL con distintos anchos (320w, 720w, 1440w). Esos descriptores sirven para ofrecer imágenes de tamaños distintos; con una sola URL sobran.

Si tu plantilla es comercial, lo razonable es lo que dijo Gustavo: pedir al desarrollador que la actualice a las opciones nuevas de PrestaShop. El compañero del hilo lo estudió con su proveedor.

Lo que más pesa: la compresión

Del mismo hilo salió el otro consejo que más se nota. El compañero se quejaba de imágenes de hasta 2 MB en la tienda. Gustavo:

• La imagen original puede pesar lo que quieras; no se sirve. Lo que importa son las miniaturas.
• Una miniatura grande de ficha no debería pasar de unos 200 KB, y las medianas de listado, de 100 KB.
• Baja la calidad de compresión en Diseño → Ajustes de imágenes. Pasar de 90 a 75 puede reducir el tamaño a la mitad y en fotos sin mucho detalle ni se nota: imágenes de 140 KB bajan a 70 KB.
• Lo que pesa son los píxeles y la compresión. Los ppp (puntos por pulgada) son un dato para imprimir; para la web, prepara las fotos a la resolución en píxeles que vas a usar.

Después de cambiar formato o calidad hay que regenerar las miniaturas. En catálogos grandes, regenera por tipo de imagen y no todo de golpe, para no chocar con el tiempo máximo del servidor.

Esto salió en @PrestashopEsp, la mayor comunidad PrestaShop de España en Telegram. Ver la conversación