WebP

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:

<IfModule mod_php5.c>
    php_flag engine off

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

# Apache 2.2
<IfModule !mod_authz_core.c>
    Order deny,allow
    Deny from all
    <Files ~ "webp.php|(?i)^.*\.(jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|webp)$">
        Allow from all
    </Files>
</IfModule>

# Apache 2.4
<IfModule mod_authz_core.c>
    Require all denied
    <Files ~ "webp.php|(?i)^.*\.(jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|webp)$">

        Require all granted
    </Files>
</IfModule>

Or for /img/cms/.htaccess

<IfModule mod_php5.c>
    php_flag engine off

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

# Enable webp.php (Speed Pack)
<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|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).

Ha sido muy complicado encontrar una configuración que funcione bien. No soy experto en la configuración de nginx así que supongo que hay otra manera de hacerlo. Si quieres mejorar esta configuración ponte en contacto conmigo, ¡estaré encantado de actualizar este post para ayudar a otras personas!

Aquí está mi solución (sea amable).

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

map $http_accept $webp_enable {
	default 0;
	"~*webp" 1;
}

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:

# Jpresta Speedpack
if ($webp_enable = 1) {
	# Rewrite images URL using a specific extension ".webp_compressor" so we can have specific rules to compress the image/svg
	# if the webp file is not already created.
	rewrite "^/c/([0-9]+)(\-[_a-zA-Z0-9-]*)/(.*)\.(jpg|jpeg|png)$" /img/c/$1$2.webp_compressor last;
	rewrite "^/c/([_a-zA-Z-]+)/(.*)\.(jpg|jpeg|png)$" /img/c/$1.webp_compressor last;
	rewrite "^/([0-9])(\-[_a-zA-Z0-9-]*)?/(\P{M}\p{M}*)*\.(jpg|jpeg|png)$" /img/p/$1/$1$2.webp_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.webp_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.webp_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.webp_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.webp_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.webp_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.webp_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.webp_compressor last;
	# all other images
	rewrite "^(.+)\.(jpg|jpeg|png)$" $1.webp_compressor last;
}

location ~* ^(.+)\.webp_compressor$ {
	# Indicates to proxies that the file content/format depends (Vary) on the "Accept" header
	add_header Vary Accept;

	# Indicates to proxies that the file can be cached for the max duration
	add_header Pragma public;
	add_header Cache-Control "public, must-revalidate, proxy-revalidate";
	expires max;

	# Indicates to nginx not to log access
	access_log off;
	log_not_found off;

	# Try to serve the WEBP file directly or compress the image
	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 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.