增加图片插件webp

优化产品主图显示
评论默认隐藏

app/code/Amasty/AdvancedReview/view/frontend/templates/product/view/list.phtml

@@ -189,3 +189,13 @@ $isFilterApplied = $displayedCollection->getFlag(\Amasty\AdvancedReview\Model\To
         }
         }
     }
     }
 </script>
 </script>
+<script>
+    require([
+        'jquery'
+    ], function ($) {
+        console.log("helo!");
+        $(".amreview-add-new").on(click,function () {
+            $(".block.review-add.amreview-submit-form").show();
+        });
+    });
+</script>

app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/gallery.phtml

@@ -203,6 +203,8 @@ $thumbSizes = $responsiveImageHelper->getSizes('product_page_image_small');
         $(".thumbnails > a").mouseover(function (s) {
         $(".thumbnails > a").mouseover(function (s) {
             var main_img = $(this).attr("name");
             var main_img = $(this).attr("name");
             $(".main-image").attr("src",main_img);
             $(".main-image").attr("src",main_img);
+            $(".main-image-wrapper > picture >  source:first ").attr("srcset",main_img);
+            $(".main-image-wrapper > picture >  source:last ").attr("srcset",main_img);
             $(".thumbnails > a").removeClass("active");
             $(".thumbnails > a").removeClass("active");
             $(this).addClass("active");
             $(this).addClass("active");
         });
         });
@@ -219,6 +221,8 @@ $thumbSizes = $responsiveImageHelper->getSizes('product_page_image_small');
                 sd = $(".thumbnails > a:first").attr('name');
                 sd = $(".thumbnails > a:first").attr('name');
             }
             }
             $(".main-image").attr("src",sd);
             $(".main-image").attr("src",sd);
+            $(".main-image-wrapper > picture >  source:first ").attr("srcset",sd);
+            $(".main-image-wrapper > picture >  source:last ").attr("srcset",sd);
         });
         });
 
 
         $("a.prev ").on('click',function () {
         $("a.prev ").on('click',function () {
@@ -233,6 +237,8 @@ $thumbSizes = $responsiveImageHelper->getSizes('product_page_image_small');
                 sd = $(".thumbnails > a:last").attr('name');
                 sd = $(".thumbnails > a:last").attr('name');
             }
             }
             $(".main-image").attr("src",sd);
             $(".main-image").attr("src",sd);
+            $(".main-image-wrapper > picture >  source:first ").attr("srcset",sd);
+            $(".main-image-wrapper > picture >  source:last ").attr("srcset",sd);
         });
         });
     });
     });
 </script>
 </script>

app/design/frontend/Joshine/breeze/web/css/_custom.less

@@ -1688,6 +1688,9 @@ button.action.submit.primary {
     bottom: 0;
     bottom: 0;
     z-index: 11;
     z-index: 11;
   }
   }
+  .breeze-gallery .stage .main-image-wrapper > picture{
+    display: none;
+  }
 }
 }
 //详情页修改
 //详情页修改
 @media (min-width: 768px){
 @media (min-width: 768px){
@@ -1824,5 +1827,8 @@ background-color: #000;
     flex-direction: inherit !important;
     flex-direction: inherit !important;
   }
   }
 }
 }
+.block.review-add.amreview-submit-form{
+  display: none;
+}
 
 
 
 

composer.json

@@ -41,6 +41,7 @@
         "composer/composer": "^1.9 || ^2.0",
         "composer/composer": "^1.9 || ^2.0",
         "elasticsearch/elasticsearch": "~7.11.0",
         "elasticsearch/elasticsearch": "~7.11.0",
         "guzzlehttp/guzzle": "^6.3.3",
         "guzzlehttp/guzzle": "^6.3.3",
+        "jajuma/module-webpimages": "^2.1",
         "laminas/laminas-captcha": "^2.10",
         "laminas/laminas-captcha": "^2.10",
         "laminas/laminas-code": "^3.5.1",
         "laminas/laminas-code": "^3.5.1",
         "laminas/laminas-crypt": "^3.4.0",
         "laminas/laminas-crypt": "^3.4.0",
@@ -73,6 +74,7 @@
         "magento/magento-composer-installer": ">=0.1.11",
         "magento/magento-composer-installer": ">=0.1.11",
         "magento/zendframework1": "~1.14.2",
         "magento/zendframework1": "~1.14.2",
         "mageside/module-subscribe-at-checkout": "1.1.7",
         "mageside/module-subscribe-at-checkout": "1.1.7",
+        "mobiledetect/mobiledetectlib": "^2.8",
         "monolog/monolog": "^1.17",
         "monolog/monolog": "^1.17",
         "paragonie/sodium_compat": "^1.6",
         "paragonie/sodium_compat": "^1.6",
         "pelago/emogrifier": "^5.0.0",
         "pelago/emogrifier": "^5.0.0",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
         "This file is @generated automatically"
     ],
     ],
-    "content-hash": "96d54abdc29e1aeacfdc595d5d248fb3",
+    "content-hash": "3e6bf64bfbd2224fc8f617fcd165743f",
     "packages": [
     "packages": [
         {
         {
             "name": "airwallex/payments-plugin-magento",
             "name": "airwallex/payments-plugin-magento",
@@ -1545,6 +1545,34 @@
             "time": "2022-06-20T21:43:03+00:00"
             "time": "2022-06-20T21:43:03+00:00"
         },
         },
         {
         {
+            "name": "jajuma/module-webpimages",
+            "version": "2.1.11",
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.magento.com/archives/jajuma/module-webpimages/jajuma-module-webpimages-2.1.11.0.zip",
+                "shasum": "acc0eddedb94f5b235bcaeceddb215e3ed339cfb"
+            },
+            "type": "magento2-module",
+            "autoload": {
+                "psr-4": {
+                    "Jajuma\\WebpImages\\": ""
+                },
+                "files": [
+                    "registration.php"
+                ]
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "JaJuMa",
+                    "email": "info@jajuma.de"
+                }
+            ],
+            "description": "WebP Optimized Images"
+        },
+        {
             "name": "justinrainbow/json-schema",
             "name": "justinrainbow/json-schema",
             "version": "5.2.12",
             "version": "5.2.12",
             "source": {
             "source": {

vendor/composer/autoload_files.php

@@ -130,6 +130,7 @@ return array(
     '940abd8fb01ee76a36b44f35dcf9783b' => $vendorDir . '/weew/helpers-array/src/array.php',
     '940abd8fb01ee76a36b44f35dcf9783b' => $vendorDir . '/weew/helpers-array/src/array.php',
     'b598380463d27491e4810196bf363d15' => $vendorDir . '/airwallex/payments-plugin-magento/registration.php',
     'b598380463d27491e4810196bf363d15' => $vendorDir . '/airwallex/payments-plugin-magento/registration.php',
     '8592c7b0947d8a0965a9e8c3d16f9c24' => $vendorDir . '/elasticsearch/elasticsearch/src/autoload.php',
     '8592c7b0947d8a0965a9e8c3d16f9c24' => $vendorDir . '/elasticsearch/elasticsearch/src/autoload.php',
+    '0b2ea8cc52669e97f3bdd7d78dcd8eb5' => $vendorDir . '/jajuma/module-webpimages/registration.php',
     'eda65932675b68b5aee4503e0762d64d' => $vendorDir . '/magento/magento2-functional-testing-framework/src/Magento/FunctionalTestingFramework/_bootstrap.php',
     'eda65932675b68b5aee4503e0762d64d' => $vendorDir . '/magento/magento2-functional-testing-framework/src/Magento/FunctionalTestingFramework/_bootstrap.php',
     '88ede69c0babb90b8d3e9e7a95ad0eb5' => $vendorDir . '/mageside/module-subscribe-at-checkout/registration.php',
     '88ede69c0babb90b8d3e9e7a95ad0eb5' => $vendorDir . '/mageside/module-subscribe-at-checkout/registration.php',
     '3109cb1a231dcd04bee1f9f620d46975' => $vendorDir . '/paragonie/sodium_compat/autoload.php',
     '3109cb1a231dcd04bee1f9f620d46975' => $vendorDir . '/paragonie/sodium_compat/autoload.php',

vendor/composer/autoload_psr4.php

@@ -124,6 +124,7 @@ return array(
     'Jose\\Component\\Core\\Util\\Ecc\\' => array($vendorDir . '/web-token/jwt-framework/src/Ecc'),
     'Jose\\Component\\Core\\Util\\Ecc\\' => array($vendorDir . '/web-token/jwt-framework/src/Ecc'),
     'Jose\\' => array($vendorDir . '/web-token/jwt-framework/src'),
     'Jose\\' => array($vendorDir . '/web-token/jwt-framework/src'),
     'JmesPath\\' => array($vendorDir . '/mtdowling/jmespath.php/src'),
     'JmesPath\\' => array($vendorDir . '/mtdowling/jmespath.php/src'),
+    'Jajuma\\WebpImages\\' => array($vendorDir . '/jajuma/module-webpimages'),
     'JMS\\Serializer\\' => array($vendorDir . '/jms/serializer/src'),
     'JMS\\Serializer\\' => array($vendorDir . '/jms/serializer/src'),
     'Hoa\\Ustring\\' => array($vendorDir . '/hoa/ustring'),
     'Hoa\\Ustring\\' => array($vendorDir . '/hoa/ustring'),
     'Hoa\\Stream\\' => array($vendorDir . '/hoa/stream'),
     'Hoa\\Stream\\' => array($vendorDir . '/hoa/stream'),

vendor/composer/autoload_static.php

@@ -131,6 +131,7 @@ class ComposerStaticInitb71ce7c407b65980cf51508f463c8dcf
         '940abd8fb01ee76a36b44f35dcf9783b' => __DIR__ . '/..' . '/weew/helpers-array/src/array.php',
         '940abd8fb01ee76a36b44f35dcf9783b' => __DIR__ . '/..' . '/weew/helpers-array/src/array.php',
         'b598380463d27491e4810196bf363d15' => __DIR__ . '/..' . '/airwallex/payments-plugin-magento/registration.php',
         'b598380463d27491e4810196bf363d15' => __DIR__ . '/..' . '/airwallex/payments-plugin-magento/registration.php',
         '8592c7b0947d8a0965a9e8c3d16f9c24' => __DIR__ . '/..' . '/elasticsearch/elasticsearch/src/autoload.php',
         '8592c7b0947d8a0965a9e8c3d16f9c24' => __DIR__ . '/..' . '/elasticsearch/elasticsearch/src/autoload.php',
+        '0b2ea8cc52669e97f3bdd7d78dcd8eb5' => __DIR__ . '/..' . '/jajuma/module-webpimages/registration.php',
         'eda65932675b68b5aee4503e0762d64d' => __DIR__ . '/..' . '/magento/magento2-functional-testing-framework/src/Magento/FunctionalTestingFramework/_bootstrap.php',
         'eda65932675b68b5aee4503e0762d64d' => __DIR__ . '/..' . '/magento/magento2-functional-testing-framework/src/Magento/FunctionalTestingFramework/_bootstrap.php',
         '88ede69c0babb90b8d3e9e7a95ad0eb5' => __DIR__ . '/..' . '/mageside/module-subscribe-at-checkout/registration.php',
         '88ede69c0babb90b8d3e9e7a95ad0eb5' => __DIR__ . '/..' . '/mageside/module-subscribe-at-checkout/registration.php',
         '3109cb1a231dcd04bee1f9f620d46975' => __DIR__ . '/..' . '/paragonie/sodium_compat/autoload.php',
         '3109cb1a231dcd04bee1f9f620d46975' => __DIR__ . '/..' . '/paragonie/sodium_compat/autoload.php',
@@ -290,6 +291,7 @@ class ComposerStaticInitb71ce7c407b65980cf51508f463c8dcf
             'Jose\\Component\\Core\\Util\\Ecc\\' => 29,
             'Jose\\Component\\Core\\Util\\Ecc\\' => 29,
             'Jose\\' => 5,
             'Jose\\' => 5,
             'JmesPath\\' => 9,
             'JmesPath\\' => 9,
+            'Jajuma\\WebpImages\\' => 18,
             'JMS\\Serializer\\' => 15,
             'JMS\\Serializer\\' => 15,
         ),
         ),
         'H' => 
         'H' => 
@@ -846,6 +848,10 @@ class ComposerStaticInitb71ce7c407b65980cf51508f463c8dcf
         array (
         array (
             0 => __DIR__ . '/..' . '/mtdowling/jmespath.php/src',
             0 => __DIR__ . '/..' . '/mtdowling/jmespath.php/src',
         ),
         ),
+        'Jajuma\\WebpImages\\' => 
+        array (
+            0 => __DIR__ . '/..' . '/jajuma/module-webpimages',
+        ),
         'JMS\\Serializer\\' => 
         'JMS\\Serializer\\' => 
         array (
         array (
             0 => __DIR__ . '/..' . '/jms/serializer/src',
             0 => __DIR__ . '/..' . '/jms/serializer/src',

vendor/composer/installed.json

@@ -3426,6 +3426,37 @@
             "install-path": "../hoa/ustring"
             "install-path": "../hoa/ustring"
         },
         },
         {
         {
+            "name": "jajuma/module-webpimages",
+            "version": "2.1.11",
+            "version_normalized": "2.1.11.0",
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.magento.com/archives/jajuma/module-webpimages/jajuma-module-webpimages-2.1.11.0.zip",
+                "shasum": "acc0eddedb94f5b235bcaeceddb215e3ed339cfb"
+            },
+            "type": "magento2-module",
+            "installation-source": "dist",
+            "autoload": {
+                "psr-4": {
+                    "Jajuma\\WebpImages\\": ""
+                },
+                "files": [
+                    "registration.php"
+                ]
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "JaJuMa",
+                    "email": "info@jajuma.de"
+                }
+            ],
+            "description": "WebP Optimized Images",
+            "install-path": "../jajuma/module-webpimages"
+        },
+        {
             "name": "jms/metadata",
             "name": "jms/metadata",
             "version": "2.6.1",
             "version": "2.6.1",
             "version_normalized": "2.6.1.0",
             "version_normalized": "2.6.1.0",

vendor/composer/installed.php

@@ -3,7 +3,7 @@
         'name' => 'magento/magento2ce',
         'name' => 'magento/magento2ce',
         'pretty_version' => 'dev-master',
         'pretty_version' => 'dev-master',
         'version' => 'dev-master',
         'version' => 'dev-master',
-        'reference' => '2e6888fd835e9bf29c26ecb13cab664e7a994ade',
+        'reference' => '932207d218c95c847882fd23a97bf06d6f69ff1d',
         'type' => 'project',
         'type' => 'project',
         'install_path' => __DIR__ . '/../../',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
         'aliases' => array(),
@@ -487,6 +487,15 @@
             'aliases' => array(),
             'aliases' => array(),
             'dev_requirement' => true,
             'dev_requirement' => true,
         ),
         ),
+        'jajuma/module-webpimages' => array(
+            'pretty_version' => '2.1.11',
+            'version' => '2.1.11.0',
+            'reference' => NULL,
+            'type' => 'magento2-module',
+            'install_path' => __DIR__ . '/../jajuma/module-webpimages',
+            'aliases' => array(),
+            'dev_requirement' => false,
+        ),
         'jms/metadata' => array(
         'jms/metadata' => array(
             'pretty_version' => '2.6.1',
             'pretty_version' => '2.6.1',
             'version' => '2.6.1.0',
             'version' => '2.6.1.0',
@@ -949,7 +958,7 @@
         'magento/magento2ce' => array(
         'magento/magento2ce' => array(
             'pretty_version' => 'dev-master',
             'pretty_version' => 'dev-master',
             'version' => 'dev-master',
             'version' => 'dev-master',
-            'reference' => '2e6888fd835e9bf29c26ecb13cab664e7a994ade',
+            'reference' => '932207d218c95c847882fd23a97bf06d6f69ff1d',
             'type' => 'project',
             'type' => 'project',
             'install_path' => __DIR__ . '/../../',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),
             'aliases' => array(),

vendor/jajuma/module-webpimages/Block/Adminhtml/System/Config/AdvancedConfiguration.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Block\Adminhtml\System\Config;
+
+class AdvancedConfiguration extends \Magento\Config\Block\System\Config\Form\Field
+{
+    /**
+     * Render text
+     *
+     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
+     *
+     * @return string
+     */
+    public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        $html = '';
+        if ($element->getComment()) {
+            $html .= '<div style="margin: auto; padding: 10px;">';
+            $html .= $element->getComment() . '</div>';
+        }
+        return $html;
+    }
+    /**
+     * Return element html
+     *
+     * @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
+     *
+     * @return string
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        return $this->_toHtml();
+    }
+}

vendor/jajuma/module-webpimages/Block/Adminhtml/System/Config/ClearButton.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Block\Adminhtml\System\Config;
+
+class ClearButton extends \Magento\Config\Block\System\Config\Form\Field
+{
+    /** @var UrlInterface */
+    protected $_urlBuilder;
+
+    /**
+     * Constructor
+     *
+     * @param \Magento\Backend\Block\Template\Context $context
+     * @param array $data
+     */
+    public function __construct(
+        \Magento\Backend\Block\Template\Context $context,
+        array $data = []
+    ) {
+        $this->_urlBuilder = $context->getUrlBuilder();
+        parent::__construct($context, $data);
+    }
+
+    /**
+     * Set template
+     *
+     * @return void
+     */
+    protected function _construct()
+    {
+        parent::_construct();
+        $this->setTemplate('Jajuma_WebpImages::system/config/clearbutton.phtml');
+    }
+
+    /**
+     * Generate button html
+     *
+     * @return string
+     * @throws \Magento\Framework\Exception\LocalizedException
+     */
+    public function getButtonHtml()
+    {
+        $button = $this->getLayout()->createBlock(
+            \Magento\Backend\Block\Widget\Button::class
+        )->setData(
+            [
+                'id' => 'jajuma_webp_test_button',
+                'label' => __('Clear all webp image'),
+                'onclick' => 'javascript:clearWebpImage(); return false;',
+            ]
+        );
+
+        return $button->toHtml();
+    }
+
+    /**
+     * Get admin url
+     *
+     * @return string
+     */
+    public function getAdminUrl()
+    {
+        return $this->_urlBuilder->getUrl('webp/clear', ['store' => $this->_request->getParam('store')]);
+    }
+
+    /**
+     * Render button
+     *
+     * @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
+     * @return string
+     * @throws \Magento\Framework\Exception\LocalizedException
+     */
+    public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        // Remove scope label
+        $element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
+        return parent::render($element);
+    }
+
+    /**
+     * Return element html
+     *
+     * @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
+     * @return string
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        return $this->_toHtml();
+    }
+}

vendor/jajuma/module-webpimages/Block/Adminhtml/System/Config/TestButton.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Block\Adminhtml\System\Config;
+
+class TestButton extends \Magento\Config\Block\System\Config\Form\Field
+{
+    /** @var UrlInterface */
+    protected $_urlBuilder;
+
+    /**
+     * @var \Magento\Catalog\Model\ResourceModel\Product\Collection
+     */
+    protected $productCollection;
+
+    /**
+     * TestButton constructor.
+     *
+     * @param \Magento\Backend\Block\Template\Context                 $context
+     * @param \Magento\Catalog\Model\ResourceModel\Product\Collection $productCollection
+     * @param array                                                   $data
+     */
+    public function __construct(
+        \Magento\Backend\Block\Template\Context $context,
+        \Magento\Catalog\Model\ResourceModel\Product\Collection $productCollection,
+        array $data = []
+    ) {
+        $this->_urlBuilder = $context->getUrlBuilder();
+        $this->productCollection = $productCollection;
+        parent::__construct($context, $data);
+    }
+
+    /**
+     * Set template
+     *
+     * @return void
+     */
+    protected function _construct()
+    {
+        parent::_construct();
+        $this->setTemplate('Jajuma_WebpImages::system/config/testbutton.phtml');
+    }
+
+    /**
+     * Generate button html
+     *
+     * @return string
+     * @throws \Magento\Framework\Exception\LocalizedException
+     */
+    public function getButtonHtml()
+    {
+        $button = $this->getLayout()->createBlock(
+            \Magento\Backend\Block\Widget\Button::class
+        )->setData(
+            [
+                'id' => 'jajuma_webp_test_button',
+                'label' => __('Test Conversion Tool'),
+                'onclick' => 'javascript:conversionToolTest(); return false;',
+            ]
+        );
+
+        return $button->toHtml();
+    }
+
+    /**
+     * Get admin url
+     *
+     * @return string
+     */
+    public function getAdminUrl()
+    {
+        return $this->_urlBuilder->getUrl('webp/test', ['store' => $this->_request->getParam('store')]);
+    }
+
+    /**
+     * Render button
+     *
+     * @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
+     * @return string
+     * @throws \Magento\Framework\Exception\LocalizedException
+     */
+    public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        // Remove scope label
+        $element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
+        return parent::render($element);
+    }
+
+    /**
+     * Return element html
+     *
+     * @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
+     * @return string
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        return $this->_toHtml();
+    }
+
+    /**
+     * Get lastest product id
+     *
+     * @return int|null
+     */
+    public function getLatestProductId()
+    {
+        if ($lastItem = $this->productCollection->getLastItem()) {
+            return $lastItem->getId();
+        }
+        return null;
+    }
+}

vendor/jajuma/module-webpimages/Block/Picture.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Block;
+
+use Jajuma\WebpImages\Helper\Data as HelperModule;
+
+class Picture extends \Magento\Framework\View\Element\Template
+{
+    protected $_template = "picture-tag-format.phtml";
+
+    /**
+     * @var string
+     */
+    private $webpImage = '';
+
+    /**
+     * @var string
+     */
+    private $originalImage = '';
+
+    /**
+     * @var string
+     */
+    private $originalTag = '';
+
+    /**
+     * @var string
+     */
+    private $customSrcTag = '';
+
+    /**
+     * @var string
+     */
+    private $customSrcSetTag = '';
+
+    /**
+     * Module helper data
+     *
+     * @var HelperModule
+     */
+    protected $helper;
+
+    /**
+     * Picture constructor.
+     *
+     * @param \Magento\Framework\View\Element\Template\Context $context
+     * @param HelperModule $helperData
+     * @param array $data
+     */
+    public function __construct(
+        \Magento\Framework\View\Element\Template\Context $context,
+        HelperModule $helperData,
+        array $data = []
+    ) {
+        $this->helper = $helperData;
+        parent::__construct($context, $data);
+    }
+
+    /**
+     * Seti original image
+     *
+     * @param string $originalImage
+     *
+     * @return Picture
+     */
+    public function setOriginalImage($originalImage)
+    {
+        $this->originalImage = $originalImage;
+        return $this;
+    }
+
+    /**
+     * Get original image
+     *
+     * @return string
+     */
+    public function getOriginalImage()
+    {
+        return $this->originalImage;
+    }
+
+    /**
+     * Set Webp Image
+     *
+     * @param string $webpImage
+     *
+     * @return Picture
+     */
+    public function setWebpImage($webpImage)
+    {
+        $this->webpImage = $webpImage;
+        return $this;
+    }
+
+    /**
+     * Get Webp Image
+     *
+     * @return string
+     */
+    public function getWebpImage()
+    {
+        return $this->webpImage;
+    }
+
+    /**
+     * Set Original Tag
+     *
+     * @param string $originalTag
+     *
+     * @return Picture
+     */
+    public function setOriginalTag($originalTag)
+    {
+        $this->originalTag = $originalTag;
+        return $this;
+    }
+
+    /**
+     * Get Original Tag
+     *
+     * @return string
+     */
+    public function getOriginalTag()
+    {
+        return $this->originalTag;
+    }
+
+    /**
+     * Set custom src tag
+     *
+     * @param string $customSrcTag
+     *
+     * @return $this
+     */
+    public function setCustomSrcTag($customSrcTag)
+    {
+        $this->customSrcTag = $customSrcTag;
+        return $this;
+    }
+
+    /**
+     * Get Custom Src Tag
+     *
+     * @return string
+     */
+    public function getCustomSrcTag()
+    {
+        return $this->customSrcTag;
+    }
+
+    /**
+     * Set Custom Src Set Tag
+     *
+     * @param mixed $customSrcSetTag
+     *
+     * @return $this
+     */
+    public function setCustomSrcSetTag($customSrcSetTag)
+    {
+        $this->customSrcSetTag = $customSrcSetTag;
+        return $this;
+    }
+
+    /**
+     * Get Custom Src Set Tag
+     *
+     * @return mixed
+     */
+    public function getCustomSrcSetTag()
+    {
+        return $this->customSrcSetTag;
+    }
+
+    /**
+     * Get Original Image Type
+     *
+     * @return string
+     */
+    public function getOriginalImageType()
+    {
+        if (preg_match('/\.(jpg|jpeg)$/i', $this->getOriginalImage())) {
+            return 'image/jpg';
+        }
+
+        if (preg_match('/\.(png)$/i', $this->getOriginalImage())) {
+            return 'image/png';
+        }
+
+        return '';
+    }
+
+    /**
+     * Is Native Lazy Loading Enabled
+     *
+     * @return bool
+     */
+    public function isNativeLazyLoadingEnabled()
+    {
+        return $this->helper->isNativeLazyLoadingEnabled();
+    }
+
+    /**
+     * Get Exclude Native Lazy load Image Attributes
+     *
+     * @return mixed
+     */
+    public function getExcludeNativeLazyloadImageAttributes()
+    {
+        return $this->helper->getExcludeNativeLazyloadImageAttributes();
+    }
+}

vendor/jajuma/module-webpimages/Block/System/Config/Form/Jajuma/Module.php

+<?php
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+
+namespace Jajuma\WebpImages\Block\System\Config\Form\Jajuma;
+
+class Module extends \Magento\Config\Block\System\Config\Form\Field
+{
+    /**
+     * Render text
+     *
+     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
+     *
+     * @return string
+     */
+    public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        $html = '';
+        if ($element->getComment()) {
+            $html = $element->getComment();
+        }
+        return $html;
+    }
+    /**
+     * Return element html
+     *
+     * @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
+     *
+     * @return string
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        return $this->_toHtml();
+    }
+}

vendor/jajuma/module-webpimages/Controller/Adminhtml/Clear/Index.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Controller\Adminhtml\Clear;
+
+use Magento\Backend\App\Action;
+use Magento\Framework\Controller\ResultFactory;
+use Magento\Backend\App\Action\Context;
+use Jajuma\WebpImages\Helper\Data;
+
+class Index extends Action
+{
+    /**
+     * Module helper
+     *
+     * @var Data
+     */
+    protected $helper;
+
+    /**
+     * Constructor
+     *
+     * @param Data $helper
+     * @param Context $context
+     */
+    public function __construct(
+        Data $helper,
+        Context $context
+    ) {
+        $this->helper = $helper;
+        parent::__construct($context);
+    }
+
+    /**
+     * Execute
+     *
+     * @return \Magento\Framework\App\ResponseInterface|\Magento\Framework\Controller\ResultInterface
+     */
+    public function execute()
+    {
+        $resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
+        if ($this->helper->clearWebp() == 'nowebpFolder') {
+            $this->messageManager->addSuccessMessage(__('WebP Image Cache is empty'));
+        } elseif ($this->helper->clearWebp()) {
+            $this->messageManager->addSuccessMessage(
+                __('All WebP images have been removed (please also clear FPC to recreate WebP images)')
+            );
+        } else {
+            $this->messageManager->addErrorMessage(
+                __('Can not remove the webp_image folder (please check folder permissions)')
+            );
+        }
+        $resultRedirect->setUrl($this->_redirect->getRefererUrl());
+        return $resultRedirect;
+    }
+}

vendor/jajuma/module-webpimages/Controller/Adminhtml/Test/Index.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Controller\Adminhtml\Test;
+
+use Magento\Backend\App\Action;
+use Magento\Framework\Controller\ResultFactory;
+use Magento\Backend\App\Action\Context;
+use Magento\Framework\View\Result\PageFactory;
+
+class Index extends Action
+{
+    /**
+     * PageFactory
+     *
+     * @var PageFactory
+     */
+    protected $resultPageFactory;
+
+    /**
+     * Test controller constructor
+     *
+     * @param Context $context
+     * @param PageFactory $resultPageFactory
+     */
+    public function __construct(
+        Context $context,
+        PageFactory $resultPageFactory
+    ) {
+        parent::__construct($context);
+        $this->resultPageFactory = $resultPageFactory;
+    }
+
+    /**
+     * Product list page
+     *
+     * @return \Magento\Backend\Model\View\Result\Page
+     */
+    public function execute()
+    {
+        /** @var \Magento\Backend\Model\View\Result\Page $resultPage */
+        $resultPage = $this->resultPageFactory->create();
+        return $resultPage;
+    }
+}

vendor/jajuma/module-webpimages/Controller/Image/Convert.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Controller\Image;
+
+use function GuzzleHttp\json_encode;
+use Magento\Framework\App\Action\Context;
+use Jajuma\WebpImages\Helper\Data;
+use Magento\Framework\Controller\Result\JsonFactory;
+
+class Convert extends \Magento\Framework\App\Action\Action
+{
+    /**
+     * Context
+     *
+     * @var Context
+     */
+    protected $context;
+
+    /**
+     * Module helper Data
+     *
+     * @var Data
+     */
+    protected $helper;
+
+    /**
+     * JsonFactory
+     *
+     * @var JsonFactory
+     */
+    protected $resultJsonFactory;
+
+    /**
+     * Constructor
+     *
+     * @param Context $context
+     * @param Data $helper
+     * @param JsonFactory $resultJsonFactory
+     */
+    public function __construct(
+        Context $context,
+        Data $helper,
+        JsonFactory $resultJsonFactory
+    ) {
+        $this->helper = $helper;
+        $this->resultJsonFactory = $resultJsonFactory;
+        parent::__construct($context);
+    }
+
+    /**
+     * Execute
+     *
+     * @return JsonFactory
+     */
+    public function execute()
+    {
+        $resultJson = $this->resultJsonFactory->create();
+
+        $images = $this->getRequest()->getParam('images');
+        $isInProductView = $this->getRequest()->getParam('isInProductView');
+        if ($images) {
+            $webpUrls = [];
+            foreach ($images as $imageUrl) {
+                if (array_key_exists('thumb', $imageUrl)) {
+                    $webpUrlThumb = $this->helper->convert($imageUrl['thumb']);
+                    if ($webpUrlThumb) {
+                        $imageUrl['thumb'] = $webpUrlThumb;
+                    }
+                }
+
+                if (array_key_exists('img', $imageUrl)) {
+                    $webpUrlImg = $this->helper->convert($imageUrl['img']);
+                    if ($webpUrlImg) {
+                        $imageUrl['img'] = $webpUrlImg;
+                    }
+                }
+
+                if (array_key_exists('full', $imageUrl)) {
+                    $webpUrlFull = $this->helper->convert($imageUrl['full']);
+                    if ($webpUrlFull) {
+                        $imageUrl['full'] = $webpUrlFull;
+                    }
+                }
+
+                if (!empty($imageUrl)) {
+                    array_push($webpUrls, $imageUrl);
+                }
+            }
+        }
+
+        return $resultJson->setData(['webpUrls' => $webpUrls]);
+    }
+}

vendor/jajuma/module-webpimages/Helper/File.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Helper;
+
+class File extends \Magento\Framework\Filesystem\Io\File
+{
+    /**
+     * Set iwd
+     *
+     * @param mixed $iwd
+     *
+     * @return $this
+     */
+    public function setIwd($iwd)
+    {
+        $this->_iwd = $iwd;
+    }
+
+    /**
+     * Set cwd
+     *
+     * @param mixed $cwd
+     *
+     * @return $this
+     */
+    public function setCwd($cwd)
+    {
+        $this->_cwd = $cwd;
+    }
+}

vendor/jajuma/module-webpimages/Model/Config/Comment.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Model\Config;
+
+class Comment implements \Magento\Config\Model\Config\CommentInterface
+{
+    /**
+     * @var $dir
+     */
+    protected $dir;
+
+    /**
+     * Constructor
+     *
+     * @param \Magento\Framework\Filesystem\DirectoryList $dir
+     */
+    public function __construct(
+        \Magento\Framework\Filesystem\DirectoryList $dir
+    ) {
+        $this->dir = $dir;
+    }
+
+    /**
+     * Get comment text
+     *
+     * @param string $elementValue
+     *
+     * @return string
+     */
+    public function getCommentText($elementValue)
+    {
+        return 'Define the specify path of cwebp command or leave it empty to use global command "cwebp". Example: '
+        . $this->dir->getPath('app') . '/code/Jajuma/WebpImages/bin/cwebp';
+    }
+}

vendor/jajuma/module-webpimages/Model/Config/Source/Tool.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Model\Config\Source;
+
+class Tool implements \Magento\Framework\Option\ArrayInterface
+{
+    /**
+     * Options getter
+     *
+     * @return array
+     */
+    public function toOptionArray()
+    {
+        return [
+            ['value' => 'cwebp', 'label' => __('Cwebp')],
+            ['value' => 'convert', 'label' => __('Imagemagick')],
+            ['value' => 'gd', 'label' => __('GD')]
+        ];
+    }
+}

vendor/jajuma/module-webpimages/Plugin/Backend/Block/Menu/AddLinkJs.php

+<?php
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2022-present JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+
+namespace Jajuma\WebpImages\Plugin\Backend\Block\Menu;
+
+use Magento\Backend\Block\Menu;
+
+class AddLinkJs
+{
+    /**
+     * @param Menu $subject
+     * @param string $html
+     * @return string
+     * @throws \Magento\Framework\Exception\LocalizedException
+     */
+    public function afterToHtml(Menu $subject, $html)
+    {
+        $js = $subject->getLayout()->createBlock(\Magento\Backend\Block\Template::class)
+            ->setTemplate('Jajuma_WebpImages::backend/menu/link_blank.phtml')
+            ->toHtml();
+
+        return $html . $js;
+    }
+}
\ No newline at end of file

vendor/jajuma/module-webpimages/Plugin/Backend/Model/Menu/Item/ExtensionsLinkPlugin.php

+<?php
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2022-present JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+
+
+namespace Jajuma\WebpImages\Plugin\Backend\Model\Menu\Item;
+
+use Magento\Backend\Model\Menu\Item;
+
+class ExtensionsLinkPlugin
+{
+    /**
+     * @param Item $subject
+     * @param string $url
+     * @return string
+     */
+    public function afterGetUrl(Item $subject, $url)
+    {
+        if ($subject->getId() === 'Jajuma_Extensions::extensions_link') {
+            return 'https://www.jajuma.de/en/jajuma-develop/magento-extensions?mtm_campaign=Extensions-Menu';
+        }
+
+        return $url;
+    }
+}
\ No newline at end of file

vendor/jajuma/module-webpimages/Plugin/ConfigPlugin.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Plugin;
+
+use Magento\Framework\Message\ManagerInterface;
+use Magento\Framework\App\Config\ScopeConfigInterface;
+
+class ConfigPlugin
+{
+    /**
+     * Manager Interface
+     *
+     * @var ManagerInterface
+     */
+    protected $messageManager;
+
+    /**
+     * Scope Config Interface
+     *
+     * @var ScopeConfigInterface
+     */
+    protected $scopeConfig;
+
+    /**
+     * ConfigPlugin constructor.
+     *
+     * @param ManagerInterface $messageManager
+     * @param ScopeConfigInterface $scopeConfig
+     */
+    public function __construct(
+        ManagerInterface $messageManager,
+        ScopeConfigInterface $scopeConfig
+    ) {
+        $this->messageManager = $messageManager;
+        $this->scopeConfig = $scopeConfig;
+    }
+
+    /**
+     * Around save method
+     *
+     * @param \Magento\Config\Model\Config $subject
+     * @param \Closure $proceed
+     *
+     * @return \Closure $proceed
+     */
+    public function aroundSave(
+        \Magento\Config\Model\Config $subject,
+        \Closure $proceed
+    ) {
+        $data = $subject->getData();
+        if (isset($data['section']) && $data['section'] === 'webp') {
+            if (isset($data['groups']['advance_mode']['fields']['cwebp_command']['value'])
+                && $data['groups']['advance_mode']['fields']['cwebp_command']['value'] !== '') {
+                $regexCwebp = \Jajuma\WebpImages\Helper\Data::REGX_CWEBP;
+                if (!preg_match(
+                    $regexCwebp,
+                    $data['groups']['advance_mode']['fields']['cwebp_command']['value']
+                )
+                ) {
+                    $this->messageManager->addNoticeMessage(__('Invalid Cwepb Custom Command. Custom Command
+                     must only include underscore (_), minus (-), space ( ) and alphanumeric characters.'));
+                    $data['groups']['advance_mode']['fields']['cwebp_command']['value']
+                    = $this->scopeConfig->getValue('webp/advance_mode/cwebp_command');
+                }
+            }
+            if (isset($data['groups']['advance_mode']['fields']['imagemagick_command']['value'])
+                && $data['groups']['advance_mode']['fields']['imagemagick_command']['value'] !== '') {
+                $regexImagemagick = \Jajuma\WebpImages\Helper\Data::REGX_IMAGEMAGICK;
+                if (!preg_match(
+                    $regexImagemagick,
+                    $data['groups']['advance_mode']['fields']['imagemagick_command']['value']
+                )
+                ) {
+                    $this->messageManager->addNoticeMessage(__('Invalid Imagemagick Custom Command.
+                     Custom Command must only include underscore (_), minus (-), space ( ), comma (,), colon (:),
+                     equals sign (=) and alphanumeric characters.'));
+                    $data['groups']['advance_mode']['fields']['imagemagick_command']['value']
+                    = $this->scopeConfig->getValue('webp/advance_mode/imagemagick_command');
+                }
+            }
+            if (isset($data['groups']['advance_mode']['fields']['path_to_cwebp']['value'])
+                && $data['groups']['advance_mode']['fields']['path_to_cwebp']['value'] !== '') {
+                $regexCwebpPath = \Jajuma\WebpImages\Helper\Data::REGX_CWEBP_PATH;
+                if (!preg_match($regexCwebpPath, $data['groups']['advance_mode']['fields']['path_to_cwebp']['value'])) {
+                    $this->messageManager->addNoticeMessage(__('Invalid Cwebp Path. Path must only include 
+                    underscore (_), minus (-), dot (.), slash(/) and alphanumeric characters.'));
+                    $data['groups']['advance_mode']['fields']['path_to_cwebp']['value']
+                    = $this->scopeConfig->getValue('webp/advance_mode/path_to_cwebp');
+                }
+            }
+            if (isset($data['groups']['advance_mode']['fields']['path_to_imagemagick']['value'])
+                 && $data['groups']['advance_mode']['fields']['path_to_imagemagick']['value'] !== '') {
+                $regexImageMagickPath = \Jajuma\WebpImages\Helper\Data::REGX_IMAGEMAGICK_PATH;
+                if (!preg_match(
+                    $regexImageMagickPath,
+                    $data['groups']['advance_mode']['fields']['path_to_imagemagick']['value']
+                )
+                ) {
+                    $this->messageManager->addNoticeMessage(__('Invalid ImageMagick Path.
+                     Path must only include underscore (_), minus (-), dot (.),
+                     slash(/) and alphanumeric characters.'));
+                    $data['groups']['advance_mode']['fields']['path_to_imagemagick']['value']
+                    = $this->scopeConfig->getValue('webp/advance_mode/path_to_imagemagick');
+                }
+            }
+            $subject->setData($data);
+        }
+        return $proceed();
+    }
+}

vendor/jajuma/module-webpimages/Plugin/Product/View/GalleryPlugin.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Plugin\Product\View;
+
+use Jajuma\WebpImages\Helper\Data;
+use Magento\Framework\Json\Helper\Data as JsonHelper;
+
+class GalleryPlugin
+{
+    /**
+     * Module helper data
+     *
+     * @var Data
+     */
+    protected $helperWebp;
+
+    /**
+     * Json Helper
+     *
+     * @var JsonHelper
+     */
+    protected $jsonHelper;
+
+    /**
+     * Constructor
+     *
+     * @param Data $webpImagesHelper
+     * @param JsonHelper $jsonHelper
+     */
+    public function __construct(
+        Data $webpImagesHelper,
+        JsonHelper $jsonHelper
+    ) {
+        $this->helperWebp = $webpImagesHelper;
+        $this->jsonHelper = $jsonHelper;
+    }
+
+    /**
+     * After Get Gallery Images Json
+     *
+     * @param \Magento\Catalog\Block\Product\View\Gallery $subject
+     * @param mixed $result
+     */
+    public function afterGetGalleryImagesJson(\Magento\Catalog\Block\Product\View\Gallery $subject, $result)
+    {
+
+        $newImagesItems = [];
+        $imagesItems = $this->jsonHelper->jsonDecode($result);
+        foreach ($imagesItems as $itemImage) {
+            $thumbImage = $itemImage['thumb'];
+            $imgImage = $itemImage['img'];
+            $fullImage = $itemImage['full'];
+            $webpThumbImageUrl = $this->helperWebp->convert($thumbImage);
+            $itemImage['thumb_webp'] = $webpThumbImageUrl;
+            $webpImgImageUrl = $this->helperWebp->convert($imgImage);
+            $itemImage['img_webp'] = $webpImgImageUrl;
+            $webpFullImageUrl = $this->helperWebp->convert($fullImage);
+            $itemImage['full_webp'] = $webpFullImageUrl;
+            $newImagesItems[] = $itemImage;
+        }
+
+        return $this->jsonHelper->jsonEncode($newImagesItems);
+    }
+}

vendor/jajuma/module-webpimages/Plugin/ReplaceImageTag.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Plugin;
+
+use Magento\Framework\View\LayoutInterface;
+use Jajuma\WebpImages\Block\Picture;
+use Jajuma\WebpImages\Helper\Data;
+use Magento\Store\Model\StoreManagerInterface;
+use Psr\Log\LoggerInterface;
+
+class ReplaceImageTag
+{
+    /**
+     * Module helper Data
+     *
+     * @var Data
+     */
+    protected $helper;
+
+    /**
+     * StoreManagerInterface
+     *
+     * @var StoreManagerInterface
+     */
+    protected $storeManager;
+
+    /**
+     * Constructor
+     *
+     * @param Data $helper
+     * @param StoreManagerInterface $storeManager
+     */
+    public function __construct(
+        Data $helper,
+        StoreManagerInterface $storeManager,
+        LoggerInterface $logger
+    ) {
+        $this->helper = $helper;
+        $this->storeManager = $storeManager;
+        $this->logger = $logger;
+    }
+
+    /**
+     * After get output
+     *
+     * @param LayoutInterface $layout
+     * @param string $output
+     *
+     * @return string
+     */
+    public function afterGetOutput(LayoutInterface $layout, $output)
+    {
+        if (!$this->helper->isEnabled()) {
+            return $output;
+        }
+
+        $regex = '/<img([^<]+\s|\s)src=(\"|' . "\')([^<]+?\.(png|jpg|jpeg))[^<]+>(?!(<\/pic|\s*<\/pic))/mi";
+        if (preg_match_all($regex, $output, $images, PREG_OFFSET_CAPTURE) === false) {
+            return $output;
+        }
+        $accumulatedChange = 0;
+        $baseUrl = $this->storeManager->getStore()->getBaseUrl();
+        $mediaUrl = $this->storeManager->getStore()->getBaseUrl(
+            \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
+        );
+        $mediaUrlWithoutBaseUrl = str_replace($baseUrl, '', $mediaUrl);
+        $excludeImageAttributes = $this->getExcludeImageAttributes();
+        $customSrcSetTag = $this->helper->getCustomSrcSetTag() ? $this->helper->getCustomSrcSetTag() : '';
+        foreach ($images[0] as $index => $image) {
+            $offset = $image[1] + $accumulatedChange;
+            $htmlTag = $images[0][$index][0];
+            $imageUrl = $images[3][$index][0];
+
+            /**
+             * Skip when image is not from same server
+             */
+            if (strpos($imageUrl, $mediaUrl) === false && strpos($imageUrl, $mediaUrlWithoutBaseUrl) === false) {
+                continue;
+            }
+
+            /**
+             * Skip when image contains an excluded attribute
+             */
+            $isValidRegex = false;
+            try {
+                preg_match($excludeImageAttributes, '');
+                $isValidRegex = true;
+            } catch (\Exception $e) {
+                $this->logger->info("Conversion Blacklist Configuration is invalid:" . $excludeImageAttributes);
+                $this->logger->info("Detail: " . $e->getMessage());
+            }
+            if ($isValidRegex) {
+                if (preg_match_all($excludeImageAttributes, $htmlTag)) {
+                        continue;
+                }
+            }
+
+            $pictureTag = $this->convertImage($imageUrl, $htmlTag, $customSrcSetTag, $layout);
+
+            if (!$pictureTag) {
+                continue;
+            }
+
+            $output = substr_replace($output, $pictureTag, $offset, strlen($htmlTag));
+            $accumulatedChange = $accumulatedChange + (strlen($pictureTag) - strlen($htmlTag));
+        }
+        return $output;
+    }
+
+    /**
+     * Get picture tag format
+     *
+     * @param LayoutInterface $layout
+     *
+     * @return Picture
+     */
+    private function getPicture(LayoutInterface $layout)
+    {
+        /** @var Picture $block */
+        $block = $layout->createBlock(Picture::class);
+        return $block;
+    }
+
+    /**
+     * Get exclude image attributes
+     *
+     * @return string
+     */
+    private function getExcludeImageAttributes()
+    {
+        $excludeImageAttributes = $this->helper->getExcludeImageAttribute();
+        if ($excludeImageAttributes) {
+            // Make sure unescaped slashes in blacklist get escaped.
+            $excludeImageAttributes = preg_replace('/([^\\\\]\\K\\/|^\\/)/', '\\/', $excludeImageAttributes);
+            $excludeImageAttributes = explode(',', $excludeImageAttributes);
+            $excludeImageAttributes = array_map('trim', $excludeImageAttributes);
+            $excludeImageAttributes = implode(".*|.*", $excludeImageAttributes);
+            $excludeImageAttributes = '/(.*data-nowebp=\"true\".*|.*\/media\/captcha\/.*|.*' .
+                                      $excludeImageAttributes . '.*)/mi';
+        } else {
+            $excludeImageAttributes = '/(.*data-nowebp=\"true\".*|.*\/media\/captcha\/.*)/mi';
+        }
+
+        return $excludeImageAttributes;
+    }
+
+    /**
+     * Convert Image
+     *
+     * @param string $imageUrl
+     * @param string $htmlTag
+     * @param string $customSrcSetTag
+     * @param LayoutInterface $layout
+     *
+     * @return bool|string
+     */
+    private function convertImage($imageUrl, $htmlTag, $customSrcSetTag, LayoutInterface $layout)
+    {
+        $lazyload = false;
+        if ($customSrcTag = $this->helper->getCustomSrcTag()) {
+            $expression = '/('.$customSrcTag.')=(\"|' . "\')([^<]+\.(png|jpg|jpeg))/mU";
+            if (preg_match_all($expression, $htmlTag, $match, PREG_OFFSET_CAPTURE)) {
+                $lazyload = true;
+                $imageUrl = $match[3][0][0];
+            }
+        }
+
+        $webpUrl = $this->helper->convert($imageUrl);
+
+        /**
+         * Skip when extension can not convert the image
+         */
+        if ($webpUrl === $imageUrl) {
+            return false;
+        }
+        if ($lazyload) {
+            $pictureTag = $this->getPicture($layout)
+                ->setOriginalImage($imageUrl)
+                ->setWebpImage($webpUrl)
+                ->setOriginalTag($htmlTag)
+                ->setCustomSrcTag($customSrcTag)
+                ->setCustomSrcSetTag($customSrcSetTag)
+                ->toHtml();
+        } else {
+            $pictureTag = $this->getPicture($layout)
+                ->setOriginalImage($imageUrl)
+                ->setWebpImage($webpUrl)
+                ->setOriginalTag($htmlTag)
+                ->toHtml();
+        }
+
+        return $pictureTag;
+    }
+}

vendor/jajuma/module-webpimages/Setup/Patch/Data/SetCwebpBinaryPath.php

+<?php
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+namespace Jajuma\WebpImages\Setup\Patch\Data;
+
+use Magento\Framework\App\ResourceConnection;
+use Magento\Framework\Setup\Patch\DataPatchInterface;
+use Magento\Framework\App\Config\Storage\WriterInterface;
+use Magento\Framework\Setup\ModuleDataSetupInterface;
+use Magento\Framework\App\Config\ScopeConfigInterface;
+use Magento\Framework\Module\Dir;
+
+class SetCwebpBinaryPath implements DataPatchInterface
+{
+    /**
+     * @var ModuleDataSetupInterface
+     */
+    private $moduleDataSetup;
+
+    /**
+     * @var WriterInterface
+     */
+    protected $configWriter;
+
+    /**
+     * @var ScopeConfigInterface
+     */
+    protected $scopeConfig;
+
+    /**
+     * @var Dir
+     */
+    protected $dir;
+
+    /**
+     * PatchInitial constructor.
+     * @param ModuleDataSetupInterface $moduleDataSetup
+     * @param WriterInterface $configWriter
+     * @param ScopeConfigInterface $scopeConfig
+     * @param Dir $dir
+     */
+    public function __construct(
+        ModuleDataSetupInterface $moduleDataSetup,
+        WriterInterface $configWriter,
+        ScopeConfigInterface $scopeConfig,
+        Dir $dir
+    ) {
+        $this->moduleDataSetup = $moduleDataSetup;
+        $this->configWriter = $configWriter;
+        $this->scopeConfig = $scopeConfig;
+        $this->dir = $dir;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function apply()
+    {
+        if(!$this->scopeConfig->getValue('webp/advance_mode/path_to_cwebp')) {
+            $this->configWriter->save(
+                'webp/advance_mode/path_to_cwebp',
+                $this->dir->getDir('Jajuma_WebpImages') . '/bin/cwebp'
+            );
+        }
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public static function getDependencies()
+    {
+        return [];
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getAliases()
+    {
+        return [];
+    }
+
+}

vendor/jajuma/module-webpimages/composer.json

+{
+  "name": "jajuma/module-webpimages",
+  "description": "WebP Optimized Images",
+    "type": "magento2-module",
+    "license": "MIT",
+    "version": "2.1.11",
+  "authors": [
+    {
+      "name": "JaJuMa",
+      "email": "info@jajuma.de"
+    }
+  ],
+  "minimum-stability": "dev",
+  "require": {},
+  "autoload": {
+    "psr-4": {
+      "Jajuma\\WebpImages\\": ""
+    },
+    "files": [
+      "registration.php"
+    ]
+  }
+}
\ No newline at end of file

vendor/jajuma/module-webpimages/etc/acl.xml

+<?xml version="1.0" ?>
+<!--
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
+    <acl>
+        <resources>
+            <resource id="Magento_Backend::admin">
+                <resource id="Magento_Backend::stores">
+                    <resource id="Magento_Backend::stores_settings">
+                        <resource id="Magento_Config::config">
+                            <resource id="Jajuma_General::jajuma_extensions" title="JaJuMa Extensions">
+                                <resource id="Jajuma_WebpImages::config_jajuma_webp" title="JaJuMa - WebP Images" sortOrder="500"/>
+                            </resource>
+                        </resource>
+                    </resource>
+                </resource>
+            </resource>
+        </resources>
+    </acl>
+</config>
\ No newline at end of file

vendor/jajuma/module-webpimages/etc/adminhtml/di.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
+    <type name="Magento\Config\Model\Config">
+        <plugin name="validate_webp_custom_command_before_save" type="Jajuma\WebpImages\Plugin\ConfigPlugin" sortOrder="1"/>
+    </type>
+
+    <type name="Magento\Backend\Model\Menu\Item">
+        <plugin name="jajumaExtensionsLink" type="Jajuma\WebpImages\Plugin\Backend\Model\Menu\Item\ExtensionsLinkPlugin"/>
+    </type>
+
+    <type name="Magento\Backend\Block\Menu">
+        <plugin name="jajumaExtensionsLinkJs" type="Jajuma\WebpImages\Plugin\Backend\Block\Menu\AddLinkJs"/>
+    </type>
+</config>
\ No newline at end of file

vendor/jajuma/module-webpimages/etc/adminhtml/menu.xml

+<?xml version="1.0" ?>
+<!--
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2022-present JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
+	<menu>
+		<update id="Jajuma::top_level_extensions"
+             module="Jajuma_WebpImages"
+             resource="Jajuma_General::jajuma_extensions"
+             sortOrder="65"
+             title="JaJuMa"/>
+
+		<add id="Jajuma_WebpImages::jajuma_webp_images"
+			 title="WebP Optimized Images"
+			 module="Jajuma_WebpImages"
+			 sortOrder="500"
+			 resource="Jajuma_WebpImages::config_jajuma_webp"
+			 parent="Jajuma::top_level_extensions"/>
+		<add id="Jajuma_WebpImages::jajuma_webp_images_configuration"
+			 title="Configuration"
+			 module="Jajuma_WebpImages"
+			 sortOrder="510"
+			 parent="Jajuma_WebpImages::jajuma_webp_images"
+			 action="admin/system_config/edit/section/webp"
+			 resource="Jajuma_WebpImages::config_jajuma_webp"/>
+
+		<update id="Jajuma::extensions"
+             module="Jajuma_WebpImages"
+             resource="Jajuma_General::jajuma_extensions"
+             sortOrder="10000"
+             parent="Jajuma::top_level_extensions"
+             title="JaJuMa Extensions"/>
+		<update id="Jajuma_Extensions::extensions_link"
+             title="More JaJuMa Extensions" module="Jajuma_WebpImages"
+             sortOrder="10010"
+             action="webpimages/extensions"
+             parent="Jajuma::extensions"
+             resource="Jajuma_General::jajuma_extensions"/>
+
+	</menu>
+</config>
\ No newline at end of file

vendor/jajuma/module-webpimages/etc/adminhtml/routes.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
+    <router id="admin">
+        <route id="webp" frontName="webp">
+            <module name="Jajuma_WebpImages" before="Magento_Backend" />
+        </route>
+    </router>
+</config>

vendor/jajuma/module-webpimages/etc/config.xml

+<?xml version="1.0" ?>
+<!--
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
+    <default>
+        <webp>
+            <setting>
+                <enable>1</enable>
+                <quality>75</quality>
+            </setting>
+        </webp>
+    </default>
+</config>
\ No newline at end of file

vendor/jajuma/module-webpimages/etc/frontend/di.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
+    <type name="Magento\Catalog\Block\Product\View\Gallery">
+        <plugin name="jajuma-webpimages-product-view-gallery" type="Jajuma\WebpImages\Plugin\Product\View\GalleryPlugin" sortOrder="5"/>
+    </type>
+    <type name="Magento\Framework\View\LayoutInterface">
+        <plugin name="jajuma-webpimages-replace-image-tag" type="Jajuma\WebpImages\Plugin\ReplaceImageTag"/>
+    </type>
+</config>
\ No newline at end of file

vendor/jajuma/module-webpimages/etc/frontend/routes.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
+    <router id="standard">
+        <route id="webp" frontName="webp">
+            <module name="Jajuma_WebpImages" />
+        </route>
+    </router>
+</config>
\ No newline at end of file

vendor/jajuma/module-webpimages/etc/module.xml

+<?xml version="1.0" ?>
+<!--
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
+    <module name="Jajuma_WebpImages" setup_version="2.1.4"/>
+</config>

vendor/jajuma/module-webpimages/registration.php

+<?php declare(strict_types = 1);
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'Jajuma_WebpImages',
+    __DIR__
+);

vendor/jajuma/module-webpimages/view/adminhtml/layout/adminhtml_system_config_edit.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceContainer name="header">
+            <block class="Magento\Backend\Block\Template" template="Jajuma_WebpImages::system/config/js.phtml"/>
+        </referenceContainer>
+    </body>
+</page>
\ No newline at end of file

vendor/jajuma/module-webpimages/view/adminhtml/layout/default.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <css src="Jajuma_WebpImages::css/main.css"/>
+    </head>
+</page>

vendor/jajuma/module-webpimages/view/adminhtml/layout/webp_test_index.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <css src="Jajuma_WebpImages::css/twentytwenty.css"/>
+    </head>
+    <body>
+        <referenceContainer name="header" remove="true"/>
+        <referenceContainer name="page.menu" remove="true"/>
+        <referenceContainer name="page.breadcrumbs" remove="true"/>
+        <referenceContainer name="footer" remove="true"/>
+        <referenceContainer name="content">
+            <block class="Jajuma\WebpImages\Block\Adminhtml\ConversionTool\Test\Result" name="conversion.tool.test.result" template="Jajuma_WebpImages::conversion_tool/test/result.phtml"/>
+        </referenceContainer>
+    </body>
+</page>

vendor/jajuma/module-webpimages/view/adminhtml/requirejs-config.js

+var config = {
+    paths: {
+        'twentytwenty': 'Jajuma_WebpImages/js/lib/jquery.twentytwenty',
+        'eventmove': 'Jajuma_WebpImages/js/lib/jquery.event.move',
+    },
+    shim: {
+        'twentytwenty': {
+            deps: ['jquery', 'eventmove']
+        }
+    }
+};
\ No newline at end of file

vendor/jajuma/module-webpimages/view/adminhtml/templates/backend/menu/link_blank.phtml

+<script>
+    require([
+        'jquery'
+    ], function ($) {
+        $(document).ready(function () {
+            $('a[href*="https://www.jajuma.de"]').attr('target', '_blank');
+        });
+    });
+</script>

vendor/jajuma/module-webpimages/view/adminhtml/templates/conversion_tool/test/result.phtml

+<?php
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+?>
+<style>
+    body .menu-wrapper {
+        display: none;
+    }
+    .webp-container-compare {
+        max-width: 700px;
+        margin: 0 auto;
+    }
+    body {
+        background: #ffffff;
+    }
+</style>
+<?php
+/**
+ * @var $block \Jajuma\WebpImages\Block\Adminhtml\ConversionTool\Test\Result
+ */
+$result = $block->convert();
+if (is_array($result)):
+    ?>
+<script type="text/javascript">
+    require([
+        'jquery',
+        'twentytwenty',
+    ], function () {
+        jQuery(document).ready(function() {
+            jQuery("#compare-image").twentytwenty({
+                default_offset_pct: 0.5,
+                orientation: 'horizontal',
+                before_label: 'ORIGINAL',
+                after_label: 'WEBP',
+                no_overlay: false,
+                move_slider_on_hover: false,
+                move_with_handle_only: true,
+                click_to_move: false
+            });
+        });
+    });
+</script>
+<div id="test-success-message">
+    <div class="messages">
+        <div class="message message-success success">
+            <div data-ui-id="messages-message-success">
+                <p><?= /* @noEscape */ __('Success!') ?></p>
+                <p><?= /* @noEscape */ __('Selected conversion tool works.') ?></p>
+                <p><?= /* @noEscape */__('WebP Image File was created 
+                using configured quality level / custom conversion command.') ?></p>
+                <p><?= /* @noEscape */ __('See below for comparison Original vs WebP:') ?></p>
+            </div>
+        </div>
+    </div>
+</div>
+    <?php if (strpos($result['original'], 'Jajuma_WebpImages/images/test.png') !== false): ?>
+    <div id="test-notice-message">
+        <div class="messages">
+            <div class="message message-notice notice">
+                <div data-ui-id="messages-message-notice">
+                    <p><?= /* @noEscape */__('Product ID used for testing 
+                    is invalid or that product has no image.<br>') ?>
+                       <?= /* @noEscape */__('Hence, below we can only show some sample image.<br>') ?>
+                       <?= /* @noEscape */ __('Please use another Product ID, 
+                       so we can show the conversion result with your own image.') ?></p>
+                </div>
+            </div>
+        </div>
+    </div>
+<?php endif; ?>
+<div class="webp-container-compare">
+    <div id="compare-image" class="twentytwenty-container">
+        <!-- The before image is first -->
+        <img src="<?= /* @noEscape */ $result['original'] ?>" />
+        <!-- The after image is last -->
+        <picture>
+            <source srcset="<?= /* @noEscape */ $result['webp'] ?>" type="image/webp">
+            <img src="<?= /* @noEscape */ $block->getUnsupportWebpImage() ?>" />
+        </picture>
+    </div>
+</div>
+<?php else: ?>
+    <div id="test-notice-message">
+        <div class="messages">
+            <div class="message message-warning">
+                <div data-ui-id="message message-warning">
+                    <?php if ($message = $block->getError()): ?>
+                        <p><?= /* @noEscape */ $message ?></p>
+                    <?php else: ?>
+                    <p><?= /* @noEscape */ __('Sorry, Image conversion failed.') ?></p>
+                    <p><?= /* @noEscape */__('Seems selected conversion tool is not available on your server.') ?></p>
+                    <p><?= /* @noEscape */ __('Can you please:') ?></p>
+                    <ul style="margin-left:20px;">
+                        <li><?= /* @noEscape */ __('Try another conversion tool') ?></li>
+                        <li><?= /* @noEscape */ __('And/or test with another image') ?></li>
+                        <li><?= /* @noEscape */ __('Check the extension manual 
+                        regrading conversion tool requirements') ?></li>
+                    </ul>
+                    <a 
+                        href="https://www.jajuma.de/en/jajuma-develop/
+                        extensions/webp-optimized-images-extension-for-magento-2" 
+                        target="_blank">
+                        Link To Manual
+                    </a>
+                    <?php endif; ?>
+                </div>
+            </div>
+        </div>
+    </div>
+<?php endif; ?>

vendor/jajuma/module-webpimages/view/adminhtml/templates/system/config/clearbutton.phtml

+<?php
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+?>
+<script type="text/javascript">
+    require([
+        'jquery',
+        'Magento_Ui/js/modal/confirm'
+    ], function ($, confirm) {
+        window.clearWebpImage = function() {
+            confirm({
+                title: '<?= /* @noEscape */__("Clear Image") ?>',
+                content: '<?= /* @noEscape */__("Do you want to delete all generated webp images") ?>',
+                actions: {
+                    confirm: function(){ window.location.href = "<?= /* @noEscape */ $block->getAdminUrl() ?>"},
+                    cancel: function(){ return false },
+                    always: function(){ return false }
+                }
+            });
+        }
+    });
+</script>
+
+<?= $block->getButtonHtml() ?>
\ No newline at end of file

vendor/jajuma/module-webpimages/view/adminhtml/templates/system/config/js.phtml

+<?php
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+?>
+<script type="text/javascript">
+    requirejs([
+        'jquery',
+        'jquery/ui',
+        'jquery/validate',
+        'mage/translate'
+    ], function($){
+        'use strict';
+        $.validator.addMethod(
+            "validate-cwebp-command",
+            function(value, element) {
+                return this.optional(element) || <?= \Jajuma\WebpImages\Helper\Data::REGX_CWEBP ?>.test(value);
+            },
+            $.mage.__("Incorrect cwebp custom command. Custom Command must only include " + 
+                     "underscore (_), minus (-), " + 
+                     "space ( ) and alphanumeric characters.")
+        );
+        $.validator.addMethod(
+            "validate-imagemagick-command",
+            function(value, element) {
+                return this.optional(element) || <?= \Jajuma\WebpImages\Helper\Data::REGX_IMAGEMAGICK ?>.test(value);
+            },
+            $.mage.__("Incorrect ImageMagick custom command. Custom Command must only include " + 
+                     "underscore (_), minus (-), space ( ), comma (,), colon (:), " +
+                     "equals sign (=) and alphanumeric characters.")
+        );
+        $.validator.addMethod(
+            "validate-cwebp-path",
+            function(value, element) {
+                return this.optional(element) || <?= \Jajuma\WebpImages\Helper\Data::REGX_CWEBP_PATH ?>.test(value);
+            },
+            $.mage.__("Incorrect cwebp path. Path must only include " + 
+                     "underscore (_), minus (-), dot (.), slash(/) and alphanumeric characters.")
+        );
+        $.validator.addMethod(
+            "validate-imagemagick-path",
+            function(value, element) {
+                return this.optional(element) 
+                    || <?= \Jajuma\WebpImages\Helper\Data::REGX_IMAGEMAGICK_PATH ?>.test(value);
+            },
+            $.mage.__("Incorrect ImageMagick path. Path must only include " + 
+                     "underscore (_), minus (-), dot (.), slash(/) and alphanumeric characters.")
+        );
+    });
+</script>
+

vendor/jajuma/module-webpimages/view/adminhtml/templates/system/config/testbutton.phtml

+<?php
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+
+/**
+ * @var $block Jajuma\WebpPlus\Block\Adminhtml\System\Config\TestButton
+ */
+?>
+<style>
+    .test-conversion-tool-wrapper {
+        display: flex;
+    }
+
+    .test-conversion-tool-wrapper .product-input-wrapper {
+        margin-left: 10px;
+        display: flex;
+    }
+    .test-conversion-tool-wrapper .product-input-wrapper .product {
+        width: 80px;
+    }
+
+    .test-conversion-tool-wrapper .product-input-wrapper .tooltip {
+        line-height: 26px;
+    }
+</style>
+<script type="text/javascript">
+    require([
+        'jquery',
+        'Magento_Ui/js/modal/modal',
+        'Magento_Ui/js/modal/alert'
+    ], function ($, modal, alert) {
+        window.conversionToolTest = function() {
+            if (!$.isNumeric($('#webp_advance_mode_quality').val())) {
+                alert({
+                    title: 'Error',
+                    content: "<?= /* @noEscape */ __('Quality should be a numeric value') ?>",
+                    actions: {
+                        always: function(){}
+                    }
+                });
+                return;
+            }
+            $('body').trigger('processStart');
+            $('#iFrame').remove();
+            let productId = $('.product-input-wrapper .product').val();
+            let postData = {form_key: FORM_KEY, product: productId};
+
+            configForm.find('[id^=webp_advance_mode]').find(':input').serializeArray().map(function(field) {
+                var name = field.name.match(/groups\[advance_mode\]?(\[groups\]\[debug\])?\[fields\]\[(.*)\]\[value]/);
+
+                if(name && name.length === 3){
+                    postData[name[2]] = field.value;
+                }
+            });
+            let options ={
+                type: 'popup',
+                title: '<?= /* @noEscape */ __('Test Conversion Tool') ?>',
+                responsive: true,
+                innerScroll: false,
+                buttons: [{
+                    text: $.mage.__('Close'),
+                    class: 'close-modal',
+                    click: function () {
+                        this.closeModal();
+                    }
+                }]
+            };
+            let popup = modal(options, $('#quickViewContainer'));
+            let modalContainer = $("#quickViewContainer");
+            let iframe = $('<iframe />', {
+                id: 'iFrame',
+                src: "<?= /* @noEscape */ $block->getAdminUrl() ?>?" + $.param( postData, true )
+            });
+            modalContainer.html(iframe);
+            $('#iFrame').on("load", function () {
+                $('body').trigger('processStop');
+                modalContainer.addClass("quick-view-image");
+                modalContainer.modal('openModal');
+                this.style.height = this.contentWindow.document.body.scrollHeight+ 10 + 'px';
+                this.style.border = '0';
+                this.style.width = '100%';
+            });
+        }
+    });
+</script>
+<div class="test-conversion-tool-wrapper">
+    <div class="button-wrapper">
+        <?= $block->getButtonHtml() ?>
+    </div>
+    <div class="product-input-wrapper">
+        <input type="text" name="product_id" class="product" value="<?= /* @noEscape */ $block->getLatestProductId()?>">
+        <div class="tooltip">
+            <span class="help"><span></span></span>
+            <div class="tooltip-content">Fill your product id to test the conversion tool</div>
+        </div>
+    </div>
+</div>
+<div id="quickViewContainer">
+
+</div>

vendor/jajuma/module-webpimages/view/adminhtml/web/css/twentytwenty.css

+.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+  content: " ";
+  display: block;
+  background: white;
+  position: absolute;
+  z-index: 30;
+  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
+  width: 3px;
+  height: 9999px;
+  left: 50%;
+  margin-left: -1.5px; }
+
+.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+  width: 9999px;
+  height: 3px;
+  top: 50%;
+  margin-top: -1.5px; }
+
+.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%; }
+
+.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+  -webkit-transition-duration: 0.5s;
+  -moz-transition-duration: 0.5s;
+  transition-duration: 0.5s; }
+
+.twentytwenty-before-label, .twentytwenty-after-label {
+  -webkit-transition-property: opacity;
+  -moz-transition-property: opacity;
+  transition-property: opacity; }
+
+.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+  color: white;
+  font-size: 13px;
+  letter-spacing: 0.1em; }
+
+.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.2);
+  line-height: 38px;
+  padding: 0 20px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px; }
+
+.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
+  top: 50%;
+  margin-top: -19px; }
+
+.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
+  left: 50%;
+  margin-left: -45px;
+  text-align: center;
+  width: 90px; }
+
+.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
+  width: 0;
+  height: 0;
+  border: 6px inset transparent;
+  position: absolute; }
+
+.twentytwenty-left-arrow, .twentytwenty-right-arrow {
+  top: 50%;
+  margin-top: -6px; }
+
+.twentytwenty-up-arrow, .twentytwenty-down-arrow {
+  left: 50%;
+  margin-left: -6px; }
+
+.twentytwenty-container {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  z-index: 0;
+  overflow: hidden;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none; }
+  .twentytwenty-container img {
+    max-width: 100%;
+    position: absolute;
+    top: 0;
+    display: block; }
+  .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
+    background: rgba(0, 0, 0, 0); }
+    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
+    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
+    .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
+      opacity: 0; }
+  .twentytwenty-container * {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box; }
+
+.twentytwenty-before-label {
+  opacity: 0; }
+  .twentytwenty-before-label:before {
+    content: attr(data-content); }
+
+.twentytwenty-after-label {
+  opacity: 0; }
+  .twentytwenty-after-label:before {
+    content: attr(data-content); }
+
+.twentytwenty-horizontal .twentytwenty-before-label:before {
+  left: 10px; }
+
+.twentytwenty-horizontal .twentytwenty-after-label:before {
+  right: 10px; }
+
+.twentytwenty-vertical .twentytwenty-before-label:before {
+  top: 10px; }
+
+.twentytwenty-vertical .twentytwenty-after-label:before {
+  bottom: 10px; }
+
+.twentytwenty-overlay {
+  -webkit-transition-property: background;
+  -moz-transition-property: background;
+  transition-property: background;
+  background: rgba(0, 0, 0, 0);
+  z-index: 25; }
+  .twentytwenty-overlay:hover {
+    background: rgba(0, 0, 0, 0.5); }
+    .twentytwenty-overlay:hover .twentytwenty-after-label {
+      opacity: 1; }
+    .twentytwenty-overlay:hover .twentytwenty-before-label {
+      opacity: 1; }
+
+.twentytwenty-before {
+  z-index: 20; }
+
+.twentytwenty-after {
+  z-index: 10; }
+
+.twentytwenty-handle {
+  height: 38px;
+  width: 38px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -22px;
+  margin-top: -22px;
+  border: 3px solid white;
+  -webkit-border-radius: 1000px;
+  -moz-border-radius: 1000px;
+  border-radius: 1000px;
+  -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  z-index: 40;
+  cursor: pointer; }
+
+.twentytwenty-horizontal .twentytwenty-handle:before {
+  bottom: 50%;
+  margin-bottom: 22px;
+  -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+.twentytwenty-horizontal .twentytwenty-handle:after {
+  top: 50%;
+  margin-top: 22px;
+  -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-vertical .twentytwenty-handle:before {
+  left: 50%;
+  margin-left: 22px;
+  -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+.twentytwenty-vertical .twentytwenty-handle:after {
+  right: 50%;
+  margin-right: 22px;
+  -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+
+.twentytwenty-left-arrow {
+  border-right: 6px solid white;
+  left: 50%;
+  margin-left: -17px; }
+
+.twentytwenty-right-arrow {
+  border-left: 6px solid white;
+  right: 50%;
+  margin-right: -17px; }
+
+.twentytwenty-up-arrow {
+  border-bottom: 6px solid white;
+  top: 50%;
+  margin-top: -17px; }
+
+.twentytwenty-down-arrow {
+  border-top: 6px solid white;
+  bottom: 50%;
+  margin-bottom: -17px; }

vendor/jajuma/module-webpimages/view/adminhtml/web/images/idea.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M112.1 454.3c0 6.297 1.816 12.44 5.284 17.69l17.14 25.69c5.25 7.875 17.17 14.28 26.64 14.28h61.67c9.438 0 21.36-6.401 26.61-14.28l17.08-25.68c2.938-4.438 5.348-12.37 5.348-17.7L272 415.1h-160L112.1 454.3zM192 0C90.02 .3203 16 82.97 16 175.1c0 44.38 16.44 84.84 43.56 115.8c16.53 18.84 42.34 58.23 52.22 91.45c.0313 .25 .0938 .5166 .125 .7823h160.2c.0313-.2656 .0938-.5166 .125-.7823c9.875-33.22 35.69-72.61 52.22-91.45C351.6 260.8 368 220.4 368 175.1C368 78.8 289.2 .0039 192 0zM288.4 260.1c-15.66 17.85-35.04 46.3-49.05 75.89h-94.61c-14.01-29.59-33.39-58.04-49.04-75.88C75.24 236.8 64 206.1 64 175.1C64 113.3 112.1 48.25 191.1 48C262.6 48 320 105.4 320 175.1C320 206.1 308.8 236.8 288.4 260.1zM176 80C131.9 80 96 115.9 96 160c0 8.844 7.156 16 16 16S128 168.8 128 160c0-26.47 21.53-48 48-48c8.844 0 16-7.148 16-15.99S184.8 80 176 80z"/></svg>
\ No newline at end of file

vendor/jajuma/module-webpimages/view/adminhtml/web/images/images.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="#a79d95" viewBox="0 0 576 512" class="w-10 h-10" width="25" height="25"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M512 32H160c-35.35 0-64 28.65-64 64v224c0 35.35 28.65 64 64 64H512c35.35 0 64-28.65 64-64V96C576 60.65 547.3 32 512 32zM528 320c0 8.822-7.178 16-16 16h-16l-109.3-160.9C383.7 170.7 378.7 168 373.3 168c-5.352 0-10.35 2.672-13.31 7.125l-62.74 94.11L274.9 238.6C271.9 234.4 267.1 232 262 232c-5.109 0-9.914 2.441-12.93 6.574L176 336H160c-8.822 0-16-7.178-16-16V96c0-8.822 7.178-16 16-16H512c8.822 0 16 7.178 16 16V320zM224 112c-17.67 0-32 14.33-32 32s14.33 32 32 32c17.68 0 32-14.33 32-32S241.7 112 224 112zM456 480H120C53.83 480 0 426.2 0 360v-240C0 106.8 10.75 96 24 96S48 106.8 48 120v240c0 39.7 32.3 72 72 72h336c13.25 0 24 10.75 24 24S469.3 480 456 480z"></path></svg>
\ No newline at end of file

vendor/jajuma/module-webpimages/view/adminhtml/web/js/lib/jquery.twentytwenty.js

+(function($){
+
+  $.fn.twentytwenty = function(options) {
+    var options = $.extend({
+      default_offset_pct: 0.5,
+      orientation: 'horizontal',
+      before_label: 'Before',
+      after_label: 'After',
+      no_overlay: false,
+      move_slider_on_hover: false,
+      move_with_handle_only: true,
+      click_to_move: false
+    }, options);
+
+    return this.each(function() {
+
+      var sliderPct = options.default_offset_pct;
+      var container = $(this);
+      var sliderOrientation = options.orientation;
+      var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
+      var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
+
+
+      container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
+      if(!options.no_overlay) {
+        container.append("<div class='twentytwenty-overlay'></div>");
+        var overlay = container.find(".twentytwenty-overlay");
+        overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
+        overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
+      }
+      var beforeImg = container.find("img:first");
+      var afterImg = container.find("img:last");
+      container.append("<div class='twentytwenty-handle'></div>");
+      var slider = container.find(".twentytwenty-handle");
+      slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
+      slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
+      container.addClass("twentytwenty-container");
+      beforeImg.addClass("twentytwenty-before");
+      afterImg.addClass("twentytwenty-after");
+      
+      var calcOffset = function(dimensionPct) {
+        var w = beforeImg.width();
+        var h = beforeImg.height();
+        return {
+          w: w+"px",
+          h: h+"px",
+          cw: (dimensionPct*w)+"px",
+          ch: (dimensionPct*h)+"px"
+        };
+      };
+
+      var adjustContainer = function(offset) {
+      	if (sliderOrientation === 'vertical') {
+          beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
+          afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)");
+      	}
+      	else {
+          beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
+          afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
+    	}
+        container.css("height", offset.h);
+      };
+
+      var adjustSlider = function(pct) {
+        var offset = calcOffset(pct);
+        slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
+        adjustContainer(offset);
+      };
+
+      // Return the number specified or the min/max number if it outside the range given.
+      var minMaxNumber = function(num, min, max) {
+        return Math.max(min, Math.min(max, num));
+      };
+
+      // Calculate the slider percentage based on the position.
+      var getSliderPercentage = function(positionX, positionY) {
+        var sliderPercentage = (sliderOrientation === 'vertical') ?
+          (positionY-offsetY)/imgHeight :
+          (positionX-offsetX)/imgWidth;
+
+        return minMaxNumber(sliderPercentage, 0, 1);
+      };
+
+
+      $(window).on("resize.twentytwenty", function(e) {
+        adjustSlider(sliderPct);
+      });
+
+      var offsetX = 0;
+      var offsetY = 0;
+      var imgWidth = 0;
+      var imgHeight = 0;
+      var onMoveStart = function(e) {
+        if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
+          e.preventDefault();
+        }
+        else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
+          e.preventDefault();
+        }
+        container.addClass("active");
+        offsetX = container.offset().left;
+        offsetY = container.offset().top;
+        imgWidth = beforeImg.width(); 
+        imgHeight = beforeImg.height();          
+      };
+      var onMove = function(e) {
+        if (container.hasClass("active")) {
+          sliderPct = getSliderPercentage(e.pageX, e.pageY);
+          adjustSlider(sliderPct);
+        }
+      };
+      var onMoveEnd = function() {
+          container.removeClass("active");
+      };
+
+      var moveTarget = options.move_with_handle_only ? slider : container;
+      moveTarget.on("movestart",onMoveStart);
+      moveTarget.on("move",onMove);
+      moveTarget.on("moveend",onMoveEnd);
+
+      if (options.move_slider_on_hover) {
+        container.on("mouseenter", onMoveStart);
+        container.on("mousemove", onMove);
+        container.on("mouseleave", onMoveEnd);
+      }
+
+      slider.on("touchmove", function(e) {
+        e.preventDefault();
+      });
+
+      container.find("img").on("mousedown", function(event) {
+        event.preventDefault();
+      });
+
+      if (options.click_to_move) {
+        container.on('click', function(e) {
+          offsetX = container.offset().left;
+          offsetY = container.offset().top;
+          imgWidth = beforeImg.width();
+          imgHeight = beforeImg.height();
+
+          sliderPct = getSliderPercentage(e.pageX, e.pageY);
+          adjustSlider(sliderPct);
+        });
+      }
+
+      $(window).trigger("resize.twentytwenty");
+    });
+  };
+
+})(jQuery);

vendor/jajuma/module-webpimages/view/frontend/layout/default_head_blocks.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <css src="Jajuma_WebpImages::css/web.css"/>
+    </head>
+</page>

vendor/jajuma/module-webpimages/view/frontend/requirejs-config.js

+var config = {
+    deps: ["Jajuma_WebpImages/js/webpimages"],
+    config: {
+        mixins: {
+            'mage/gallery/gallery': {
+                'Jajuma_WebpImages/js/gallery/gallery-mixin': true
+            },
+            'Magento_Swatches/js/swatch-renderer': {
+                'Jajuma_WebpImages/js/swatch-renderer-mixin': true
+            },
+        }
+    }
+};
\ No newline at end of file

vendor/jajuma/module-webpimages/view/frontend/templates/picture-tag-format.phtml

+<?php
+/**
+ * @author    JaJuMa GmbH <info@jajuma.de>
+ * @copyright Copyright (c) 2020 JaJuMa GmbH <https://www.jajuma.de>. All rights reserved.
+ * @license   http://opensource.org/licenses/mit-license.php MIT License
+ */
+
+/** @var $block \Jajuma\WebpImages\Block\Picture */
+$customSrcTag = $block->getCustomSrcTag();
+$customSrcSetTag = $block->getCustomSrcSetTag();
+
+$originalTag = $block->getOriginalTag();
+
+$isLazyLoadEnabled = $block->isNativeLazyLoadingEnabled();
+$excludeNativeLazyloadImageAttributes = $block->getExcludeNativeLazyloadImageAttributes();
+$isImageInExcludeList = preg_match_all($excludeNativeLazyloadImageAttributes, $originalTag);
+
+if ($isLazyLoadEnabled && !$isImageInExcludeList) {
+    // add loading="lazy" at the end of the img tag
+    $originalTag = preg_replace('/>$/', ' loading="lazy" />', $originalTag);
+}
+?>
+<?php if ($customSrcTag): ?>
+    <picture>
+        <source type="image/webp" <?= /* @noEscape */ $customSrcSetTag ? $customSrcSetTag : 'srcset' ?>="
+        <?= /* @noEscape */ $block->getWebpImage() ?>">
+        <source type="<?= /* @noEscape */ $block->getOriginalImageType() ?>" 
+        <?= /* @noEscape */ $customSrcSetTag ? $customSrcSetTag : 'srcset' ?>="
+        <?= /* @noEscape */ $block->getOriginalImage() ?>">
+        <?= /* @noEscape */ $originalTag ?>
+    </picture>
+<?php else: ?>
+    <picture>
+        <source type="image/webp" srcset="<?= /* @noEscape */ $block->getWebpImage() ?>">
+        <source type="<?= /* @noEscape */ $block->getOriginalImageType() ?>" 
+        srcset="<?= /* @noEscape */ $block->getOriginalImage() ?>">
+        <?= /* @noEscape */ $originalTag ?>
+    </picture>
+<?php endif; ?>
+

vendor/jajuma/module-webpimages/view/frontend/web/css/web.css

+.swatch-option-loading-webp {
+    content: url(../../images/loader-2.gif);
+}
\ No newline at end of file

vendor/jajuma/module-webpimages/view/frontend/web/js/gallery/gallery-mixin.js

+define(['jquery','mage/utils/wrapper','Jajuma_WebpImages/js/lib/modernizr-webp'], function ($, wrapper) {
+    'use strict';
+
+    return function (initialize) {
+        return wrapper.wrap(initialize, function (initialize, config, element) {
+            ModernizrJajuma.on('webp', function(result) {
+                if (result) {
+                    $.each(config.data, function (key, value) {
+                        value.full = value.full_webp;
+                        value.thumb = value.thumb_webp;
+                        value.img = value.img_webp;
+                        config.data[key] = value;
+                    });
+                }
+                initialize(config, element);
+            });
+        });
+    };
+});
\ No newline at end of file

vendor/jajuma/module-webpimages/view/frontend/web/js/lib/modernizr-webp.js

+/*! modernizr 3.6.0 (Custom Build) | MIT *
+ * https://modernizr.com/download/?-webp-setclasses !*/
+!function(e,n,A){function o(e,n){return typeof e===n}function t(){var e,n,A,t,a,i,l;for(var f in r)if(r.hasOwnProperty(f)){if(e=[],n=r[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(A=0;A<n.options.aliases.length;A++)e.push(n.options.aliases[A].toLowerCase());for(t=o(n.fn,"function")?n.fn():n.fn,a=0;a<e.length;a++)i=e[a],l=i.split("."),1===l.length?ModernizrJajuma[l[0]]=t:(!ModernizrJajuma[l[0]]||ModernizrJajuma[l[0]]instanceof Boolean||(ModernizrJajuma[l[0]]=new Boolean(ModernizrJajuma[l[0]])),ModernizrJajuma[l[0]][l[1]]=t),s.push((t?"":"no-")+l.join("-"))}}function a(e){var n=u.className,A=ModernizrJajuma._config.classPrefix||"";if(c&&(n=n.baseVal),ModernizrJajuma._config.enableJSClass){var o=new RegExp("(^|\\s)"+A+"no-js(\\s|$)");n=n.replace(o,"$1"+A+"js$2")}ModernizrJajuma._config.enableClasses&&(n+=" "+A+e.join(" "+A),c?u.className.baseVal=n:u.className=n)}function i(e,n){if("object"==typeof e)for(var A in e)f(e,A)&&i(A,e[A]);else{e=e.toLowerCase();var o=e.split("."),t=ModernizrJajuma[o[0]];if(2==o.length&&(t=t[o[1]]),"undefined"!=typeof t)return ModernizrJajuma;n="function"==typeof n?n():n,1==o.length?ModernizrJajuma[o[0]]=n:(!ModernizrJajuma[o[0]]||ModernizrJajuma[o[0]]instanceof Boolean||(ModernizrJajuma[o[0]]=new Boolean(ModernizrJajuma[o[0]])),ModernizrJajuma[o[0]][o[1]]=n),a([(n&&0!=n?"":"no-")+o.join("-")]),ModernizrJajuma._trigger(e,n)}return ModernizrJajuma}var s=[],r=[],l={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var A=this;setTimeout(function(){n(A[e])},0)},addTest:function(e,n,A){r.push({name:e,fn:n,options:A})},addAsyncTest:function(e){r.push({name:null,fn:e})}},ModernizrJajuma=function(){};ModernizrJajuma.prototype=l,ModernizrJajuma=new ModernizrJajuma;var f,u=n.documentElement,c="svg"===u.nodeName.toLowerCase();!function(){var e={}.hasOwnProperty;f=o(e,"undefined")||o(e.call,"undefined")?function(e,n){return n in e&&o(e.constructor.prototype[n],"undefined")}:function(n,A){return e.call(n,A)}}(),l._l={},l.on=function(e,n){this._l[e]||(this._l[e]=[]),this._l[e].push(n),ModernizrJajuma.hasOwnProperty(e)&&setTimeout(function(){ModernizrJajuma._trigger(e,ModernizrJajuma[e])},0)},l._trigger=function(e,n){if(this._l[e]){var A=this._l[e];setTimeout(function(){var e,o;for(e=0;e<A.length;e++)(o=A[e])(n)},0),delete this._l[e]}},ModernizrJajuma._q.push(function(){l.addTest=i}),ModernizrJajuma.addAsyncTest(function(){function e(e,n,A){function o(n){var o=n&&"load"===n.type?1==t.width:!1,a="webp"===e;i(e,a&&o?new Boolean(o):o),A&&A(n)}var t=new Image;t.onerror=o,t.onload=o,t.src=n}var n=[{uri:"data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=",name:"webp"},{uri:"data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==",name:"webp.alpha"},{uri:"data:image/webp;base64,UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA",name:"webp.animation"},{uri:"data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=",name:"webp.lossless"}],A=n.shift();e(A.name,A.uri,function(A){if(A&&"load"===A.type)for(var o=0;o<n.length;o++)e(n[o].name,n[o].uri)})}),t(),a(s),delete l.addTest,delete l.addAsyncTest;for(var p=0;p<ModernizrJajuma._q.length;p++)ModernizrJajuma._q[p]();e.ModernizrJajuma=ModernizrJajuma}(window,document);
\ No newline at end of file

vendor/jajuma/module-webpimages/view/frontend/web/js/swatch-renderer-mixin.js

+define([
+    'jquery',
+    'jquery/ui',
+    "domReady!",
+    'Jajuma_WebpImages/js/lib/modernizr-webp'
+], function ($) {
+    'use strict';
+
+    return function (widget) {
+        $.widget('mage.SwatchRenderer', widget, {
+            _OnClick: function ($this, $widget) {
+                var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
+                    $wrapper = $this.parents('.' + $widget.options.classes.attributeOptionsWrapper),
+                    $label = $parent.find('.' + $widget.options.classes.attributeSelectedOptionLabelClass),
+                    attributeId = (typeof $parent.attr('attribute-id') != 'undefined') ? $parent.attr('attribute-id') : (typeof $parent.attr('data-attribute-id') != 'undefined') ? $parent.attr('data-attribute-id') : false,
+                    optionId = (typeof $this.attr('option-id') != 'undefined') ? $this.attr('option-id') : (typeof $this.attr('data-option-id') != 'undefined') ? $this.attr('data-option-id') : false,
+                    optionLabel = (typeof $this.attr('option-label') != 'undefined') ? $this.attr('option-label') : (typeof $this.attr('data-option-label') != 'undefined') ? $this.attr('data-option-label') : false,
+                    $input = $parent.find('.' + $widget.options.classes.attributeInput);
+
+                if (typeof this.options.jsonSwatchConfig[attributeId]['additional_data'] != 'undefined') {
+                    var checkAdditionalData = JSON.parse(this.options.jsonSwatchConfig[attributeId]['additional_data']);
+                }
+
+                if ($widget.inProductList) {
+                    $input = $widget.productForm.find(
+                        '.' + $widget.options.classes.attributeInput + '[name="super_attribute[' + attributeId + ']"]'
+                    );
+                }
+
+                if ($this.hasClass('disabled')) {
+                    return;
+                }
+
+                if ($this.hasClass('selected')) {
+                    $parent.removeAttr('option-selected').find('.selected').removeClass('selected');
+                    $input.val('');
+                    $label.text('');
+                    $this.attr('aria-checked', false);
+                } else {
+                    if ((typeof $this.attr('option-id') != 'undefined') ) {
+                        $parent.attr('option-selected', $this.attr('option-id')).find('.selected').removeClass('selected');
+                    }
+                    if ((typeof $this.attr('data-option-id') != 'undefined') ) {
+                        $parent.attr('data-option-selected', $this.attr('data-option-id')).find('.selected').removeClass('selected');
+                    }
+                    $label.text(optionLabel);
+                    $input.val(optionId);
+                    $input.attr('data-attr-name', this._getAttributeCodeById(attributeId));
+                    $this.addClass('selected');
+                    $widget._toggleCheckedAttributes($this, $wrapper);
+                }
+
+                $widget._Rebuild();
+
+                if ($widget.element.parents($widget.options.selectorProduct)
+                    .find(this.options.selectorProductPrice).is(':data(mage-priceBox)')
+                ) {
+                    $widget._UpdatePrice();
+                }
+
+                $(document).trigger('updateMsrpPriceBlock',
+                    [
+                        parseInt($this.attr('index'), 10) + 1,
+                        $widget.options.jsonConfig.optionPrices
+                    ]);
+
+                if (typeof checkAdditionalData != 'undefined') {
+                    if (checkAdditionalData['update_product_preview_image'] == '1') {
+                        $widget._loadMedia();
+                    }
+                } else {
+                    $widget._loadMedia();
+                }
+
+                $input.trigger('change');
+            },
+            updateBaseImage: function (images, context, isInProductView) {
+                var justAnImage = images[0],
+                    initialImages = this.options.mediaGalleryInitial,
+                    imagesToUpdate,
+                    gallery = context.find(this.options.mediaGallerySelector).data('gallery'),
+                    isInitial,
+                    self = this;
+
+                if (isInProductView) {
+                    imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
+                    isInitial = _.isEqual(imagesToUpdate, initialImages);
+
+                    if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial) {
+                        imagesToUpdate = imagesToUpdate.concat(initialImages);
+                    }
+
+                    imagesToUpdate = this._setImageIndex(imagesToUpdate);
+
+                    if (!_.isUndefined(gallery)) {
+                        ModernizrJajuma.on('webp', function(result) {
+                            if (result) {
+                                // custom replace images with webp images
+                                self.convertImgToWebp(imagesToUpdate, context, isInProductView, justAnImage);
+                            }
+                        });
+                    } else {
+                        context.find(this.options.mediaGallerySelector).on('gallery:loaded', function (loadedGallery) {
+                            loadedGallery = context.find(this.options.mediaGallerySelector).data('gallery');
+                            loadedGallery.updateData(imagesToUpdate);
+                        }.bind(this));
+                    }
+
+                    if (isInitial) {
+                        $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
+                    } else {
+                        $(this.options.mediaGallerySelector).AddFotoramaVideoEvents({
+                            selectedOption: this.getProduct(),
+                            dataMergeStrategy: this.options.gallerySwitchStrategy
+                        });
+                    }
+                    gallery.first();
+                } else if (justAnImage && justAnImage.img) {
+                    ModernizrJajuma.on('webp', function(result) {
+                        if (result) {
+                            // custom replace images with webp images
+                            self.convertImgToWebp(images, context, isInProductView, justAnImage);
+                        } else {
+                            context.find('.product-image-photo').attr('src', justAnImage.img);
+                            context.find('[type="image/jpg"]').attr('srcset', justAnImage.img);
+                        }
+                    });
+                }
+            },
+            convertImgToWebp: function (images, context, isInProductView, justAnImage) {
+                var gallery = context.find(this.options.mediaGallerySelector).data('gallery');
+
+                if (justAnImage.img.indexOf('.webp') !== -1) {
+                    if (!isInProductView) {
+                        context.find('[type="image/webp"]').attr('srcset', justAnImage.img);
+                    }
+                } else {
+                    $.ajax({
+                        url: BASE_URL + 'webp/image/convert',
+                        data: {
+                            images: images,
+                            isInProductView: isInProductView
+                        },
+                        type: 'POST',
+                        beforeSend: function () {
+                            // add loading
+                            if (isInProductView) {
+                                // add loading for main .fotorama__active
+                                $('.fotorama__stage .fotorama__img').addClass('swatch-option-loading-webp');
+
+                                // add loading for thumb .fotorama__active
+                                $('.fotorama__thumb img').addClass('swatch-option-loading-webp');
+                            } else {
+                                // add loading for main image in category page
+                                context.find('.product-image-photo').addClass('swatch-option-loading-webp');
+                            }
+                        },
+                        success: function (response) {
+                            if (response.webpUrls.length != 0) {
+                                // replace jpg/png image with webp image in category page only
+                                if (!isInProductView) {
+                                    // remove loading for main image in category page
+                                    context.find('.product-image-photo').removeClass('swatch-option-loading-webp');
+                                    // load image
+                                    context.find('[type="image/webp"]').attr('srcset', response.webpUrls[0]['img']);
+                                }
+
+                                // replace jpg/png image with webp image in fotorama images in product page only
+                                if (isInProductView) {
+                                    // load image
+                                    gallery.updateData(response.webpUrls);
+                                    // remove loading for main .fotorama__active
+                                    $('.fotorama__stage .fotorama__img').removeClass('swatch-option-loading-webp');
+
+                                    // remove loading for thumb .fotorama__active
+                                    $('.fotorama__thumb img').removeClass('swatch-option-loading-webp');
+                                }
+                            }
+                        }
+                    });
+                }
+            }
+        });
+
+        return $.mage.SwatchRenderer;
+    }
+});

vendor/jajuma/module-webpimages/view/frontend/web/js/webpimages.js

+require([
+    'jquery',
+    'Jajuma_WebpImages/js/lib/modernizr-webp'
+],function($){
+    $(document).ready(function() {
+        ModernizrJajuma.on('webp', function(result) {
+            if (!result) {
+                $('body').addClass('no-webp');
+            }
+        });
+    })
+})