M贸dulos para servir im谩genes WebP en Magento2

Vamos a ver las distintas posibilidades que tiene nuestro ecommerce para que soporte im谩genes WebP

Profile picture for user admin
Por Way2 Ecommerce
24 Sep 2021

El formato JPG es un formato de compresi贸n ya antiguo, que actualmente est谩 siendo sustituido por WebP (un formato moderno ya soportado por la mayor铆a de navegadores) o Avif (que es un nuevo formato que supera en compresi贸n incluso a WebP, pero a煤n no est谩 soportado por todos). Por soporte en navegadores hablaremos de WebP.

WebP es un formato de imagen moderno que proporciona una compresi贸n superior a jpg sin p茅rdida de calidad perceptible en la web. Con WebP se pueden crear im谩genes que pesen menos con una calidad 贸ptima, esto hace que la carga de las im谩genes de una web sea m谩s r谩pida, y por lo tanto la carga total de cada p谩gina, tambi茅n se ve reducida.

Tu ecommerce ya deber铆a servir im谩genes WebP

WebP hace que las im谩genes PNG se reduzcan en tama帽o alrededor de un 26%, y que las im谩genes JPG lo hagan entre un 25% y un 34% aproximadamente, adem谩s soportan transparencia (por eso son compatibles con los PNG). En definitiva, por el bien de tu Magento2, deber铆as servir im谩genes en formato WebP en vez de JPG o PNG.

Distintas posibilidades para servir WebP en Magento2

Disponemos de 2 posibilidades a la hora de servir im谩genes WebP en lugar de JPG o PNG en nuestro ecommerce:

  1. Utilizar un CDN tipo imagekit.io o sirv.com: Normalmente, dependiendo de la cantidad de tr谩fico y del espacio ocupado, suelen tener cuotas mensuales. Un punto a favor es que suele ser muy f谩cil de implementar y adem谩s puede beneficiar tambi茅n agregar al CDN otros ficheros est谩ticos (css, js, html...). Otra cosa positiva del CDN es que hace copias de los ficheros en distintos servidores alrededor del mundo, lo que hace que los usuarios de tu web reciban estos ficheros de forma instant谩nea est茅n donde est茅n.
  2. Utilizar un m贸dulo que convierta las im谩genes: Hay unos cuantos disponibles y a continuaci贸n vamos a ver algunos de ellos.

M贸dulos disponibles para Magento2

Normalmente los m贸dulos disponibles lo que hacen es intercambiar el tag <img/> de la imagen por un <picture/>, ya que al picture se le pueden agregar dentro distintos <sources/>, o fuentes, que son las im谩genes a descargar dependiendo de los par谩metros agregados, por ejemplo, en el siguiente c贸digo si el navegador soporta el type image/webp servir谩 la imagen indicada en srcset:


<picture>
聽 <source srcset="example.webp" type="image/webp" />
聽 <source srcset="example.png" type="image/png" />
聽 <img src="example.png" />
</picture>

Adem谩s, se pueden agregar otros par谩metros para seg煤n qu茅 anchos de dispositivo, o seg煤n qu茅 orientaci贸n (pantalla en horizontal o vertical), esto hace que la etiqueta <picture/> sea una de las claves para optimizar Magento2 a nivel de rendimiento del front.

Amasty: Lazy Load for Magento 2

https://amasty.com/lazy-load-for-magento-2.html

Es un m贸dulo 鈥減remium鈥 que dispone de una gran cantidad de opciones, adem谩s de optimizar a WebP se centra en la funcionalidad de Lazy Load. Permite precargar solamente las im谩genes visibles para cada dispositivo, muy 煤til para resolver los problemas que casi todos los ecommerce tienen cuando pasan por PageSpeed Insights. Crea resoluciones distintas para cada dispositivo. Tambi茅n hace una optimizaci贸n de im谩genes de forma masiva, de forma manual o programada. En algunos de nuestros clientes nos hemos encontrado alg煤n problema de compatibilidad con scrolls infinitos, por ejemplo, pero se han podido resolver sin problema. Adem谩s Amasty ofrece tres packs distintos de este m贸dulo el primero ni siquiera convierte a WebP (109$), para esta funcionalidad se partir铆a del segundo (259$), pero el 煤ltimo incluso agrega extras, como scroll infinito o ajax al comprar (599$).

Webp de Amasty

Jajuma: WebP Optimized Images o Ultimate Image Optimizer

https://marketplace.magento.com/jajuma-module-webpimages.html
https://marketplace.magento.com/jajuma-module-imageoptimizerultimate.html

Jajuma no es tan conocida como Amasty, es una empresa alemana que lleva tiempo dando soporte WebP a Magento2 con su m贸dulo 鈥淲ebP Optimized Images鈥 (99$), y ahora ha puesto a la venta otro nuevo m贸dulo que se encargar谩 de nuevos formatos, 鈥淯ltimate Image Optimizer鈥 (199$). Este nuevo m贸dulo sirve im谩genes Avif si el navegador lo soporta y agrega funcionalidades de Lazy Loading. Es una buena opci贸n, el m贸dulo parece que tiene una buena relaci贸n calidad - precio y es la opci贸n que tanto Google como el marketplace de Magento ofrecen como primera opci贸n.

Jajuma WebP

Magefan: Magento 2 WebP Images Extension (149$)

https://magefan.com/magento-2-webp-optimized-images

Nos parece un m贸dulo f谩cil de utilizar y que podr铆a ser una opci贸n sencilla y perfectamente v谩lida para tener soporte WebP. Una opci贸n que nos gusta es la opci贸n de saltarse directorios en media o en static, cuando otros ni siquiera contemplan que la carpeta static deba tener soporte WebP. Otra opci贸n que tiene es la de convertir im谩genes de sitios externos (descargando la imagen al servidor donde se encuentre el proyecto):

Magefan WebP

Mirasvit: Magento 2 Google PageSpeed Optimize (159$)

https://mirasvit.com/magento-2-google-page-speed-optimizer.html

Es un m贸dulo perfecto si quieres aumentar las puntuaciones de PageSpeed, est谩 orientado a ese fin. Adem谩s de optimizaci贸n de im谩genes a WebP tambi茅n hace minificaci贸n de html, css y js, lazyload y tiene un monitor de comparaci贸n de puntuaciones que integra dentro de la administraci贸n de Magento. Solamente se centra en optimizar WebP en la carpeta 鈥渕edia鈥, no act煤a dentro de 鈥渟tatic鈥.

Mirasvit WebP

Yireo: Webp 2 (Free)

https://www.yireo.com/software/magento-extensions/webp2

Para ser una opci贸n gratuita, est谩 muy logrado. Se puede instalar f谩cilmente por composer, teniendo dependencias externas, concretamente de la librer铆a rosell-dk/webp-convert. La 煤nica pega que tendr铆a es que, si importas grandes cantidades de productos, justo despu茅s habr谩 momentos con la CPU del sistema al m谩ximo, ya que genera las im谩genes webp bajo demanda. Una vez generadas las im谩genes funcionar谩 perfectamente.

Lanfocoder: Magento 2 WebP Images (Free)

Es un fork del m贸dulo de Yireo que en teor铆a actualiza funciones y soluciona problemas, pero lo cierto es que el m贸dulo de Yireo est谩 m谩s actualizado y mejor mantenido, as铆 que no lo tendremos en cuenta.

MageComp: Magento 2 WebP Image Support (79$)

Este m贸dulo agrega soporte para visualizar WebP images en el wysiwyg de las p谩ginas o bloques, no lo vemos como una opci贸n porque esto har谩 que la imagen WebP sea la 煤nica opci贸n, y si no es soportada por el navegador no se mostrar谩.

Cualquiera de los m贸dulos enlazados ser铆a una opci贸n perfectamente v谩lida, dependiendo de las necesidades de cada proyecto y del presupuesto, as铆 que si tu Magento aun no sirve im谩genes WebP y no tienes presupuesto para contratar un CDN (que soporte WebP) no dudes en consultarnos cualquier duda al respecto.

驴Alg煤n problema implantando WebP?

Si tienes cualquier problema a la hora de implementar soporte para WebP en tu Magento2 o el m贸dulo que has agregado a tu ecommerce para este fin no funciona como tiene que funcionar, no dudes en contactar con nosotros, pondremos a tu servicio toda nuestra experiencia para solucionarlo.

Profile picture for user admin
Way2 Ecommerce

Expertos en Magento ecommerce. Definimos, desarrollamos, mantenemos y potenciamos tiendas online de la m谩s alta calidad para que tu ecommerce supere todas tus expectativas.