feat: Enable lazy loading for images (#58)

Added `loading="lazy"` attribute to `<img>` tags to improve page performance by deferring offscreen image loading.
warnyul · Nov 29, 2024 · cfe4795 · cfe4795
1 parent d19a973
commit cfe4795
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/views/404.ejs b/src/views/404.ejs
@@ -16,7 +16,7 @@
         <picture>
             <!-- Source of the image: https://www.cleanpng.com/png-http-404-error-user-interface-design-google-chrome-2045552/ -->
             <source type="image/webp" srcset="../assets/images/confused-robot.png?as=webp">
-            <img src="../assets/images/confused-robot.png" alt="Confused robot looking for the page" width="300" height="270" />
+            <img src="../assets/images/confused-robot.png" alt="Confused robot looking for the page" loading="lazy" width="300" height="270" />
         </picture>
         <div class="action">
             <p>Don't worry, even robots get lost sometimes.</p>

diff --git a/src/views/index.ejs b/src/views/index.ejs
@@ -43,7 +43,7 @@
             <header>
                 <picture>
                     <source type="image/webp" srcset="../assets/images/profile100w100h.png?as=webp" />
-                    <img class="clazz-profile-image" src="../assets/images/profile100w100h.png" alt="Profile picture of Balázs Varga, CTO @ Apter" width="100" height="100" />
+                    <img class="clazz-profile-image" src="../assets/images/profile100w100h.png" alt="Profile picture of Balázs Varga, CTO @ Apter" loading="lazy" width="100" height="100" />
                 </picture>
                 <h1 class="clazz-text-center">Balázs Varga</h1>
             </header>