Added lazyness to all img tags

package.json

@@ -3,6 +3,7 @@
   "version": "1.3.3",
   "private": true,
   "dependencies": {
+    "lazysizes": "^5.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1"

src/components/elements/Article.js

@@ -1,4 +1,6 @@
 import React from "react";
+import "lazysizes";
+import "lazysizes/plugins/attrchange/ls.attrchange";
 
 function Article(props) {
   return (
@@ -20,7 +22,7 @@ function Article(props) {
       </div>
       <div className="card-image">
         <figure className="image">
-          <img width="1000" height="420" src={props.image} alt="" />
+          <img width="1000" className="lazyload" height="420" src={props.image} alt="" />
         </figure>
       </div>
       <div className="card-content">

src/components/elements/CredlyBadge.js

@@ -1,6 +1,13 @@
-import React from "react";
+import React, { useEffect } from "react";
+import "lazysizes";
+import "lazysizes/plugins/attrchange/ls.attrchange";
 
 function CredlyBadge(props) {
+  useEffect(() => {
+    // initialize lazysizes library after component is mounted
+    window.lazySizes.init();
+  }, []);
+
   let imgSrc =
     "https://images.credly.com/size/" + props.width + "x" + props.height;
   imgSrc += "/images/" + props.imageId + "/" + props.imageName;
@@ -9,7 +16,7 @@ function CredlyBadge(props) {
   return (
     <figure className="is-inline-block image">
       <a href={imgLink} target="_blank" rel="noopener noreferrer">
-        <img src={imgSrc} alt={props.badgeName} />
+        <img className="lazyload" data-src={imgSrc} alt={props.badgeName} />
       </a>
     </figure>
   );

src/components/sections/AboutMe.js

@@ -1,8 +1,15 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Badge from "../elements/Badge";
 import Resume from "../../resume.json";
+import "lazysizes";
+import "lazysizes/plugins/attrchange/ls.attrchange";
 
 function AboutMe() {
+  useEffect(() => {
+    // initialize lazysizes library after component is mounted
+    window.lazySizes.init();
+  }, []);
+
   return (
     <section className="section has-background-link" id="aboutMe">
       <div className="container has-text-centered">
@@ -12,7 +19,8 @@ function AboutMe() {
             height="180px"
             src={Resume.basics.picture}
             alt={Resume.basics.name}
-            className="is-rounded"
+            className="is-rounded lazyload"
+            data-src={Resume.basics.picture}
             onError={(e)=>{e.target.onerror = null; e.target.src=Resume.basics.x_pictureFallback}}
           />
         </figure>

src/components/structure/Footer.js

@@ -1,4 +1,6 @@
 import React from "react";
+import "lazysizes";
+import "lazysizes/plugins/attrchange/ls.attrchange";
 
 function Footer() {
   return (
@@ -15,7 +17,7 @@ function Footer() {
             width="512"
             height="96"
             src="https://bulma.io/images/made-with-bulma--semiwhite.png"
-            className="bulma-image"
+            className="bulma-image lazyload"
             alt=""
           />
         </p>