diff --git a/src/components/auth/login/index.tsx b/src/components/auth/login/index.tsx
index 79c3a0b..599adfc 100644
--- a/src/components/auth/login/index.tsx
+++ b/src/components/auth/login/index.tsx
@@ -77,7 +77,7 @@ export const Login = (): JSX.Element => {
             <div className="container">
                 <div className="row wrapper">
                     <div className="col m12 l6 hide-on-med-and-down">
-                        <img className="responsive-img account-art" src="/resources/static/img/log-in.png" />
+                        <img className="responsive-img account-art" src="/resources/static/img/log-in.png?w=800&fmt=webp" />
                     </div>
                     <div className="col m12 l6">
                         <div className="form-wrapper">
diff --git a/src/components/auth/register/index.tsx b/src/components/auth/register/index.tsx
index e78c712..6deff6b 100644
--- a/src/components/auth/register/index.tsx
+++ b/src/components/auth/register/index.tsx
@@ -93,7 +93,7 @@ export const Register = (): JSX.Element => {
 
             <div className="container">
                 <div className="row wrapper">
-                    <div className="graphic col m12 l6 hide-on-med-and-down account-art" style={{ backgroundImage: "url('/resources/static/img/sign-up.png')" }}>
+                    <div className="graphic col m12 l6 hide-on-med-and-down account-art" style={{ backgroundImage: "url('/resources/static/img/sign-up.png?w=800&fmt=webp')" }}>
                     </div>
                     <div className="col m12 l6">
                         <div className="form-wrapper">
diff --git a/src/components/blog/details/index.tsx b/src/components/blog/details/index.tsx
index 9e0c704..ad356e0 100644
--- a/src/components/blog/details/index.tsx
+++ b/src/components/blog/details/index.tsx
@@ -34,7 +34,7 @@ export const BlogDetails = (): JSX.Element => {
             <link rel="stylesheet" href="/resources/static/css/blog-detail.css" />
             <div className="container">
                 <div className="card-container">
-                    <img className="card-image" src={post.featured_image} />
+                    <img className="card-image" src={post.featured_image+"?w=800&fmt=webp"} />
                     <div className="tag-section">
                         {
                             tags.map((tag: Tag) => {
diff --git a/src/components/blog/index.tsx b/src/components/blog/index.tsx
index 136f2c1..afd586d 100644
--- a/src/components/blog/index.tsx
+++ b/src/components/blog/index.tsx
@@ -119,7 +119,7 @@ const BlogPostElement = (props: { post: BlogPost, tags: Array<Tag> }): JSX.Eleme
         <>
             <div className="card">
                 <div className="card-headers">
-                    <img className="card-image" src={post.featured_image} />
+                    <img className="card-image" src={post.featured_image+"?w=800&fmt=webp"} />
                     <div className="card-text">
                         <div className="tag-section">
                             {
diff --git a/src/components/clubs/details/edit/index.tsx b/src/components/clubs/details/edit/index.tsx
index b3a75d4..b211d1c 100644
--- a/src/components/clubs/details/edit/index.tsx
+++ b/src/components/clubs/details/edit/index.tsx
@@ -69,7 +69,7 @@ export const EditClubDetails = (): JSX.Element => {
             <link rel="stylesheet" href="/resources/static/css/edit-club.css"></link>
             <div className="edit-club">
                 <div className="row">
-                    <img className="club-banner responsive-img col s12" src={club.banner} alt="banner of organization" />
+                    <img className="club-banner responsive-img col s12" src={club.banner+"?w=2000&fmt=webp"} alt="banner of organization" />
                 </div>
                 <div className="container">
                     <div className="white-bg box-center">
diff --git a/src/components/clubs/details/index.tsx b/src/components/clubs/details/index.tsx
index 8fdda23..4b6b2d1 100644
--- a/src/components/clubs/details/index.tsx
+++ b/src/components/clubs/details/index.tsx
@@ -98,14 +98,14 @@ export const ClubDetails = (): JSX.Element => {
 
             <div className="club">
                 <div className="row">
-                    <img className="club-banner responsive-img col s12" src={club.banner} alt="banner of organization" />
+                    <img className="club-banner responsive-img col s12" src={club.banner+"?w=2000&fmt=webp"} alt="banner of organization" />
                 </div>
                 <div className="container">
                     <div className="club-detail">
                         <div className="row club-header">
                             <div className="col m3 s12">
                                 <div className="club-logo">
-                                    <img className="circle" src={club.icon} alt="icon of organization" />
+                                    <img className="circle" src={club.icon+"?w=800&fmt=webp"} alt="icon of organization" />
                                 </div>
                             </div>
                             <div className="col m5 s12">
diff --git a/src/components/clubs/index.tsx b/src/components/clubs/index.tsx
index ee2f75e..ece0aea 100644
--- a/src/components/clubs/index.tsx
+++ b/src/components/clubs/index.tsx
@@ -118,7 +118,7 @@ const Club = (props: { club: Organization, tags: Tag[] }): JSX.Element => {
         <div className={`card ${get_membership_status()}-status`}>
             <div className="valign-wrapper">
                 <div className="club-logo">
-                    <img className="circle" src={club.icon} />
+                    <img className="circle" src={club.icon+"?w=800&fmt=webp"} />
                 </div>
                 <h1 className="title link">
                     <Link to={`/club/${club.slug}`}>{club.name}</Link>
diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
index 3379f0d..9d6c425 100644
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -70,7 +70,7 @@ const FeaturedBlogPost = (props: { post: BlogPost }): JSX.Element => {
     const post = props.post;
     return (
         <div className="blog">
-            <img className="blog-image" src={post.featured_image} />
+            <img className="blog-image" src={post.featured_image+"?w=800&fmt=webp"} />
             <div className="blog-content">
                 <p className="title">{post.title}</p>
                 <hr />
diff --git a/src/components/home/schedule/index.tsx b/src/components/home/schedule/index.tsx
index 60ad583..c4c2fd8 100644
--- a/src/components/home/schedule/index.tsx
+++ b/src/components/home/schedule/index.tsx
@@ -115,7 +115,7 @@ export const Schedule = (): JSX.Element => {
 
     return (
         <div className="banner">
-            <div className="background"><img alt="" src={theme.bannerImage} /></div>
+            <div className="background"><img alt="" src={theme.bannerImage+"?w=2000&fmt=webp"} /></div>
             <div className="overlay-container valign-wrapper" >
                 <div className="next-class">
                     {
diff --git a/src/components/markdown/index.tsx b/src/components/markdown/index.tsx
index 075b6ce..285e98d 100644
--- a/src/components/markdown/index.tsx
+++ b/src/components/markdown/index.tsx
@@ -23,7 +23,7 @@ const Markdown = ({ text }: { text: string }): JSX.Element => { //takes markdown
                 return safeEmbed(el.src!) ? (
                     <iframe className="markdown-embed" allowFullScreen frameBorder={0} src={el.src} />
                 ) : (
-                    <img src={el.src} alt={el.alt} />
+                    <img src={el.src+"?w=800&fmt=webp"} alt={el.alt} />
                 )
             }
         }} />
diff --git a/src/components/notfound/index.tsx b/src/components/notfound/index.tsx
index fe25d9e..1355215 100644
--- a/src/components/notfound/index.tsx
+++ b/src/components/notfound/index.tsx
@@ -16,10 +16,10 @@ export const NotFound = (): JSX.Element => {
             <link rel="stylesheet" href="/resources/static/css/404.css" />
             <div className="main-container card">
                 <h2 className="center-align message">404: Page Not Found</h2>
-                <img className="comic-img" style={{ maxWidth: "100%" }} src={`/resources/static/img/404-comics/404-${comic}.png`} />
+                <img className="comic-img" style={{ maxWidth: "100%" }} src={`/resources/static/img/404-comics/404-${comic}.png?w=2000&fmt=webp`} />
 
                 <div className="display-metropolis valign-wrapper">
-                    <img className="inline-logo" src={theme.logo} />
+                    <img className="inline-logo" src={theme.logo+"?w=&fmt=webp"} />
                 </div>
 
                 <div className="game-container" hidden={true}>