Imágenes WebP en PrestaShop

Esto lo hace Carlos Cámara CTO de hepta.es, desarrollador web especializado en PrestaShop y Joomla! y  Antonio Torres CTO de devblinders.com, analista programador especializado en PrestaShop.

Imágenes WebP en PrestaShop

¿Qué són las imágenes WebP?

Las imágenes WebP son un formato de codificación de imágenes propuesto por Google que permite reducir el tamaño del fichero de la imagen con respecto a la misma imagen en jpg o png y manteniendo la misma calidad de la imagen.

El formato de imagen WebP se anunció en 2010 pero aun está lejos de ser un formato ampliamente difundido y utilizado, aunque lo estemos usando sin darnos cuenta por ejemplo en YouTube o en Facebook si lo visitamos desde un móvil Android.

¿Cómo mejoran la carga las imágenes WebP?

Según Google, cuando cambiaron las miniaturas de YouTube a WebP consiguieron una página un 10% más rápida.

Algunos usuarios han realizado sus propios análisis con imágenes de su sitio web y los resultados son muy interesantes: https://havecamerawilltravel.com/photographer/webp-website/

• Aplicando la compresión con una calidad del 100% de calidad la mejora está en torno a un 10%
• Aplicando la compresión con una calidad del 90% ya bajamos a un 50% de mejora
• Usando una calidad del 80% ya podemos alcanzar compresiones de hasta el 90% del tamaño original.
• Para conversión a una compresión sin perdidas (lossless), no hay mejora y en general los ficheros son más grandes.

Es interesante hacer una prueba con algunas imágenes típicas de tus productos para ver qué parámetros de calidad puedes usar y cuánto es la mejora en tu sitio.

¿Cómo podemos usar imágenes WebP en PrestaShop?

Lo primero que tenemos que tener en cuenta es que a pesar de que lleva con nosotros desde 2010, el formato WebP no está soportado por todos los navegadores que hay en el mercado:

https://caniuse.com/?search=webp

Por ejemplo los sistemas de Apple no incorporaron el soporte a este formato hasta el año pasado. Por eso es interesante facilitar una imagen alternativa en jpg para que los navegadores puedan usar la que más les convenga.

Modificando las imágenes y la plantilla 

• Cronjob para convertir la imagen en webp
  • Para imágenes jpg:
    
    find ./ -type f -name '*.jpg' -exec sh -c ' cwebp -q 90 $1 -o "${1%.jpg}.jpg.webp"' _ {} \;
  • Para imágenes png:
    find ./ -type f -name '*.png' -exec sh -c ' cwebp -q 90 $1 -o "${1%.png}.png.webp"' _ {} \;
    
    
• Cambiár el código del tema para añadir la imagen webp

Módulos para convertir nuestras imágenes en WebP

https://addons.prestashop.com/en/search?search_query=webp

https://kijam.com/tienda/p/soporte-de-imagenes-webp-para-prestashop/

https://www.sunnytoo.com/product/webp-module-prestashop-smaller-images-faster-loading

Alternativas a usar WebP en PrestaShop

• Optimizar todas las fotografías de producto antes de subirlas al sitio
• Habilitar alguna técnica de carga en diferido (lazy load) de las imágenes

Conclusión:

• Las imágenes WebP son un formato de nueva generación que reduce aun más el tamaño de la imagen
• Son compatibles los navegadores más actuales pero no con navegadores y sistemas de más de dos años.
• En PrestaShop la forma más sencilla es incluir un módulo que las gestione fácilmente

Y esto es todo en este último podcast y te pedimos por favor que nos ayudes escribiendo tu feedback sobre qué te ha parecido este podcast y tus críticas, así como temas que te gustaría que hablásemos, tanto en redes sociales como Apple Podcast, o con tus me gusta en Ivoox

Recordarte también que hemos creado un nuevo canal de Youtube, en el grupo de Telegram sobre PrestaShop, y el nuevo grupo de Signal sobre PrestaShop