Imágenes webP para tiendas Prestashop

30 de octubre de 2019

Tiempo de lectura 12 min

Contenido

¿Cómo convertir imágenes jpg y png en WebP para Prestashop?
1. Preparar htaccess para el uso de imágenes WebP
¿Como permitir WPO y optimizar fotos a Web en Centos?
Preguntas frecuentes sobre imágenes WebP en Prestashop

Contenido

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.

Desde 2024, la optimización de imágenes ya no es solo una recomendación para mejorar el SEO, es un requisito técnico imprescindible para cualquier tienda online. Google evalúa el rendimiento visual de una web a través de métricas como Core Web Vitals, donde el peso y formato de las imágenes juegan un papel decisivo en la velocidad de carga, la experiencia de usuario y la conversión.

Y, ¡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.

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:

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

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:

# 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:

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.

<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.

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.

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..

Preguntas frecuentes sobre imágenes WebP en Prestashop

¿Prestashop es compatible con imágenes WebP de forma nativa?

Prestashop no convierte las imágenes a WebP de forma automática por defecto, pero sí es totalmente compatible con este formato. Para utilizarlas correctamente es necesario generar las versiones WebP de las imágenes y configurar el servidor para que las entregue cuando el navegador del usuario las soporte.

¿Google indexa correctamente las imágenes WebP?

Sí. Google indexa imágenes WebP sin ningún problema desde hace años. De hecho, es uno de los formatos recomendados por Google para mejorar el rendimiento de las páginas web y optimizar los tiempos de carga. Usar WebP no afecta negativamente al SEO, sino todo lo contrario.

¿Las imágenes WebP se muestran bien en todos los navegadores?

Actualmente, todos los navegadores modernos soportan WebP: Chrome, Firefox, Edge, Safari y Opera. En los pocos casos donde no está disponible, el servidor puede entregar automáticamente la imagen en formato JPG o PNG como alternativa, manteniendo la compatibilidad total.

¿Puedo usar WebP sin cambiar las URLs de mis imágenes?

Sí. Una de las grandes ventajas de WebP es que puede implementarse sin modificar las URLs originales de las imágenes. Mediante reglas de servidor, Prestashop seguirá usando las mismas rutas y el navegador recibirá automáticamente la versión WebP si existe.

¿WebP mejora realmente la velocidad de carga de una tienda Prestashop?

Sí. En una tienda online, las imágenes suelen representar más del 60% del peso total de una página. Al convertirlas a WebP, es habitual reducir su tamaño entre un 40% y un 70%, lo que se traduce en una mejora directa de los tiempos de carga y de las métricas de rendimiento.