Optimizando Odoo con WebP

Hace un tiempo ya que escribí sobre el formato optimizado de imágenes WebP, un formato potenciado originalmente por Google y que está por convertirse en un standart ya que promete entre un 25 y 34 porciento de reducción de peso para la misma imagen. Quiero revivir este tema, porque sigue siendo un formato poco conocido a la hora de poner un sitio web online, los sitios web se posicionan mejor si pesan poco y es una picardía que Odoo no lo soporte de forma nativa. En su momento advertí de sus bondades pero también de usarlo con cautela, sin embargo, debido a que Safari a partir de Septiembre de 2020 (tanto en escritorio como en móvil) soporta WebP de forma nativa, y que van pasando los meses y los sistemas se actualizan, creo que es el momento idóneo para empezar a usar WebP en algunas partes de los websites que tenemos montados en Odoo. Pero, ¿cómo hacerlo?

WebP en Banners e imágenes

Esta es la forma más sencilla y recomendada, ya que podremos monitorear un número reducido de imágenes y si algo no funciona bien revertirlo. Consiste en cargar la imagen en formato WebP directamente en un módulo personalizado (para la conversión de JPG o PNG a WebP hay muchos servicios gratis online). Luego podremos llamarla en cualquier vista de nuestro website, por ejemplo, si incluimos nuestra imagen en la carpeta recomendada del módulo (static/src/img) y el módulo se llama custom_website, entonces podremos llamarla de esta manera:

<img src="/custom_website/static/src/img/mi_imagen.webp" />

En pocas imágenes a lo mejor el ahorro es mínimo, pero en cantidad o en imágenes grandes (como los banners) les aseguro que es considerable. Además, WebP ya esa soportado en el 88% de los usuarios de internet. Lo que hace que solo un 10% del tráfico no soporte dicho formato.

¿Qué hacemos con ese 10%?

En primera que no es un 10% exacto, es algo así como un 8% real, y comprende solamente a todas las versiones de IE (donde Odoo se ve roto de todas formas), a algunas versiones de Safari aun no actualizadas por la limitación del OS, y a KaiOS que solo es móvil y tiene una cobertura menor al 1%. Yo no me preocuparía, pero una solución puede ser armar un fondo de color pleno donde iría la imagen. Si el navegador lo soporta mostrará la imagen y sino mostrará un color sólido. Otra opción es integrar WebPJS a Odoo, no es algo complejo. No obstante lo que ahorramos en imagen empezamos a usarlo en procesamiento de JS, así que no sé si la solución es tan buena en sitios que no tengan muchas imágenes como para que se justifique. Otra opción muy sencilla de aplicar en vistas web de Odoo para imágenes es la siguiente:

<picture>
  <source srcset="/custom_website/static/src/img/mi_imagen.webp" type="image/webp">
  <img src="/custom_website/static/src/img/mi_imagen.jpg" alt="Imagen">
</picture>

Sin embargo, en algunos casos puede ocurrir que el navegador quiera descargar ambas imágenes, aunque muestre solo una, lo cual resulta problemático también. ¿Dónde usaría yo este tipo de códigos? En sitios específicos que requieran muchas imágenes y donde tengan un fuerte porcentaje de visitas de IE prácticamente cada día. No es un caso normal, pero puede darse, y ahí lo mejor es este tipo de código y esperar que la gente se pase a navegadores más descentes y actualizados. En la mayoría de los casos es muy probable que casi el 100% de nuestros visitantes lo hagan mediante navegadores modernos como Firefox o Chrome, así que no me preocuparía (recurran a Google Analytics para tener esa información, es fundamental, se encuentra en Audiencia > Tecnología > Navegadores y SO).

Imágenes almacenadas en Odoo

El problema real son las imágenes que Odoo almacena en forma de base64, ya que Odoo no soporta nativamente WebP. Nunca entendí porque no se incluyó como una opción experimental, ahora estamos sujetos a que Odoo lo haga en versiones posteriores. Y la razón es incomprensible, ellos decidieron no mantener el soporte del website responsivo en IE, razón por la cual el ecommerce de Odoo se ve roto en dicho navegador. Sin embargo un formato que tiene gran utilización hace años en múltiples Websites no lo incluyen ni como una opción. Así que habrá que esperar a si alguien hace un módulo (hay alguno dando vuelta).

¿Qué pasa si cargamos una imagen WebP a un campo de los de imágenes de Odoo? Simplemente no va a poder codificarla en base64 y va a dar error. Por lo tanto tenemos que crear un Binary y mediante la lógica de Python convertirlo a base64 compatible y dejarlo guardado ahi. Luego al llamarse en las vistas va a utilizar como base64 es sencillo, lo malo es que Odoo utiliza la lógica de URL con ID, así que sería cuestion de crear una URL con ID especial para webp. Es posible, no es sencillo, pero es posible.