Restructured assets; Implemented webp asset priority

README.md

@@ -3,7 +3,7 @@
 [![Repository Status](https://img.shields.io/badge/Repository%20Status-Maintained-dark%20green.svg)](https://github.com/AVS1508/My-Alternate-Portfolio-Website/)
 [![Website Status](https://img.shields.io/badge/Website%20Status-Online-green)](https://people.umass.edu/avsingh)
 [![Author](https://img.shields.io/badge/Author-Aditya%20Vikram%20Singh-blue.svg)](https://www.linkedin.com/in/AVS1508/)
-[![Latest Release](https://img.shields.io/badge/Latest%20Release-27%20January%202021-yellow.svg)](https://github.com/AVS1508/My-Alternate-Portfolio-Website/commit/master)
+[![Latest Release](https://img.shields.io/badge/Latest%20Release-13%20June%202021-yellow.svg)](https://github.com/AVS1508/My-Alternate-Portfolio-Website/commit/master)
 
  <p align="justify">This website serves as an online portfolio to showcase my web presence, résumé, story, & featured projects with a Particle.js aligned theme. It was generated using using Jekyll, Sass, and Gulp.js.</p>
 

index.html

@@ -63,12 +63,21 @@ <h1>
       <!-- User Introduction-->
       <div class="user-details">
         <h1>My Story</h1>
-        <img
-          src="./assets/img/Professional-Picture-Me.jpg"
-          alt="Professional Me"
-          width="20%"
-          style="border-radius: 50%"
-        />
+        <picture>
+          <source
+            type="image/webp"
+            srcset="./assets/img/webp/Professional-Picture-Me.webp"
+            alt="Professional Me"
+            width="20%"
+            style="border-radius: 50%"
+          />
+          <img
+            src="./assets/img/jpg/Professional-Picture-Me.jpg"
+            alt="Professional Me"
+            width="20%"
+            style="border-radius: 50%"
+          />
+        </picture>
         <p>
           I am a junior in the College of Information and Computer Sciences at the University of Massachusetts Amherst,
           pursuing an undergraduate degree. I am majoring in Computer Science, with intent to double major in
@@ -133,7 +142,10 @@ <h1>Featured Projects</h1>
       <!-- User Project #1: Personal Résumé Website -->
       <div class="user-projects">
         <div class="images-right">
-          <img alt="Personal Website" src="./assets/img/Personal-Resume-Website.jpg" />
+          <picture>
+            <source type="image/webp" srcset="./assets/img/webp/Personal-Resume-Website.webp" alt="Personal Website" />
+            <img alt="Personal Website" src="./assets/img/jpg/Personal-Resume-Website.jpg" />
+          </picture>
         </div>
         <div class="contents" style="text-align: center">
           <h3>Personal Website</h3>
@@ -166,7 +178,10 @@ <h3>Personal Website</h3>
       <!-- User Project #2: Summer 2020 Project -->
       <div class="user-projects">
         <div class="images-left">
-          <img alt="Perpetual Crusades" src="./assets/img/Perpetual-Crusades.jpg" />
+          <picture>
+            <source type="image/webp" srcset="./assets/img/webp/Perpetual-Crusades.webp" alt="Perpetual Crusades" />
+            <img alt="Perpetual Crusades" src="./assets/img/jpg/Perpetual-Crusades.jpg" />
+          </picture>
         </div>
         <div class="contents-right" style="text-align: center">
           <h3>Perpetual Crusades</h3>
@@ -199,7 +214,10 @@ <h3>Perpetual Crusades</h3>
       <!-- User Project #3: COVID-19 Tracker App -->
       <div class="user-projects">
         <div class="images-right">
-          <img alt="COVID-19 Tracker App" src="./assets/img/COVID19-Tracker-App.jpg" />
+          <picture>
+            <source type="image/webp" srcset="./assets/img/webp/COVID19-Tracker-App.webp" alt="COVID-19 Tracker App" />
+            <img alt="COVID-19 Tracker App" src="./assets/img/jpg/COVID19-Tracker-App.jpg" />
+          </picture>
         </div>
         <div class="contents" style="text-align: center">
           <h3>COVID-19 Tracker App</h3>
@@ -225,7 +243,14 @@ <h3>COVID-19 Tracker App</h3>
       <!-- Use Project #4: Valuto: Account Management System -->
       <div class="user-projects">
         <div class="images-left">
-          <img alt="Valuto: Account Management System" src="./assets/img/Valuto-Account-Management.jpg" />
+          <picture>
+            <source
+              type="image/webp"
+              srcset="./assets/img/webp/Valuto-Account-Management.webp"
+              alt="Valuto: Account Management System"
+            />
+            <img alt="Valuto: Account Management System" src="./assets/img/jpg/Valuto-Account-Management.jpg" />
+          </picture>
         </div>
         <div class="contents-right" style="text-align: center">
           <h3>Valuto: Account Management System</h3>