Revert to plain source images from assets instead of optimized WebP

src/Home.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Helmet } from 'react-helmet-async';
+import meImage from './assets/Me.jpeg';
 
 export const Home = () => {
-  const publicUrl = process.env.PUBLIC_URL || '.';
-
   return (
     <main className="home-page">
       <Helmet>
@@ -27,9 +26,7 @@ export const Home = () => {
 
       <section>
         <img
-          src={`${publicUrl}/images/Me-640.webp`}
+          src={meImage}
-          srcSet={`${publicUrl}/images/Me-320.webp 320w, ${publicUrl}/images/Me-640.webp 640w, ${publicUrl}/images/Me-1024.webp 1024w`}
-          sizes="(max-width: 600px) 100vw, 640px"
           alt="Portrait of Gregory Campbell"
           className="homeimage"
           loading="lazy"

src/Resume.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet-async';
 import pdf from './assets/Gregory Campbell Resume.pdf';
+import resumeImage from './assets/Resume.png';
 
 export const Resume = () => {
   return (
@@ -26,9 +27,7 @@ export const Resume = () => {
       <section>
         <h2>Written Resume</h2>
         <img
-          src={`${process.env.PUBLIC_URL || '.'}/images/Resume-640.webp`}
+          src={resumeImage}
-          srcSet={`${process.env.PUBLIC_URL || '.'}/images/Resume-320.webp 320w, ${process.env.PUBLIC_URL || '.'}/images/Resume-640.webp 640w, ${process.env.PUBLIC_URL || '.'}/images/Resume-1024.webp 1024w`}
-          sizes="(max-width: 600px) 100vw, 640px"
           alt="Resume preview"
           loading="lazy"
           decoding="async"

src/components/ProjectCard.js

@@ -1,22 +1,14 @@
 import React from 'react';
 
-export const ProjectCard = ({ title, description, imgSrc, imgName, imgAlt, link, children }) => {
+export const ProjectCard = ({ title, description, imgSrc, imgAlt, link, children }) => {
-  const publicUrl = process.env.PUBLIC_URL || '.';
-  const webpSources = imgName
-    ? `${publicUrl}/images/${imgName}-320.webp 320w, ${publicUrl}/images/${imgName}-640.webp 640w, ${publicUrl}/images/${imgName}-1024.webp 1024w`
-    : null;
-
-  const srcFallback = imgName ? `${publicUrl}/images/${imgName}-640.webp` : imgSrc;
 
   return (
     <article className="project-card">
       <h3>{link ? <a href={link} target="_blank" rel="noreferrer noopener">{title}</a> : title}</h3>
       <p>{description}</p>
-      {srcFallback && (
+      {imgSrc && (
         <img
-          src={srcFallback}
+          src={imgSrc}
-          srcSet={webpSources || undefined}
-          sizes="(max-width: 600px) 100vw, 640px"
           alt={imgAlt || title}
           loading="lazy"
           decoding="async"