digitalDot diseño webLogo Diseño Web digitalDot

Imágenes webP para tiendas Prestashop

30/10/2019

Imágenes webP para tiendas Prestashop

Hace unos cuantos artículos más atrás, os contamos los beneficios de utilizar las imágenes WebP para mejorar el posicionamiento web, y, hoy, os vamos a ofrecer la oportunidad de que mejoréis el posicionamiento de vuestra tienda online gracias a este formato de imagen.

Las imágenes WebP han llegado para quedarse, y más si es Don Google el que insinúa que es mejor utilizarlas.

Su uso es bien sencillo, pero, ¿qué ocurre cuando tienes una tienda online que ya cuenta con miles de imágenes de productos? Pues que optimizarlas y convertirlas puede ser un proceso muy tedioso.

Peeeero, ¡aquí llega el equipo de desarrollo web de digitalDot para darte la solución! ¡¡Vamos al lío!!

¿Cómo convertir imágenes jpg y png en WebP para Prestashop?

El equipo de soporte y mantenimiento de tiendas online y servidores ha preparado un proceso para que, desde la consola del servidor de páginas web, se pueda lanzar dicho proceso y adaptar la tienda de Prestashop para el uso de imágenes WebP.

Aunque os lo vamos a ir contando poco a poco, si tenéis alguna duda en el momento de llevarlo a cabo, podéis contactar con nosotros y realizar el proceso conjuntamente. ¡¿A que somos muy majos?!

1. Iniciar sesión en el servidor por ssh. Aquí recomendamos Putty como programa de gestión y administración de servidores web

2. Instalación de paquetes WebP

apt-get install webp

Seguramente os mostrará una pantalla como la que veréis a continuación, incluyendo las dependencias de los paquetes necesarios.

adaptar prestashop imagenes webp

3. Ahora vamos a realizar una prueba de conversión de una única foto para comprobar el proceso de optimización:

Entra en el directorio de imágenes de Prestashop de tu tienda online:

cd /var/www/hosts/dominio/httpdocs/img/p/

Ahí encontrarás la foto por defecto de Prestashop para cuando no tienes imagen de producto:

Adaptar tienda Prestashop para imágenes webp

Su tamaño es de 11K, es una imagen pequeña, pero vamos a ver cómo quedaría optimizada con el formato WebP

4. Comando de optimización

Usaremos el -q para especificar la calidad del formato, nosotros optaremos por 90% y usaremos el -o para el nombre de salida, en este caso vamos a utilizar el mismo nombre que tiene la imagen seguido de webp.

De esta forma, luego en el htaccess, será más sencillo crear una regla para intercambiar todas las fotografías.

Este es el resultado del comando:

Comando optimización imágenes webp

Hemos conseguido reducir una foto en un 50% de su tamaño inicial.

Optimización de imágenes webp

5. Optimización masiva de imágenes WebP en Prestashop

Una vez que ya sabemos usar el comando vamos a optimizar todas las fotos de los productos de una tienda online creada en Prestashop. Lo que deberemos hacer es ejecutar el siguiente comando que buscará todas las fotos jpg y las convertirá a WebP.

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

Deberemos repetir este mismo proceso para imágenes png

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

Una vez realizado, nos iremos a una página de producto, y obtendremos la foto jpg. Si intentamos entrar a esa url y ponemos al final del .jpg .webp nos encontraremos con un error 404, o lo que es lo mismo, página no encontrada.

Esto ocurre porque no hemos adaptado el htaccess para permitir el uso de imágenes WebP.

Preparar htaccess para el uso de imágenes WebP

Primero, en la sección htaccess de Prestashop 1.7 añadimos una línea continua permitiendo .webp, posteriomente debemos hacer todas las rutas de imágenes permitiendo primero la redirección a webp, este paso lo hemos actualizado en las últimas tiendas online, os lo hemos facilitado también para que podáis copiarlo en vuestro ecommerce.

# Images
RewriteCond %{HTTP_HOST} ^tiendaonline.com$
RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg.webp [L]
RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg.webp$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg.webp [L]
RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]
RewriteCond %{HTTP_HOST} ^tiendaonline.com$
RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.jpg.webp [L]
RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.jpg.webp [L]
RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.jpg [L]
RewriteCond %{HTTP_HOST} ^tiendaonline.com$
RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.jpg.webp [L]
RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.jpg.webp [L]
RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.jpg [L]
RewriteCond %{HTTP_HOST} ^tiendaonline.com$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg.webp [L]
RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg.webp [L]
RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg [L]
RewriteCond %{HTTP_HOST} ^tiendaonline.com$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg.webp [L]
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg.webp [L]
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg [L]
RewriteCond %{HTTP_HOST} ^tiendaonline.com$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg.webp [L]
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg.webp [L]
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg [L]
RewriteCond %{HTTP_HOST} ^tiendaonline.com$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg.webp [L]
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg.webp [L]
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg [L]
RewriteCond %{HTTP_HOST} ^tiendaonline.com$
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg.webp [L]
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg.webp$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg.webp [L]
RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg [L]
RewriteCond %{HTTP_HOST} ^tiendaonline.com$
RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2$3.jpg.webp [L]
RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg.webp$ %{ENV:REWRITEBASE}img/c/$1$2$3.jpg.webp [L]
RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2$3.jpg [L]
RewriteCond %{HTTP_HOST} ^tiendaonline.com$
RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2.jpg.webp [L]
RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg.webp$ %{ENV:REWRITEBASE}img/c/$1$2.jpg.webp [L]
RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2.jpg [L]
# AlphaImageLoader for IE and fancybox RewriteRule ^images_ie/?([^/]+)\.(jpe?g|png|gif|webp)$ js/jquery/plugins/fancybox/images/$1.$2 [L]

Seguido a la última línea y siempre dentro de la etiqueta añadimos:

Comando htaccess webp

# Check if browser supports WebP images
RewriteCond %{HTTP_ACCEPT} image/webp
# Check if WebP replacement image exists
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
# Serve WebP image instead
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp]

Añadimos </ifModule> que es el fin de mod_rewrite:

Htaccess para imágenes webp

Os lo ponemos en texto por si preferís copiar y pegar:

<IfModule mod_headers.c>
Header append Vary Accept env=REQUEST_image
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>

Nosotros hemos añadido, además, en la función modexpires, un mes de cacheo para las imágenes con formato WebP.

Htaccess para imágenes webp

<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/webp "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType text/css "access plus 1 week" ExpiresByType text/javascript "access plus 1 week" ExpiresByType application/javascript "access plus 1 week" ExpiresByType application/x-javascript "access plus 1 week" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/vnd.microsoft.icon "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType font/opentype "access plus 1 year" ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-otf "access plus 1 year" </IfModule>

Bien parece que ya lo tenemos todo. ¡Pues no! porque activar el uso del formato WebP en Prestashop 1.7 es algo más complejo que en un WordPress ?

Ahora, si volvemos a intentar entrar en la url de una foto añadiendo .webp encontraríamos un error de acceso denegado.

El motivo es que Prestashop tiene en la carpeta img otro htaccess para controlar qué tipos de archivo permite mostrar dentro y aquí debemos añadir webp.

Htaccess con permisos imágenes webp

Perfecto, ahora sí que podremos acceder a la foto webp sin problemas. Prestashop hará su remplazo de nombres interno para mostrar la foto correctamente.

En digitalDot ya hemos cambiado el formato de miles de imágenes de las tiendas online de nuestros clientes, si quieres que cambiemos también las de tu Prestashop puedes contactar con el equipo de desarrollo web de digitalDot y solicitarlo.

Imágenes webp en tienda online prestashop
Que os ha parecido este truco de WPO que hará que nuestra tienda online consiga mejor posicionamiento SEO, mejorando la experiencia de usuario de Prestashop.

Estamos trabajando sobre un módulo para prestashop que nos permita controlar mucho fácil este proceso de aplicar WebP sobre prestashop.

Pero como nuestro equipo de mantenimiento de prestashop debe continuar optimizando las tiendas online que tenemos, nos hemos encontrado con una versión Centos 7 en un Hosting como servidor Virtualizado.

¿Como permitir WPO y optimizar fotos a Web en Centos?

Para ello vamos a convertir a web todas las fotos para ello debemos instalar nuestro paquete libwebp-tools, con el comando:

yum install libwebp-tools

Ya tenemos todo lo necesario para que nuestro Servidor Centos, pueda optimizar todas las fotos de una tienda online y conseguir que nuestro Prestashop cargue más rápido..

crossmenuchevron-down