update: convert images to webp

vigneshd332 · Jun 23, 2024 · 9595d86 · 9595d86
1 parent 01e0ed1
commit 9595d86
Show file tree

Hide file tree

Showing 30 changed files with 14 additions and 10 deletions.
diff --git a/public/textures/waternormals.jpg b/public/textures/waternormals.jpg
diff --git a/public/textures/waternormals.webp b/public/textures/waternormals.webp
diff --git a/src/assets/about-bg.jpg b/src/assets/about-bg.jpg
diff --git a/src/assets/about-bg.webp b/src/assets/about-bg.webp
diff --git a/src/assets/arrows.png b/src/assets/arrows.png
diff --git a/src/assets/arrows.webp b/src/assets/arrows.webp
diff --git a/src/assets/delta.jpg b/src/assets/delta.jpg
diff --git a/src/assets/delta.webp b/src/assets/delta.webp
diff --git a/src/assets/dwoc.webp b/src/assets/dwoc.webp
diff --git a/src/assets/f.png b/src/assets/f.png
diff --git a/src/assets/f.webp b/src/assets/f.webp
diff --git a/src/assets/grey-bg.png b/src/assets/grey-bg.png
diff --git a/src/assets/grey-mountains.png b/src/assets/grey-mountains.png
diff --git a/src/assets/grey-mountains.webp b/src/assets/grey-mountains.webp
diff --git a/src/assets/projects-bg.webp b/src/assets/projects-bg.webp
diff --git a/src/assets/r.png b/src/assets/r.png
diff --git a/src/assets/r.webp b/src/assets/r.webp
diff --git a/src/assets/radar.webp b/src/assets/radar.webp
diff --git a/src/assets/react-icon.png b/src/assets/react-icon.png
diff --git a/src/assets/react-icon.webp b/src/assets/react-icon.webp
diff --git a/src/assets/upArrow.png b/src/assets/upArrow.png
diff --git a/src/assets/upArrow.webp b/src/assets/upArrow.webp
diff --git a/src/assets/wasd.png b/src/assets/wasd.png
diff --git a/src/assets/wasd.webp b/src/assets/wasd.webp
diff --git a/src/service-worker.ts b/src/service-worker.ts
@@ -49,6 +49,9 @@ registerRoute(
       url.pathname.endsWith(".gltf") ||
       url.pathname.endsWith(".bin") ||
       url.pathname.endsWith(".jpg") ||
+      url.pathname.endsWith(".json") ||
+      url.pathname.endsWith(".woff") ||
+      url.pathname.endsWith(".woff2") ||
       url.pathname.endsWith(".jpeg")),
   // Customize this strategy as needed, e.g., by changing to CacheFirst.
   new StaleWhileRevalidate({

diff --git a/src/ui/components/About/About.module.css b/src/ui/components/About/About.module.css
@@ -1,5 +1,5 @@
 .aboutBgWrapper {
-  background-image: url("../../../assets/about-bg.jpg");
+  background-image: url("../../../assets/about-bg.webp");
   background-size: 100% 100%;
   height: 100%;
   width: 100%;

diff --git a/src/ui/components/Experience/Experience.module.css b/src/ui/components/Experience/Experience.module.css
@@ -1,8 +1,9 @@
 .experienceWrapper {
   width: 100%;
   min-height: 100vh;
-  background-color: #000000;
-  background-image: url("../../../assets/grey-mountains.png");
+  background-color: #0a0a0a;
+  background-image: url("../../../assets/grey-mountains.webp");
+  background-size: cover;
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/ui/components/Footer/Footer.tsx b/src/ui/components/Footer/Footer.tsx
@@ -1,4 +1,4 @@
-import reactIcon from "../../../assets/react-icon.png";
+import reactIcon from "../../../assets/react-icon.webp";
 import threeIcon from "../../../assets/threejs.svg";
 import styles from "./Footer.module.css";
 

diff --git a/src/ui/components/WorldUI/WorldUI.tsx b/src/ui/components/WorldUI/WorldUI.tsx
@@ -1,10 +1,10 @@
 import { useNavigate } from "react-router-dom";
 import styles from "./WorldUI.module.css";
-import wasd from "../../../assets/wasd.png";
-import arrows from "../../../assets/arrows.png";
-import rkey from "../../../assets/r.png";
-import fkey from "../../../assets/f.png";
-import uparrow from "../../../assets/upArrow.png";
+import wasd from "../../../assets/wasd.webp";
+import arrows from "../../../assets/arrows.webp";
+import rkey from "../../../assets/r.webp";
+import fkey from "../../../assets/f.webp";
+import uparrow from "../../../assets/upArrow.webp";
 
 const WorldUI = (): JSX.Element => {
   const navigate = useNavigate();

diff --git a/src/world/world.ts b/src/world/world.ts
@@ -58,7 +58,7 @@ export default async function init(setLoaded: (loaded: boolean) => void) {
     textureWidth: 512,
     textureHeight: 512,
     waterNormals: new THREE.TextureLoader().load(
-      "textures/waternormals.jpg",
+      "textures/waternormals.webp",
       function (texture) {
         texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
       }