Optimize images to WebP (#1034)

CONTRIBUTING.md

@@ -96,7 +96,7 @@ $ npm run lint
 - Resize to have a width of 648px
 
 ### Images
-- Use `.png` format
+- Use `.webp` format
 
 ### Videos
 - Use `.webm` format

src/.vuepress/theme/components/Home.vue

@@ -81,12 +81,12 @@ export default {
 					<img
 						class="feature__Animation--dark"
 						alt="Feature image (Dark theme)"
-						:src="$withBase('/assets/home_' + feature.image + '-dark.png')"
+						:src="$withBase('/assets/home_' + feature.image + '-dark.webp')"
 					/>
 					<img
 						class="feature__Animation--light"
 						alt="Feature image (Light theme)"
-						:src="$withBase('/assets/home_' + feature.image + '-light.png')"
+						:src="$withBase('/assets/home_' + feature.image + '-light.webp')"
 					/>
 				</section>
 			</div>

src/forks/Neko.md

@@ -6,7 +6,7 @@ description: MangaDex specific fork of Tachiyomi and TachiyomiJ2K. With a focus
 lang: en-US
 meta:
   - property: og:image
-    content: /assets/forks_logo-neko.png
+    content: /assets/forks_logo-neko.webp
   - name: theme-color
     content: "#FD6684"
   - name: msapplication-TileColor
@@ -14,7 +14,7 @@ meta:
 sidebar: false
 ---
 
-# <img class="headerLogo" :src="$withBase('/assets/forks_logo-neko.png')"> Neko
+# <img class="headerLogo" :src="$withBase('/assets/forks_logo-neko.webp')"> Neko
 
 <ForkButtons forkName="Neko" downloadForkLink="https://api.github.com/repos/CarlosEsco/Neko/releases/latest" downloadForkStyle="background-color:#FD6684;color:#000000;" githubForkLink="https://github.com/CarlosEsco/Neko" androidVersion="7.0"/>
 

src/forks/README.md

@@ -9,7 +9,7 @@ sidebarDepth: 1
 # Forks
 Forks are alternative versions of **Tachiyomi** with exclusive features.
 
-## <img class="headerLogo" :src="$withBase('/assets/forks_logo-neko.png')"> [Neko](/forks/Neko)
+## <img class="headerLogo" :src="$withBase('/assets/forks_logo-neko.webp')"> [Neko](/forks/Neko)
 ::: videolink
 Maintained by [CarlosEsco](https://github.com/CarlosEsco)
 <br>Requires Android 7.0+
@@ -20,7 +20,7 @@ Some features include:
 * Same UI and features of J2K minus editing manga/cover
 * Built in manga recommendations
 
-## <img class="headerLogo" :src="$withBase('/assets/forks_logo-j2k.png')"> [TachiyomiJ2K](/forks/TachiyomiJ2K)
+## <img class="headerLogo" :src="$withBase('/assets/forks_logo-j2k.webp')"> [TachiyomiJ2K](/forks/TachiyomiJ2K)
 ::: videolink
 Maintained by [Jays2Kings](https://github.com/Jays2Kings)
 <br>Requires Android 6.0+
@@ -31,7 +31,7 @@ Some features include:
 * Dynamic Categories
 * Automatic background based on manga page
 
-## <img class="headerLogo" :src="$withBase('/assets/forks_logo-az.png')"> [TachiyomiAZ](/forks/TachiyomiAZ)
+## <img class="headerLogo" :src="$withBase('/assets/forks_logo-az.webp')"> [TachiyomiAZ](/forks/TachiyomiAZ)
 ::: videolink
 Maintained by [az4521](https://github.com/az4521)
 <br>Requires Android 5.0+
@@ -44,7 +44,7 @@ Some features include:
 * Manga recommendations from MyAnimeList and AniList
 * Grid view corner rounding configuration
 
-## <img class="headerLogo" :src="$withBase('/assets/forks_logo-sy.png')"> [TachiyomiSY](/forks/TachiyomiSY)
+## <img class="headerLogo" :src="$withBase('/assets/forks_logo-sy.webp')"> [TachiyomiSY](/forks/TachiyomiSY)
 ::: videolink
 Maintained by [Syer10](https://github.com/jobobby04)
 <br>Requires Android 6.0+

src/forks/TachiyomiAZ.md

@@ -6,7 +6,7 @@ description: This fork is based off of TachiyomiEH. It ports features and fixes
 lang: en-US
 meta:
   - property: og:image
-    content: /assets/forks_logo-az.png
+    content: /assets/forks_logo-az.webp
   - name: theme-color
     content: "#FFCC4D"
   - name: msapplication-TileColor
@@ -80,7 +80,7 @@ sidebar: false
 }
 </style>
 
-# <img class="headerLogo" :src="$withBase('/assets/forks_logo-az.png')"> TachiyomiAZ
+# <img class="headerLogo" :src="$withBase('/assets/forks_logo-az.webp')"> TachiyomiAZ
 
 <ForkButtons forkName="TachiyomiAZ" downloadForkLink="https://api.github.com/repos/az4521/TachiyomiAZ/releases/latest" downloadForkStyle="background-color:#FFCC4D;color:#000000;" githubForkLink="https://github.com/az4521/TachiyomiAZ"/>
 <div class="overflowContainer">
@@ -135,4 +135,4 @@ This fork is based off of **[TachiyomiEH](https://github.com/NerdNumber9/Tachiyo
 - Grid view corner rounding configuration
 - Manga recommendations
 
-<img class="zoomable" :src="$withBase('/assets/forks_gunz-az.png')">
+<img class="zoomable" :src="$withBase('/assets/forks_gunz-az.webp')">

src/forks/TachiyomiJ2K.md

@@ -6,7 +6,7 @@ description: This fork takes a new approach to the design of the base app along
 lang: en-US
 meta:
   - property: og:image
-    content: /assets/forks_logo-j2k.png
+    content: /assets/forks_logo-j2k.webp
   - name: theme-color
     content: "#0952AF"
   - name: msapplication-TileColor
@@ -14,7 +14,7 @@ meta:
 sidebar: false
 ---
 
-# <img class="headerLogo" :src="$withBase('/assets/forks_logo-j2k.png')"> TachiyomiJ2K
+# <img class="headerLogo" :src="$withBase('/assets/forks_logo-j2k.webp')"> TachiyomiJ2K
 
 <ForkButtons forkName="TachiyomiJ2K" downloadForkLink="https://api.github.com/repos/Jays2Kings/tachiyomiJ2K/releases/latest" downloadForkStyle="background-color:#0952AF;color:#FFFFFF;" githubForkLink="https://github.com/Jays2Kings/tachiyomiJ2K" androidVersion="6.0"/>
 

src/forks/TachiyomiSY.md

@@ -6,7 +6,7 @@ description: This fork adds quite a few custom unique features, it also has new
 lang: en-US
 meta:
   - property: og:image
-    content: /assets/forks_logo-sy.png
+    content: /assets/forks_logo-sy.webp
   - name: theme-color
     content: "#BE0F6E"
   - name: msapplication-TileColor
@@ -14,7 +14,7 @@ meta:
 sidebar: false
 ---
 
-# <img class="headerLogo" :src="$withBase('/assets/forks_logo-sy.png')"> TachiyomiSY
+# <img class="headerLogo" :src="$withBase('/assets/forks_logo-sy.webp')"> TachiyomiSY
 
 <ForkButtons forkName="TachiyomiSY" downloadForkLink="https://api.github.com/repos/jobobby04/TachiyomiSY/releases/latest" downloadForkStyle="background-color:#BE0F6E;color:#FFFFFF;" githubForkLink="https://github.com/jobobby04/TachiyomiSY" androidVersion="6.0"/>
 

src/help/guides/backups.md

@@ -53,11 +53,11 @@ You can do this by going to <NavigationText item="more"/> → <NavigationText it
 
 ## Forks information
 
-### <img class="forkIconBefore" src="/assets/forks_logo-neko.png" width="24" height="24" /> [Neko](/forks/Neko)
+### <img class="forkIconBefore" src="/assets/forks_logo-neko.webp" width="24" height="24" /> [Neko](/forks/Neko)
 
 This fork can only restore **MangaDex** entries in a backup. If there are entries from other sources that are a part of that backup then they will not transfer.
 
-### <img class="forkIconBefore" src="/assets/forks_logo-az.png" width="24" height="24" /> [TachiyomiAZ](/forks/TachiyomiAZ) and <img class="forkIconBefore" src="/assets/forks_logo-sy.png" width="24" height="24" />  [TachiyomiSY](/forks/TachiyomiSY)
+### <img class="forkIconBefore" src="/assets/forks_logo-az.webp" width="24" height="24" /> [TachiyomiAZ](/forks/TachiyomiAZ) and <img class="forkIconBefore" src="/assets/forks_logo-sy.webp" width="24" height="24" />  [TachiyomiSY](/forks/TachiyomiSY)
 
 These forks have some built-in extensions, namely: **E-Hentai**, **Hitomi.la**, and **nHentai** for <NavigationText item="tachiyomiaz" /> while <NavigationText item="tachiyomisy" /> only has **E-Hentai**.
 

src/help/guides/local-manga.md

@@ -100,7 +100,7 @@ The path to the folder with images must contain both the manga title and the cha
 <figure class="centered">
 	<h4>Example structure using the file manager</h4>
 	<p>Here, the manga name is <strong>test</strong> so the file structure is <code>/Tachiyomi/local/test/ch1/images</code>.</p>
-	<img class="zoomable" height="300" :src="$withBase('/assets/guides_local-manga.jpg')">
+	<img class="zoomable" height="300" :src="$withBase('/assets/guides_local-manga.webp')">
 </figure>
 :::
 

src/help/guides/reader-settings.md

@@ -60,21 +60,21 @@ This allows you to control what color the background should be in reader. Backgr
 <CarouselWrapper name="carousel-background-color">
 <CarouselItem>
 <figure class="centered">
-<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-background-black.png')">
+<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-background-black.webp')">
 <h4>Black</h4>
 <p>Surrounds page with black. With an AMOLED screen you can save battery by using this.</p>
 </figure>
 </CarouselItem>
 <CarouselItem>
 <figure class="centered">
-<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-background-gray.png')">
+<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-background-gray.webp')">
 <h4>Gray</h4>
 <p>Surrounds page with gray.</p>
 </figure>
 </CarouselItem>
 <CarouselItem>
 <figure class="centered">
-<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-background-white.png')">
+<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-background-white.webp')">
 <h4>White</h4>
 <p>Surrounds page with white. Makes pages seemless with the screen.</p>
 </figure>
@@ -109,27 +109,27 @@ This changes how tapping behaves
 <CarouselWrapper name="carousel-background-color">
 <CarouselItem>
 <figure class="centered">
-	<img width="260" :src="$withBase('/assets/guides_nav-right-and-left-light.png')">
+	<img width="260" :src="$withBase('/assets/guides_nav-right-and-left-light.webp')">
 	<h4>Right and Left</h4>
 	<p>This is the default for Pager</p>
 </figure>
 </CarouselItem>
 <CarouselItem>
 <figure class="centered">
-	<img width="260" :src="$withBase('/assets/guides_nav-l-light.png')">
+	<img width="260" :src="$withBase('/assets/guides_nav-l-light.webp')">
 	<h4>L shaped</h4>
 	<p>This is the default for Webtoon and Vertical</p>
 </figure>
 </CarouselItem>
 <CarouselItem>
 <figure class="centered">
-	<img  width="260" :src="$withBase('/assets/guides_nav-kindlish-light.png')">
+	<img  width="260" :src="$withBase('/assets/guides_nav-kindlish-light.webp')">
 	<h4>Kindlish</h4>
 </figure>
 </CarouselItem>
 <CarouselItem>
 <figure class="centered">
-	<img  width="260" :src="$withBase('/assets/guides_nav-edge-light.png')">
+	<img  width="260" :src="$withBase('/assets/guides_nav-edge-light.webp')">
 	<h4>Edge</h4>
 </figure>
 </CarouselItem>
@@ -168,39 +168,39 @@ All examples are illustrations and may not reflect what actually happens.
 <figure class="centered">
 	<h4>Fit screen</h4>
 	<p>Will fit either to width or height depending on image resolution</p>
-	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-fit-screen.png')">
+	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-fit-screen.webp')">
 </figure>
 </CarouselItem>
 <CarouselItem>
 <figure class="centered">
 	<h4>Stretch</h4>
-	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-stretch.png')">
+	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-stretch.webp')">
 </figure>
 </CarouselItem>
 <CarouselItem>
 <figure class="centered">
 	<h4>Fit width</h4>
-	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-fit-width.png')">
+	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-fit-width.webp')">
 </figure>
 </CarouselItem>
 <CarouselItem>
 <figure class="centered">
 	<h4>Fit height</h4>
-	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-fit-height.png')">
+	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-fit-height.webp')">
 </figure>
 </CarouselItem>
 <CarouselItem>
 <figure class="centered">
 	<h4>Original size</h4>
 	<p>Will be either zoom in or out depending on image resolution</p>
-	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-original-size.png')">
+	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-original-size.webp')">
 </figure>
 </CarouselItem>
 <CarouselItem>
 <figure class="centered">
 	<h4>Smart fit</h4>
 	<p>Fits to the longest side of the image</p>
-	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-smart-fit.png')">
+	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-smart-fit.webp')">
 </figure>
 </CarouselItem>
 </CarouselWrapper>
@@ -222,21 +222,21 @@ All examples are illustrations
 <figure class="centered">
 	<h4>Left</h4>
 	<p>Will start at the left side of the page.</p>
-	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-zoomstartpos-left.png')">
+	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-zoomstartpos-left.webp')">
 </figure>
 </CarouselItem>
 <CarouselItem>
 <figure class="centered">
 	<h4>Right</h4>
 	<p>Will start at the right side of the page.</p>
-	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-zoomstartpos-right.png')">
+	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-zoomstartpos-right.webp')">
 </figure>
 </CarouselItem>
 <CarouselItem>
 <figure class="centered">
 	<h4>Center</h4>
 	<p>Will start at the center of the page.</p>
-	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-zoomstartpos-center.png')">
+	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-zoomstartpos-center.webp')">
 </figure>
 </CarouselItem>
 </CarouselWrapper>
@@ -248,13 +248,13 @@ Tries to remove excess white borders
 <CarouselItem>
 <figure class="centered">
 	<h4>With Crop borders on</h4>
-	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-crop-border-on.png')">
+	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-crop-border-on.webp')">
 </figure>
 </CarouselItem>
 <CarouselItem>
 <figure class="centered">
 	<h4>With Crop borders off</h4>
-	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-crop-border-off.png')">
+	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-crop-border-off.webp')">
 </figure>
 </CarouselItem>
 </CarouselWrapper>

src/help/guides/troubleshooting.md

@@ -212,7 +212,7 @@ To dump crash logs following an app crash, go to <NavigationText item="more"/>
 
 ::: guide-empty
 <figure class="centered">
-	<img class="zoomable" :src="$withBase('/assets/guides_dump-crashlogs.png')">
+	<img class="zoomable" :src="$withBase('/assets/guides_dump-crashlogs.webp')">
 </figure>
 :::
 

src/sandbox/style-guide.md

@@ -190,14 +190,14 @@ Many of the stuff previously mentioned generally applies when making guides too,
 > <CarouselWrapper name="carousel-background-color">
 > <CarouselItem>
 > <figure class="centered">
-> 	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-background-black.png')">
+> 	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-background-black.webp')">
 > 	<h4>Black</h4>
 > 	<p>Surrounds page with black. With an AMOLED screen you can save battery by using this.</p>
 > </figure>
 > </CarouselItem>
 > <CarouselItem>
 > <figure class="centered">
-> 	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-background-white.png')">
+> 	<img height="400" intrinsicsize="208x500" width="260" :src="$withBase('/assets/guides_reader-background-white.webp')">
 > 	<h4>White</h4>
 > 	<p>Surrounds page with white. Makes pages seemless with the screen.</p>
 > </figure>