feat (lazysizes): improves initial page load performance

Adds lazy loading for images to improve initial page load time.

Also sets `decoding="async"` attribute to images with `fetchpriority="high"` to further enhance perceived performance.

Author: firestar300

assets/conf-img/tpl/default-picture-nolazyload-caption.tpl

@@ -1,6 +1,6 @@
 <picture>
     %%data-location%%
     %%sources%%
-    <img %%src%% fetchpriority="high" %%attributes%%>
+    <img %%src%% fetchpriority="high" decoding="async" %%attributes%%>
 </picture>
-<figcaption>%%caption%%</figcaption>
+<figcaption>%%caption%%</figcaption>

assets/conf-img/tpl/default-picture-nolazyload.tpl

@@ -1,5 +1,5 @@
 <picture>
     %%data-location%%
     %%sources%%
-    <img %%src%% fetchpriority="high" %%attributes%%>
+    <img %%src%% fetchpriority="high" decoding="async" %%attributes%%>
 </picture>

package.json

@@ -17,6 +17,7 @@
   "license": "GPL-2.0",
   "dependencies": {
     "@fontsource/poppins": "^5.0.5",
+    "lazysizes": "^5.3.2",
     "oneloop.js": "^5.2.1"
   },
   "devDependencies": {

src/js/index.js

@@ -1,3 +1,4 @@
+import 'lazysizes'
 import './classes/ScrollDirection'
 import './classes/ButtonSeoClick'
 import './classes/Header'

yarn.lock

@@ -2272,6 +2272,7 @@ __metadata:
     imagemin-jpegtran: "npm:^7.0.0"
     imagemin-optipng: "npm:^8.0.0"
     imagemin-svgo: "npm:^10.0.1"
+    lazysizes: "npm:^5.3.2"
     mini-css-extract-plugin: "npm:^1.5.0"
     oneloop.js: "npm:^5.2.1"
     postcss: "npm:^8.4.24"
@@ -6703,6 +6704,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lazysizes@npm:^5.3.2":
+  version: 5.3.2
+  resolution: "lazysizes@npm:5.3.2"
+  checksum: 10/15dfa1cc8bf8c3a4393014d411f161cb1df96ab0888a0776ba4dc34d45c6ba9c5d2b2eca22683c14dfeee552c67173cb9a512d640d3424d9910c0246e15c4edc
+  languageName: node
+  linkType: hard
+
 "levn@npm:^0.4.1":
   version: 0.4.1
   resolution: "levn@npm:0.4.1"