feat: added webp webpack image converter

package.json

@@ -190,6 +190,7 @@
     "bootstrap-italia": "1.3.9",
     "classnames": "2.2.6",
     "design-react-kit": "3.1.3",
+    "image-webpack-loader": "^8.1.0",
     "react-dropzone": "11.0.1",
     "react-google-recaptcha-v3": "1.7.0",
     "react-select": "^4.3.1",

razzle.config.js

@@ -58,8 +58,54 @@ module.exports = Object.assign({}, volto_config, {
       ],
     };
 
+    const TO_WEBP_LOADER = {
+      test: /\.(gif|png|jpe?g)$/i,
+      use: [
+        'file-loader',
+        {
+          loader: 'image-webpack-loader',
+          options: {
+            //bypassOnDebug: true, // webpack@1.x
+            //disable: true, // webpack@2.x and newer //
+
+            //Compress JPEG images
+            mozjpeg: {
+              progressive: true,
+              enabled: false,
+            },
+            //Compress PNG images
+            optipng: {
+              enabled: false,
+            },
+            //Compress PNG images
+            pngquant: {
+              quality: [0.65, 0.9],
+              speed: 4,
+              enabled: false,
+            },
+            //Compress SVG images
+            svgo: {
+              enabled: false,
+            },
+            //Compress GIF images
+            gifsicle: {
+              interlaced: false,
+              enabled: false,
+            },
+            //Compress JPG & PNG images into WEBP. The webp option will enable WEBP
+            webp: {
+              quality: 85,
+              enabled: true,
+            },
+          },
+        },
+      ],
+    };
+
     base_config.module.rules.push(SVG_LOADER);
 
+    base_config.module.rules.push(TO_WEBP_LOADER);
+
     webpackConfig.resolve.alias = {
       ...webpackConfig.resolve.alias,
       ...base_config.resolve.alias,
@@ -76,6 +122,7 @@ module.exports = Object.assign({}, volto_config, {
   },
   plugins: [
     ...(volto_config.plugins || {}),
+
     {
       name: 'scss',
       options: {

src/components/ItaliaTheme/Logo/Logo.jsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import { Icon } from '@italia/components/ItaliaTheme';
+import logo from './logo.png';
 
 /*
  * Customization with image
  *
  * If you have a jpg/png, do like this:
  *
  * <figure className="icon">
- *  <img src={logo} alt="" />
+ *  <img src={logo} alt="" width="" height="" />
  * </figure>
  *
  * Note the icon class.
  */
 
-const Logo = () => <Icon color="" icon="it-pa" padding={false} size="" />;
+const Logo = () => <img src={logo} className="icon" />; //<Icon color="" icon="it-pa" padding={false} size="" />;
 
 export default Logo;

src/components/ItaliaTheme/LogoFooter/LogoFooter.jsx

@@ -7,7 +7,7 @@ import { Icon } from '@italia/components/ItaliaTheme';
  * If you have a jpg/png, do like this:
  *
  * <figure className="icon">
- *  <img src={logo} alt="" />
+ *  <img src={logo} alt="" width="" height="" />
  * </figure>
  *
  * Note the icon class.