diff --git a/src/app.rs b/src/app.rs
index 21e96db..14f98bf 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -85,11 +85,14 @@ pub fn Header() -> impl IntoView {
                         <A href="/gallery">{t!(i18n, gallery)}</A>
                     </div>
                 </div>
-                <img
-                    class="image"
-                    src="https://images.ctfassets.net/e3magj9g6dp1/14q5L7K0BCol1gx0aCSCck/d1f69bfa404efed6a2dcc71401bbc16d/P5310039-1-2.jpg?w=1600&q=50&fm=avif"
-                    alt="Banner"
-                />
+                <picture>
+                    <img
+                        class="image"
+                        src="https://images.ctfassets.net/e3magj9g6dp1/14q5L7K0BCol1gx0aCSCck/d1f69bfa404efed6a2dcc71401bbc16d/P5310039-1-2.jpg?w=1600&q=50&fm=avif"
+                        alt="Banner"
+                    />
+                    <source srcset="https://images.ctfassets.net/e3magj9g6dp1/14q5L7K0BCol1gx0aCSCck/d1f69bfa404efed6a2dcc71401bbc16d/P5310039-1-2.jpg?w=1600&q=50&fm=jpg"/>
+                </picture>
             </div>
 
             <LanguageSwitcher/>
diff --git a/src/routes/gallery.rs b/src/routes/gallery.rs
index da5bc9f..20d6a2d 100644
--- a/src/routes/gallery.rs
+++ b/src/routes/gallery.rs
@@ -69,9 +69,13 @@ pub fn GalleryEntry() -> impl IntoView {
                                 None => view! { <div/> },
                                 Some(image) => {
                                     let display_url = format!("https:{}?w=2400&h=2400&q=80&fm=avif", &image.image_with_watermark.file.url);
+                                    let jpg_display_url = format!("https:{}?w=2400&h=2400&q=80&fm=jpg", &image.image_with_watermark.file.url);
                                     view! {
                                         <div class="open-entry">
-                                            <img src=display_url alt=image.title.clone()/>
+                                            <picture>
+                                                <img src=display_url alt=image.title.clone()/>
+                                                <source srcset=jpg_display_url/>
+                                            </picture>
                                             <h3>{image.title.clone()}</h3>
                                             <p>{image.description}</p>
                                         </div>
@@ -109,8 +113,18 @@ pub fn Gallery() -> impl IntoView {
                                             {gallery.images.into_iter()
                                                 .map(|image| {
                                                     let thumbnail_url = format!("https:{}?w=800&h=800&q=80&fm=avif", &image.image_without_watermark.file.url);
+                                                    let jpg_thumbnail_url = format!("https:{}?w=800&h=800&q=80&fm=jpg", &image.image_without_watermark.file.url);
                                                     let link_url = format!("/gallery/{}", &image.slug);
-                                                    view! { <li><A href=link_url><img src=thumbnail_url alt=image.title/></A></li> }
+                                                    view! {
+                                                        <li>
+                                                            <A href=link_url>
+                                                                <picture>
+                                                                    <img src=thumbnail_url alt=image.title/>
+                                                                    <source srcset=jpg_thumbnail_url/>
+                                                                </picture>
+                                                            </A>
+                                                        </li>
+                                                    }
                                                 }).collect::<Vec<_>>()
                                             }
                                         </ul>
diff --git a/style/main.scss b/style/main.scss
index e9c04a5..d346fdc 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -118,14 +118,18 @@ body {
         }
       }
 
-      .image {
-        max-width: 800px;
-        width: 100%;
-        max-height: 300px;
-        height: 100%;
-        object-fit: cover;
-        object-position: top;
-        flex-shrink: 1;
+      picture {
+        display: contents;
+
+        .image {
+          max-width: 800px;
+          width: 100%;
+          max-height: 300px;
+          height: 100%;
+          object-fit: cover;
+          object-position: top;
+          flex-shrink: 1;
+        }
       }
     }
 
@@ -209,12 +213,16 @@ body {
     align-items: flex-start;
     margin-top: 32px;
 
-    img {
-      object-fit: contain;
-      width: 100%;
-      max-height: 90vh;
-      max-width: 1232px;
-      align-self: center;
+    picture {
+      display: contents;
+
+      img {
+        object-fit: contain;
+        width: 100%;
+        max-height: 90vh;
+        max-width: 1232px;
+        align-self: center;
+      }
     }
 
     h3 {
@@ -243,14 +251,17 @@ body {
 
       li {
 
-        img {
-          height: 400px;
-          width: 400px;
-          object-fit: contain;
+        picture {
+          display: contents;
+          img {
+            height: 400px;
+            width: 400px;
+            object-fit: contain;
 
-          @media all and (max-width: 1000px) {
-            height: 300px;
-            width: 300px;
+            @media all and (max-width: 1000px) {
+              height: 300px;
+              width: 300px;
+            }
           }
         }
       }