Como instalar la libreria webp en un servidor de PrestaShop

Se necesita acceso root para seguir este manual. Está enfocado en usarlo en servidores cPanel. Pero puede usarse en cualquier servidor CentOS simplemente cambiando las rutas donde están almacenadas 


Si quieres que habilitemos las imágenes .webp en tu tienda de PrestaShop solo debes abrirnos un ticket de Soporte.


Este tutorial puede servir también para cualquier web (Joomla, Drupal, WordPress, web en php o html, etc)


Instalación en el servidor


Si queremos instalar la librería webp en un servidor CentOS para convertir imágenes jpg y png a formato webp correremos el siguiente comando:


$ yum -y install libwebp-tools


Una vez instalada esta librería podremos convertir a webp las imágenes del servidor.



Convertir imágenes jpg en cPanel


Para convertir a webp las imágenes jpg correremos:


$ find /home/usuariocpanel/public_html -type f -name '*.jpg' -exec sh -c 'cwebp -q 80 $1 -o "${1%.jpg}.webp"' _ {} \;



Convertir imágenes png en cPanel


Lo mismo haremos pero ahora crearemos una copia de la imagen png en webp:


$ find /home/usuariocpanel/public_html -type f -name '*.png' -exec sh -c 'cwebp -q 80 $1 -o "${1%.png}.webp"' _ {} \;



Habilitar las imágenes webp en PrestaShop


NOTA IMPORTANTE: PrestaShop usa muchas imágenes en sus productos en distintos tamaños, al aplicar estos comandos vamos a duplicar el número de imágenes que existen en la cuenta, por lo que podremos sobrepasar los inodes (número de archivos y carpetas) que tengamos.


Para usar este método con las imágenes de nuestro CMS, primero haremos la duplicación con los comandos de arriba y luego haremos añadiremos estas líneas al principio del archivo .htaccess principal de PrestaShop (normalmente en el public_html):


# Apache 2.2
<IfModule !mod_authz_core.c>
    <Files ~ "(?i)^.*\.(webp)$">
        Allow from all
    </Files>
</IfModule>
# Apache 2.4
<IfModule mod_authz_core.c>
    <Files ~ "(?i)^.*\.(webp)$">
        Require all granted
        allow from all
    </Files>
</IfModule>

RewriteEngine On
<IfModule mod_setenvif.c>
# Vary: Acepta las imágenes jpg y png
SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
</IfModule>

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]

<IfModule mod_headers.c>
    SetEnvIf REDIRECT_accept 1 accept=1
    Header append Vary Accept env=accept
</IfModule>

<IfModule mod_mime.c>
  AddType image/webp .webp
  AddType image/webp .WEBP
</IfModule>


Este código sirve para PrestaShop, pero debería también funcionar para WordPress o Joomla


Una vez introducidos estos datos las imágenes se servirán en formato y tamaño webp.


La extensión de las imágenes seguirán apareciendo como "jpg" o "png, pero el tipo de imagen y sobre todo el tamaño, serán las correspondientes al formato webp creado en los primeros pasos.


Este sistema mantendrá la terminación .jpg de la imagen, pero la servirá como .webp y cambiará el Mime Typeimage/webp.


No hay riesgo para tus imágenes JPG originales, ya que permanecerán y se mostrarán en navegadores no compatibles con .webp.


Si analizamos con la consola las imágenes lo veremos:







PageSpeed Insight pasa el test y reconoce las imágenes como webp




Eliminar los archivos webp en el caso de que ya no queramos usarlos


Si queremos eliminar los archivos .webp que hemos generado porque ya no queremos usarlos, correremos el siguiente comando:


find /home/usuariocpanel/public_html/ -type f -name *.webp -exec rm -f {} \;


¿Ha sido útil esta respuesta? No

Enviar comentario
Por favor ayúdanos a mejorar dejando tus ideas o comentarios