diff --git a/index.html b/index.html
index aaa9b4f..088bbed 100644
--- a/index.html
+++ b/index.html
@@ -84,7 +84,7 @@
 
 <body>
     <header>
-        <img src="/static/logo.png" alt="">
+        <img src="/static/logo.webp" alt="">
     </header>
     <div class="center">
         <div id="join-menu" class="join-menu"><input type="text" id="room-id" placeholder="Room ID"><button
@@ -352,19 +352,19 @@
             }
 
             const assets = {
-                p: '/static/black_pawn.png',
-                r: '/static/black_rook.png',
-                c: '/static/black_castle.png',
-                b: '/static/black_bishop.png',
-                k: '/static/black_king.png',
-                q: '/static/black_queen.png',
+                p: '/static/black_pawn.webp',
+                r: '/static/black_rook.webp',
+                c: '/static/black_castle.webp',
+                b: '/static/black_bishop.webp',
+                k: '/static/black_king.webp',
+                q: '/static/black_queen.webp',
 
-                P: '/static/white_pawn.png',
-                R: '/static/white_rook.png',
-                C: '/static/white_castle.png',
-                B: '/static/white_bishop.png',
-                K: '/static/white_king.png',
-                Q: '/static/white_queen.png',
+                P: '/static/white_pawn.webp',
+                R: '/static/white_rook.webp',
+                C: '/static/white_castle.webp',
+                B: '/static/white_bishop.webp',
+                K: '/static/white_king.webp',
+                Q: '/static/white_queen.webp',
             };
 
             const loadPromises = Object.entries(assets).map(([key, src]) => {
