Changed images format to webp for faster loads

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?
 

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">

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}

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}>