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?

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 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 Prestadshop. 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}.jpg.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

Preparar htaccess para imágenes webp

Seguido a la última línea y siempre dentro de la etiqueta <IfModule mod_rewrite.c> 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
Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

Otras Noticias

  • ¿Cómo subir una aplicación móvil a Google...

  • Fallo de seguridad en Prestashop...

  • Comparativa eCommerce PrestaShop VS Magento...

  • Magento 2, novedades para nuestra tienda onli...