From 2b371c789b122e8c422554ca294fe4d592d5db8e Mon Sep 17 00:00:00 2001
From: rain <136299953+ten-kyuu@users.noreply.github.com>
Date: Wed, 17 Jul 2024 19:47:53 +0800
Subject: [PATCH] Update index.html

updated responsive images for faster page load for both mobile and desktop and also added fallbacks.
---
 index.html | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 2cfefd2..32e11e8 100644
--- a/index.html
+++ b/index.html
@@ -53,8 +53,10 @@
             <a href="https://www.freecodecamp.org/tenkyuu"
                target="_blank">
               <picture>
-                <source srcset="https://tenkyuu.dev/images/projects/avif/">
-                <img src="https://i.postimg.cc/8528P7n6/brave-screenshot-1.png"
+                <source srcset="https://tenkyuu.dev/images/projects/avif/product-landing.avif" type="image/avif">
+                <source srcset="https://tenkyuu.dev/images/projects/webp/product-landing.webp" type="image/webp">
+                <img src="https://tenkyuu.dev/images/projects/jpeg/product-landing.jpeg"
+                   type="image/jpeg"
                    alt="Product Landing Page"
                    title="Product Landing Page">
               </picture>
@@ -63,25 +65,40 @@
           <div class="project-tile">
             <a href="https://www.freecodecamp.org/tenkyuu"
                target="_blank">
-              <img src="https://i.postimg.cc/2jWR9xVF/brave-screenshot.png"
+              <picture>
+                <source srcset="https://tenkyuu.dev/images/projects/avif/technical-documentation.avif" type="image/avif">
+                <source srcset="https://tenkyuu.dev/images/projects/webp/technical-documentation.webp" type="image/webp">
+                <img src="https://tenkyuu.dev/images/projects/jpeg/technical-documentation.jpeg"
+                   type="image/jpeg"
                    alt="Technical Documentation Page"
                    title="Technical Documentation Page">
+              </picture>
             </a>
           </div>
           <div class="project-tile">
             <a href="https://www.freecodecamp.org/tenkyuu"
                target="_blank">
-              <img src="https://i.postimg.cc/RhKk3vjb/brave-screenshot-2.png"
+              <picture>
+                <source srcset="https://tenkyuu.dev/images/projects/avif/tribute.avif" type="image/avif">
+                <source srcset="https://tenkyuu.dev/images/projects/webp/tribute.webp" type="image/webp">
+                <img src="https://tenkyuu.dev/images/projects/jpeg/tribute.jpeg"
+                   type="image/jpeg"
                    alt="Tribute Page"
                    title="Tribute Page">
+              </picture>
             </a>
           </div>
           <div class="project-tile">
             <a href="https://www.freecodecamp.org/tenkyuu"
                target="_blank">
-              <img src="https://i.postimg.cc/5NMchFzc/brave-screenshot-3.png"
+              <picture>
+                <source srcset="https://tenkyuu.dev/images/projects/avif/survey-form.avif" type="image/avif">
+                <source srcset="https://tenkyuu.dev/images/projects/webp/survey-form.webp" type="image/webp">
+                <img src="https://tenkyuu.dev/images/projects/jpeg/survey-form.jpeg"
+                   type="image/jpeg"
                    alt="Survey Form"
                    title="Survey Form">
+              </picture>
             </a>
           </div>
         </div>
-- 
2.39.5