REF : Improved performance of web assets loading using webp format

Author: hafijulali

src/components/about/About.tsx

@@ -2,6 +2,7 @@ import { FaAward } from "react-icons/fa";
 import { FiUsers } from "react-icons/fi";
 import { VscFolderLibrary } from "react-icons/vsc";
 import portrait from "../../../public/assets/long-portrait-self.png";
+import portraitwebp from "../../../public/assets/long-portrait-self.webp";
 import "./about.css";
 
 const About = () => {
@@ -12,7 +13,10 @@ const About = () => {
       <div className="container about__container">
         <div className="about__me">
           <div className="about__portrait_image">
-            <img src={portrait} alt="Portrait"></img>
+            <picture>
+              <source srcSet={portraitwebp} type="image/webp" id="card__image"/>
+              <img src={portrait}  loading="lazy" alt="Portrait" id="card__image"/>
+            </picture>
           </div>
         </div>
 

src/components/header/Header.tsx

@@ -1,5 +1,6 @@
 import Buttons from "./Buttons";
 import profilepicture from "../../../public/assets/profile-picture.jpg";
+import profilepicturewebp from "../../../public/assets/profile-picture.webp";
 import HeaderSocials from "./HeaderSocials";
 import "./header.css";
 
@@ -13,7 +14,10 @@ const Header = () => {
         <Buttons />
         <HeaderSocials />
         <div className="header__profile">
-          <img src={profilepicture} alt="me" className="image"></img>
+          <picture>
+            <source srcSet={profilepicturewebp} type="image/webp" className="image"/>
+            <img src={profilepicture} alt="me" className="image"></img>
+          </picture>
         </div>
         <a href="#contact" className="scroll__down">
           Scroll Down

src/components/header/header.css

@@ -44,7 +44,7 @@ header {
   border-radius: 12rem;
 }
 
-.header__profile > .image {
+.header__profile .image {
   border-radius: 100%;
 }
 

src/index.css

@@ -38,7 +38,7 @@ body {
   background: var(--color-bg);
   color: var(--color-white);
   line-height: 1.7;
-  background-image: url("/assets/bg-texture.png");
+  background-image: url("/assets/bg-texture.webp");
 }
 
 .container {