modified media file formats to AVIF and AV1, with fallbacks for H265, H265, and JPEG

Author: JS-GitRepo

src/components/projects/Deerfall.tsx

@@ -1,7 +1,7 @@
 import ProjVideo from "./ProjVideo";
-import DeerfallVidAV1 from "../../img/Projects/Deerfall/DeerfallProRes_AV1.mp4";
-import DeerfallVidH265 from "../../img/Projects/Deerfall/DeerfallProRes_H265.mp4";
-import DeerfallVidH264 from "../../img/Projects/Deerfall/DeerfallProRes_H264.mp4";
+import DeerfallVidAV1 from "../../img/Projects/Deerfall/DeerfallBanner_AV1.mp4";
+import DeerfallVidH265 from "../../img/Projects/Deerfall/DeerfallBanner_H265.mp4";
+import DeerfallVidH264 from "../../img/Projects/Deerfall/DeerfallBanner_H264.mp4";
 import DeerfallPosterJPG from "../../img/Projects/Deerfall/DeerfallBannerPoster.jpg";
 import { animated } from "react-spring";
 

src/components/projects/ProjImage.tsx

@@ -26,8 +26,10 @@ const ProjImage = ({
   return (
     <div className="ProjImage">
       <div className="img-ctr">
-        <img src={imgSrc} alt={imgAltTxt} />
-        <img src={imgSrc_Fallback} alt={imgAltTxt} />
+        <picture>
+          <source srcSet={imgSrc} />
+          <img src={imgSrc_Fallback} alt={imgAltTxt} />
+        </picture>
       </div>
       <div className="desc-ctr">
         {isPortfolio ? (