feat: performance-improvement for 20%

.gitignore

@@ -1,2 +1,5 @@
 .env
-validation_report.log
+validation_report.log
+
+# Node Modules come when using compress images js
+node_modules

bin/compress_images.js

@@ -0,0 +1,43 @@
+import imagemin from 'imagemin';
+import imageminMozjpeg from 'imagemin-mozjpeg';
+import imageminPngquant from 'imagemin-pngquant';
+import imageminWebp from 'imagemin-webp';
+
+(async () => {
+    await imagemin(['resources/img/*.{jpg,png}'], {
+        destination: 'compressed',
+        plugins: [
+            imageminMozjpeg({ quality: 75 }),
+            imageminPngquant({ quality: [0.6, 0.8] }),
+            imageminWebp({ quality: 75 })
+        ]
+    });
+
+    console.log('Basic Images optimized');
+})();
+
+(async () => {
+    await imagemin(['resources/img/projects/*.{jpg,png}'], {
+        destination: 'compressed/projects',
+        plugins: [
+            imageminMozjpeg({ quality: 75 }),
+            imageminPngquant({ quality: [0.6, 0.8] }),
+            imageminWebp({ quality: 75 })
+        ]
+    });
+
+    console.log('Project Images optimized');
+})();
+
+(async () => {
+    await imagemin(['resources/img/members/*.{jpg,png}'], {
+        destination: 'compressed/members',
+        plugins: [
+            imageminMozjpeg({ quality: 75 }),
+            imageminPngquant({ quality: [0.6, 0.8] }),
+            imageminWebp({ quality: 75 })
+        ]
+    });
+
+    console.log('Member Images optimized');
+})();

index.html

@@ -9,9 +9,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
   <!-- Favicon -->
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.webp">
+  <link rel="icon" type="image/webp" sizes="32x32" href="/favicon-32x32.webp">
+  <link rel="icon" type="image/webp" sizes="16x16" href="/favicon-16x16.webp">
   <link rel="manifest" href="/site.webmanifest">
 
   <link rel="stylesheet" href="resources/css/main.css" />
@@ -67,7 +67,7 @@
   <!-- Loader -->
   <section id="refreshLoader" class="bg-white dark:bg-black flex justify-center items-center h-screen">
     <div class="spinner bg-pink-200 rounded-full w-40 h-40 flex justify-center items-center">
-      <img src="./resources/img/pedro.png" alt="Pedro!">
+      <img src="./resources/img/pedro.webp" alt="Pedro!">
     </div>
   </section>
   <div id="content">
@@ -76,7 +76,7 @@
         <nav class="fixed top-0 w-full z-50 bg-gray-900 border-gray-200">
           <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
             <a href="#about" class="flex items-center space-x-3 rtl:space-x-reverse lg:pl-10 xl:pl-0">
-              <img src="./resources/img/logo.png" class="ml-8 lg:ml-0 h-20" alt="LookinLabs" />
+              <img src="./resources/img/logo.webp" class="ml-8 lg:ml-0 h-20" alt="LookinLabs" />
               <span class="self-center text-2xl font-semibold whitespace-nowrap text-white"></span>
             </a>
             <button id="navbar-toggler" type="button"
@@ -151,7 +151,7 @@ <h1 class="text-2xl font-bold mb-10 underline" data-translation-key="section_abo
           </p>
         </div>
         <div class="w-full sm:w-1/2 flex justify-center items-center mt-4 sm:mt-0">
-          <img class="object-contain" data-translation-key="img_alt_startup" src="resources/img/startup.jpg"
+          <img class="object-contain" data-translation-key="img_alt_startup" src="resources/img/startup.webp"
             alt="Startup" style="box-shadow: 0px 0px 8px 0px #b5d200bf" />
         </div>
       </section>
@@ -239,7 +239,7 @@ <h1 class="text-2xl font-bold my-6 underline w-full text-center" data-translatio
               </div>
               <div class="flex flex-1 justify-center md:justify-start pl-2 md:pl-8 mt-8 md:mt-0">
                   <a href="https://kood.tech/">
-                      <img class="w-80" src="./resources/img/kood_johvi.png" alt="Powered By Kood Jõhvi">
+                      <img class="w-80" src="./resources/img/kood_johvi.webp" alt="Powered By Kood Jõhvi">
                   </a>
               </div>
           </div>

members.json

@@ -3,18 +3,18 @@
         "name": "Christofher Köst",
         "profession": "CEO, Site Reliability Engineer",
         "portfolio": "https://kostlinux.github.io/Portfolio",
-        "picture": "./resources/img/members/christofher.jpg"
+        "picture": "./resources/img/members/christofher.webp"
     },
     {
         "name": "Martin Sidorov",
         "profession": "Co-Founder, Software Engineer",
         "portfolio": "https://martinsidorov.com/",
-        "picture": "./resources/img/members/martin.jpg"
+        "picture": "./resources/img/members/martin.webp"
     },
     {
         "name": "Daniel Laks",
         "profession": "Co-Founder, Software Engineer",
         "portfolio": "https://www.linkedin.com/in/daniel-luxx/",
-        "picture": "./resources/img/members/daniel.jpg"
+        "picture": "./resources/img/members/daniel.webp"
     }
 ]