[FIX] website: convert images added to Image Wall to webp

Before this commit, when images are added to an Image Wall or to an
Image Gallery, they remained in their original format.

After this commit, images added to an Image Wall or an Image Gallery
are converted to webp.

Thanks to [1], the Image Gallery dataset entries related to the
conversion are preserved.

[1]: odoo@e73a1a9

task-3666894

X-original-commit: 6aaddd3
Part-of: odoo#170037
Signed-off-by: Benjamin Vray (bvr) <[email protected]>

Author: bso-odoo

addons/website/static/src/snippets/s_image_gallery/options.js

@@ -5,6 +5,10 @@ import options from "@web_editor/js/editor/snippets.options";
 import wUtils from '@website/js/utils';
 import { _t } from "@web/core/l10n/translation";
 import { renderToElement } from "@web/core/utils/render";
+import {
+    loadImageInfo,
+    applyModifications,
+} from "@web_editor/js/editor/image_processing";
 
 /**
  * This class provides layout methods for interacting with the ImageGallery
@@ -420,6 +424,13 @@ options.registry.gallery = options.registry.GalleryLayout.extend({
 });
 
 options.registry.GalleryImageList = options.registry.GalleryLayout.extend({
+    /**
+     * @override
+     */
+    init() {
+        this.rpc = this.bindService("rpc");
+        return this._super.apply(this, arguments);
+    },
     /**
      * @override
      */
@@ -497,18 +508,44 @@ options.registry.GalleryImageList = options.registry.GalleryLayout.extend({
                 multiImages: true,
                 onlyImages: true,
                 save: images => {
+                    const imagePromises = [];
                     for (const image of images) {
-                        $('<img/>', {
+                        const $img = $('<img/>', {
                             class: $images.length > 0 ? $images[0].className : 'img img-fluid d-block ',
                             src: image.src,
                             'data-index': ++index,
                             alt: image.alt || '',
                             'data-name': _t('Image'),
                             style: $images.length > 0 ? $images[0].style.cssText : '',
                         }).appendTo($container);
+                        const imgEl = $img[0];
+                        imagePromises.push(new Promise(resolve => {
+                            loadImageInfo(imgEl, this.rpc).then(() => {
+                                if (imgEl.dataset.mimetype && ![
+                                    "image/gif",
+                                    "image/svg+xml",
+                                    "image/webp",
+                                ].includes(imgEl.dataset.mimetype)) {
+                                    // Convert to webp but keep original width.
+                                    imgEl.dataset.mimetype = "image/webp";
+                                    applyModifications(imgEl, {
+                                        mimetype: "image/webp",
+                                    }).then(src => {
+                                        imgEl.src = src;
+                                        imgEl.classList.add("o_modified_image_to_save");
+                                        resolve();
+                                    });
+                                } else {
+                                    resolve();
+                                }
+                            });
+                        }));
                     }
+                    savedPromise = Promise.all(imagePromises);
                     if (images.length > 0) {
-                        savedPromise = this._relayout();
+                        savedPromise = savedPromise.then(async () => {
+                            await this._relayout();
+                        });
                         this.trigger_up('cover_update');
                     }
                 },