perf (lazysizes): remove lazysizes, use native lazy attribute instead

assets/conf-img/sizes/square-native.json

@@ -0,0 +1,12 @@
+[
+    {
+        "width": 500,
+        "height": 500,
+        "crop": true
+    },
+    {
+        "width": 1000,
+        "height": 1000,
+        "crop": true
+    }
+]

assets/conf-img/tpl/default-native-caption.tpl

@@ -0,0 +1,5 @@
+%%data-location%%
+<figure>
+    <img %%src%% %%srcset%% %%attributes%% />
+    <figcaption>%%caption%%</figcaption>
+</figure>

assets/conf-img/tpl/default-native.tpl

@@ -0,0 +1,2 @@
+%%data-location%%
+<img %%src%% %%srcset%% %%attributes%% />

config/plugins.js

@@ -9,7 +9,7 @@ const WebpackBar = require('webpackbar')
 const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
-const WebpackImageSizesPlugin = require('./WebpackImageSizesPlugin')
+const WebpackImageSizesPlugin = require('./webpack-image-sizes-plugin')
 
 module.exports = {
   get: function (mode) {
@@ -33,7 +33,15 @@ module.exports = {
       }),
       new DependencyExtractionWebpackPlugin(),
       new WebpackImageSizesPlugin({
-        watch: mode !== 'production',
+        confImgPath: 'assets/conf-img', // Path to the conf-img folder
+        sizesSubdir: 'sizes', // Subdirectory containing the sizes JSON files
+        tplSubdir: 'tpl', // Subdirectory containing TPL templates
+        outputImageLocations: 'image-locations.json', // Output locations file name
+        outputImageSizes: 'image-sizes.json', // Output sizes file name
+        generateDefaultImages: true, // Generate default images
+        defaultImageSource: 'src/img/static/default.jpg', // Source image for generation
+        defaultImagesOutputDir: 'dist/images', // Default images output directory
+        defaultImageFormat: 'jpg', // Generated image format (jpg, png, webp, avif)
       }),
     ]