docs: Use WEBP instead of PNG for images.

This saves a ton of bandwidth, making the page's background load much faster. While AVIF would be a more efficient approach, it's not as widely supported yet. There is some quality loss but it's not really visible due to how they're integrated into the page.
TASEmulators · Sep 14, 2024 · 3aeef5e · 3aeef5e
1 parent 62c515d
commit 3aeef5e
Show file tree

Hide file tree

Showing 7 changed files with 4 additions and 4 deletions.
diff --git a/docs/_css/index.css b/docs/_css/index.css
@@ -83,21 +83,21 @@ body {
 }
 
 #element1 {
- background-image: url("../images/Backgrounds/FreeJ2ME_BG2.png");
+ background-image: url("../images/Backgrounds/FreeJ2ME_BG2.webp");
  background-repeat: repeat-x;
  width: 5660px;
  animation: slidegamebg 90s linear reverse infinite;
 }
 
 #element2 {
- background-image: url("../images/Backgrounds/FreeJ2ME_BG1.png");
+ background-image: url("../images/Backgrounds/FreeJ2ME_BG1.webp");
  background-repeat: repeat-x;
  width: 5660px;
  animation: slidegamebg 60s linear infinite;
 }
 
 #element3 {
- background-image: url("../images/Backgrounds/FreeJ2ME_BG3.png");
+ background-image: url("../images/Backgrounds/FreeJ2ME_BG3.webp");
  background-repeat: repeat-x;
  width: 5660px;
  animation: slidegamebg 45s linear reverse infinite;
@@ -491,4 +491,4 @@ iframe {
  #firstpane-content-right p {
  font-size: 1.3em;
  }
-}
+}
diff --git a/docs/images/Backgrounds/FreeJ2ME_BG1.png b/docs/images/Backgrounds/FreeJ2ME_BG1.png
diff --git a/docs/images/Backgrounds/FreeJ2ME_BG1.webp b/docs/images/Backgrounds/FreeJ2ME_BG1.webp
diff --git a/docs/images/Backgrounds/FreeJ2ME_BG2.png b/docs/images/Backgrounds/FreeJ2ME_BG2.png
diff --git a/docs/images/Backgrounds/FreeJ2ME_BG2.webp b/docs/images/Backgrounds/FreeJ2ME_BG2.webp
diff --git a/docs/images/Backgrounds/FreeJ2ME_BG3.png b/docs/images/Backgrounds/FreeJ2ME_BG3.png
diff --git a/docs/images/Backgrounds/FreeJ2ME_BG3.webp b/docs/images/Backgrounds/FreeJ2ME_BG3.webp