WebP / AVIF

If you are using Nginx, then make sure your configuration is as follow:

"Proxy mode" must be ON, other options must be OFF.

Si después de instalar el módulo algunas imágenes de tu tienda, como el logotipo, las imágenes de las páginas CMS, las imágenes en el back office, etc., no se muestran, probablemente sea debido a un archivo .htaccess en los directorios /img y /img/cms. Este archivo bloquea todos los scripts PHP, incluso si se trata solo de una redirección (el script no está realmente en este directorio).

Para corregir este problema, debes añadir una excepción para nuestro convertidor webp.php de la siguiente manera:

# Disable PHP globally unless explicitly re-enabled
<IfModule mod_php5.c>
    php_flag engine off

    # Enable PHP execution only for avif.php and webp.php (used by Speed Pack)
    <Files "avif.php">
        php_flag engine on
    </Files>
    <Files "webp.php">
        php_flag engine on
    </Files>
</IfModule>

# Apache 2.2 access control
<IfModule !mod_authz_core.c>
    Order deny,allow
    Deny from all

    # Allow access to static image and video files
    <FilesMatch "\.(jpe?g|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|avif|webp)$">
        Allow from all
    </FilesMatch>

    # Allow access to avif.php and webp.php (for image conversion)
    <Files "avif.php">
        Allow from all
    </Files>
    <Files "webp.php">
        Allow from all
    </Files>
</IfModule>

# Apache 2.4 access control
<IfModule mod_authz_core.c>
    Require all denied

    # Allow access to static image and video files
    <FilesMatch "\.(jpe?g|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|avif|webp)$">
        Require all granted
    </FilesMatch>

    # Allow access to avif.php and webp.php (for image conversion)
    <Files "avif.php">
        Require all granted
    </Files>
    <Files "webp.php">
        Require all granted
    </Files>
</IfModule>

Ou pour /img/cms/.htaccess

<IfModule mod_php5.c>
    php_flag engine off

    # Enable PHP only for avif.php and webp.php (Speed Pack)
    <Files "avif.php">
        php_flag engine on
    </Files>
    <Files "webp.php">
        php_flag engine on
    </Files>

</IfModule>

# Enable avif.php and webp.php (Speed Pack)
<Files "avif.php">
    Order allow,deny
    Allow from all
</Files>
<Files "webp.php">
    Order allow,deny
    Allow from all
</Files>


deny from all
<Files ~ "(?i)^.*\.(jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|avif|webp)$">
	order deny,allow
	allow from all
</Files>

Sí, todas las imágenes de su tienda se convertirán automáticamente al formato WEBP. Incluso las imágenes de CMS u otros módulos como blog.

¡SÍ usted todavía necesita un módulo WEBP para Prestashop! Debido a que la función tiene un error en PS 8.0. Se debe fijar en PS 8.1 pero voy a comprobar esto tan pronto como se libera porque no sé si las imágenes JPG se mostrará a los navegadores que no pueden leer el formato WEBP como Safari (iPhone).

Esta configuración permite que Nginx detecte automáticamente el formato de imagen más optimizado compatible con el navegador del visitante: AVIF como prioridad, en su defecto WEBP, y si ninguno es compatible, la imagen original (JPG/PNG). El servidor reescribe las URL de las imágenes para redirigirlas a un script de compresión (avif.php o webp.php) que genera el archivo si es necesario.

Las cabeceras HTTP (Vary: Accept, Cache-Control, etc.) garantizan que los archivos se almacenen correctamente en caché en navegadores y proxys, entregando siempre la mejor versión posible a cada usuario.

Antes de la sección "server", coloca este código:

# Detect best supported format (AVIF > WEBP > none)
map $http_accept $format_compressor {
    default "";
    "~*avif" "avif";
    "~*webp" "webp";
}

Nos dirá si el navegador del visitante puede leer imágenes WEBP.

Probablemente tengas varias líneas de "rewrite" para todas las imágenes, coloca el siguiente código justo antes:

# AVIF/WEBP priority handling
if ($format_compressor != "") {
    rewrite "^/c/([0-9]+)(\-[_a-zA-Z0-9-]*)/(.*)\.(jpg|jpeg|png)$" /img/c/$1$2.${format_compressor}_compressor last;
    rewrite "^/c/([_a-zA-Z-]+)/(.*)\.(jpg|jpeg|png)$" /img/c/$1.${format_compressor}_compressor last;
    rewrite "^/([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$1$2.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$1$2$3.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$1$2$3$4.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$1$2$3$4$5.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8.${format_compressor}_compressor last;
    rewrite "^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9.${format_compressor}_compressor last;
    rewrite "^(.+)\.(jpg|jpeg|png)$" $1.${format_compressor}_compressor last;
}

# Location for AVIF
location ~* ^(.+)\.avif_compressor$ {
    add_header Vary Accept;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
    expires max;
    access_log off;
    log_not_found off;

    set $url_avif_compressor "/modules/jprestaspeedpack/controllers/front/avif.php?src=$1.jpg";
    try_files $1.avif $url_avif_compressor;
}

# Location for WEBP
location ~* ^(.+)\.webp_compressor$ {
    add_header Vary Accept;
    add_header Pragma public;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
    expires max;
    access_log off;
    log_not_found off;

    set $url_webp_compressor "/modules/jprestaspeedpack/controllers/front/webp.php?src=$1.jpg";
    try_files $1.webp $url_webp_compressor;
}

ADVERTENCIA: si está utilizando el módulo de compresión AVIF/WEBP independiente, debe reemplazar 'jprestaspeedpack' por 'jprestawebp'.

¡Ponte en contacto conmigo si necesitas ayuda o si puedes mejorar el script!

sí, los navegadores que no puedan leer el formato WEBP obtendrán el formato original (JPG/PNG).

El módulo no llama al Hook que permite la actualización.

Debe modificar la función imageResize() en el archivo /modules/prestablog/prestablog.php:

Reemplace esto

         return ImageManager::write('jpg', $imagen_dest, $archivo_después);

Por esto

         $ret = ImageManager::write('jpg', $imagen_destino, $archivo_después);

 Hook::exec('actionOnImageResizeAfter', ['dst_file' => $file_after, 'file_type' => 'jpg']);

 return $ret;

después tus imágenes se actualizarán.

No, el módulo solo convierte imágenes JPG/PNG a formato WEBP. Se recomienda importar imágenes como JPG porque algunos navegadores aún no pueden cargar archivos WEBP. Además, creo que los JPG son mejores como imágenes originales porque Prestashop crea múltiples formatos/tamaños de imágenes, por lo que la imagen original debe ser de buena calidad.

El porcentaje que puede ajustar en el módulo corresponde a un nivel de calidad más que a un porcentaje de compresión. 100 % significa la calidad máxima sin pérdida, mientras que 50 % representa una calidad reducida con mayor compresión.

Como regla general, 80 % ofrece un buen compromiso entre calidad y tamaño de archivo. Sin embargo, la elección depende de sus necesidades y del tipo de imagen utilizada. Por ello, ponemos a su disposición una herramienta de comparación directamente en el módulo de Prestashop.

AVIF es un formato de imagen nuevo y muy eficiente, más reciente que WEBP. Permite reducir significativamente el tamaño de las imágenes sin perder calidad visual.

En promedio, AVIF comprime las imágenes hasta un 50 % más que WEBP, que ya reduce el tamaño entre un 30 % y 40 % en comparación con JPEG. Esto se traduce en una web más rápida, mejor experiencia para el usuario y mejor posicionamiento SEO.