Update index.html

updated responsive images for faster page load for both mobile and desktop and also added fallbacks.

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