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:
- 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.
- 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 “premium” 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$).
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 “WebP Optimized Images” (99$), y ahora ha puesto a la venta otro nuevo módulo que se encargará de nuevos formatos, “Ultimate 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.
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):
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 “media”, no actúa dentro de “static”.
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.
