diff --git a/website/docs/intro.md b/website/docs/intro.md
index fa00bfd..d149bf0 100644
--- a/website/docs/intro.md
+++ b/website/docs/intro.md
@@ -7,7 +7,10 @@ title: Welcome to Unyo
 
 **Unyo** is a desktop application where you can watch anime and read manga — completely ad-free, with automatic AniList & MyAnimeList sync.
 
-![Unyo home screen](/img/screenshots/home.png)
+<picture>
+  <source srcSet="/img/screenshots/home.webp" type="image/webp" />
+  <img src="/img/screenshots/home.png" alt="Unyo home screen" />
+</picture>
 
 ## Why Unyo?
 
diff --git a/website/src/components/Hero/index.js b/website/src/components/Hero/index.js
index 50a7132..650ca76 100644
--- a/website/src/components/Hero/index.js
+++ b/website/src/components/Hero/index.js
@@ -44,11 +44,14 @@ export default function Hero() {
         </div>
         <div className={styles.heroMascotWrap}>
           <div className={styles.mascotRing} aria-hidden="true" />
-          <img
-            className={styles.heroMascot}
-            src="/img/mascot.png"
-            alt="Unyo mascot"
-          />
+          <picture>
+            <source srcSet="/img/mascot.webp" type="image/webp" />
+            <img
+              className={styles.heroMascot}
+              src="/img/mascot.png"
+              alt="Unyo mascot"
+            />
+          </picture>
         </div>
       </div>
       <div className={styles.scrollHint} aria-hidden="true">
diff --git a/website/src/components/ScreenshotGallery/index.js b/website/src/components/ScreenshotGallery/index.js
index 00edff9..e7e7b9e 100644
--- a/website/src/components/ScreenshotGallery/index.js
+++ b/website/src/components/ScreenshotGallery/index.js
@@ -2,14 +2,14 @@ import React, { useRef, useState, useEffect, useCallback } from 'react';
 import styles from './styles.module.css';
 
 const screenshots = [
-  { src: '/img/screenshots/home.png', alt: 'Unyo home screen' },
-  { src: '/img/screenshots/anime-1.png', alt: 'Unyo anime browsing' },
-  { src: '/img/screenshots/anime-2.png', alt: 'Unyo anime playback' },
-  { src: '/img/screenshots/anime-details.png', alt: 'Unyo anime details' },
-  { src: '/img/screenshots/manga.png', alt: 'Unyo manga reader' },
-  { src: '/img/screenshots/details.png', alt: 'Unyo manga details' },
-  { src: '/img/screenshots/extensions.png', alt: 'Unyo extensions' },
-  { src: '/img/screenshots/settings.png', alt: 'Unyo settings' },
+  { src: '/img/screenshots/home.png', webp: '/img/screenshots/home.webp', alt: 'Unyo home screen' },
+  { src: '/img/screenshots/anime-1.png', webp: '/img/screenshots/anime-1.webp', alt: 'Unyo anime browsing' },
+  { src: '/img/screenshots/anime-2.png', webp: '/img/screenshots/anime-2.webp', alt: 'Unyo anime playback' },
+  { src: '/img/screenshots/anime-details.png', webp: '/img/screenshots/anime-details.webp', alt: 'Unyo anime details' },
+  { src: '/img/screenshots/manga.png', webp: '/img/screenshots/manga.webp', alt: 'Unyo manga reader' },
+  { src: '/img/screenshots/details.png', webp: '/img/screenshots/details.webp', alt: 'Unyo manga details' },
+  { src: '/img/screenshots/extensions.png', webp: '/img/screenshots/extensions.webp', alt: 'Unyo extensions' },
+  { src: '/img/screenshots/settings.png', webp: '/img/screenshots/settings.webp', alt: 'Unyo settings' },
 ];
 
 const MIN_INDEX = 1;
@@ -233,7 +233,10 @@ export default function ScreenshotGallery() {
               onClick={() => setLightbox(s)}
               type="button"
             >
-              <img src={s.src} alt={s.alt} className={styles.screenshot} />
+              <picture>
+                <source srcSet={s.webp} type="image/webp" />
+                <img src={s.src} alt={s.alt} className={styles.screenshot} />
+              </picture>
             </button>
           ))}
         </div>
@@ -257,24 +260,27 @@ export default function ScreenshotGallery() {
           }}
           onWheel={handleWheel}
         >
-          <img
-            src={lightbox.src}
-            alt={lightbox.alt}
-            className={styles.lightboxImg}
-            style={{
-              transform: `scale(${scale}) translate(${translateX / scale}px, ${translateY / scale}px)`,
-              cursor: scale > 1 ? 'grab' : 'zoom-in',
-            }}
-            draggable={false}
-            onDoubleClick={handleDoubleClick}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
-            onMouseLeave={handleMouseUp}
-            onTouchStart={handleTouchStart}
-            onTouchMove={handleTouchMove}
-            onTouchEnd={handleTouchEnd}
-          />
+          <picture>
+            <source srcSet={lightbox.webp} type="image/webp" />
+            <img
+              src={lightbox.src}
+              alt={lightbox.alt}
+              className={styles.lightboxImg}
+              style={{
+                transform: `scale(${scale}) translate(${translateX / scale}px, ${translateY / scale}px)`,
+                cursor: scale > 1 ? 'grab' : 'zoom-in',
+              }}
+              draggable={false}
+              onDoubleClick={handleDoubleClick}
+              onMouseDown={handleMouseDown}
+              onMouseMove={handleMouseMove}
+              onMouseUp={handleMouseUp}
+              onMouseLeave={handleMouseUp}
+              onTouchStart={handleTouchStart}
+              onTouchMove={handleTouchMove}
+              onTouchEnd={handleTouchEnd}
+            />
+          </picture>
           <button
             className={styles.lightboxClose}
             onClick={closeLightbox}
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index e2e36b3..487a8b1 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -21,7 +21,10 @@ export default function Home() {
       <footer className={styles.landingFooter}>
           <div className={styles.footerInner}>
             <div className={styles.footerLogo}>
-              <img src="/img/logo.png" alt="Unyo" className={styles.footerLogoImg} />
+              <picture>
+                <source srcSet="/img/logo.webp" type="image/webp" />
+                <img src="/img/logo.png" alt="Unyo" className={styles.footerLogoImg} />
+              </picture>
               <span className={styles.footerName}>Unyo</span>
             </div>
             <p className={styles.footerTagline}>
diff --git a/website/static/img/logo.png b/website/static/img/logo.png
index 7af0a38..2dbb17b 100644
Binary files a/website/static/img/logo.png and b/website/static/img/logo.png differ
diff --git a/website/static/img/logo.webp b/website/static/img/logo.webp
new file mode 100644
index 0000000..78bbfdb
Binary files /dev/null and b/website/static/img/logo.webp differ
diff --git a/website/static/img/mascot.png b/website/static/img/mascot.png
index 21dc014..af2b701 100644
Binary files a/website/static/img/mascot.png and b/website/static/img/mascot.png differ
diff --git a/website/static/img/mascot.webp b/website/static/img/mascot.webp
new file mode 100644
index 0000000..767fdcf
Binary files /dev/null and b/website/static/img/mascot.webp differ
diff --git a/website/static/img/screenshots/anime-1.png b/website/static/img/screenshots/anime-1.png
index 85de7be..60683f2 100644
Binary files a/website/static/img/screenshots/anime-1.png and b/website/static/img/screenshots/anime-1.png differ
diff --git a/website/static/img/screenshots/anime-1.webp b/website/static/img/screenshots/anime-1.webp
new file mode 100644
index 0000000..ff3a9f4
Binary files /dev/null and b/website/static/img/screenshots/anime-1.webp differ
diff --git a/website/static/img/screenshots/anime-2.png b/website/static/img/screenshots/anime-2.png
index 58dcc65..19f99e0 100644
Binary files a/website/static/img/screenshots/anime-2.png and b/website/static/img/screenshots/anime-2.png differ
diff --git a/website/static/img/screenshots/anime-2.webp b/website/static/img/screenshots/anime-2.webp
new file mode 100644
index 0000000..41e6964
Binary files /dev/null and b/website/static/img/screenshots/anime-2.webp differ
diff --git a/website/static/img/screenshots/anime-details.png b/website/static/img/screenshots/anime-details.png
index 66188d2..afe96a1 100644
Binary files a/website/static/img/screenshots/anime-details.png and b/website/static/img/screenshots/anime-details.png differ
diff --git a/website/static/img/screenshots/anime-details.webp b/website/static/img/screenshots/anime-details.webp
new file mode 100644
index 0000000..eec3e92
Binary files /dev/null and b/website/static/img/screenshots/anime-details.webp differ
diff --git a/website/static/img/screenshots/details.png b/website/static/img/screenshots/details.png
index 95054e6..9ce5f11 100644
Binary files a/website/static/img/screenshots/details.png and b/website/static/img/screenshots/details.png differ
diff --git a/website/static/img/screenshots/details.webp b/website/static/img/screenshots/details.webp
new file mode 100644
index 0000000..6def425
Binary files /dev/null and b/website/static/img/screenshots/details.webp differ
diff --git a/website/static/img/screenshots/extensions.png b/website/static/img/screenshots/extensions.png
index 46bcb83..7bcf843 100644
Binary files a/website/static/img/screenshots/extensions.png and b/website/static/img/screenshots/extensions.png differ
diff --git a/website/static/img/screenshots/extensions.webp b/website/static/img/screenshots/extensions.webp
new file mode 100644
index 0000000..6f668c0
Binary files /dev/null and b/website/static/img/screenshots/extensions.webp differ
diff --git a/website/static/img/screenshots/home.png b/website/static/img/screenshots/home.png
index 499ed35..dab12f7 100644
Binary files a/website/static/img/screenshots/home.png and b/website/static/img/screenshots/home.png differ
diff --git a/website/static/img/screenshots/home.webp b/website/static/img/screenshots/home.webp
new file mode 100644
index 0000000..d2f8e50
Binary files /dev/null and b/website/static/img/screenshots/home.webp differ
diff --git a/website/static/img/screenshots/manga.png b/website/static/img/screenshots/manga.png
index 4d30fef..96e7a6e 100644
Binary files a/website/static/img/screenshots/manga.png and b/website/static/img/screenshots/manga.png differ
diff --git a/website/static/img/screenshots/manga.webp b/website/static/img/screenshots/manga.webp
new file mode 100644
index 0000000..5166de2
Binary files /dev/null and b/website/static/img/screenshots/manga.webp differ
diff --git a/website/static/img/screenshots/settings.png b/website/static/img/screenshots/settings.png
index 6e6577d..ff698c9 100644
Binary files a/website/static/img/screenshots/settings.png and b/website/static/img/screenshots/settings.png differ
diff --git a/website/static/img/screenshots/settings.webp b/website/static/img/screenshots/settings.webp
new file mode 100644
index 0000000..607f2fa
Binary files /dev/null and b/website/static/img/screenshots/settings.webp differ