diff --git a/public/img/instructions/game-start.png b/public/img/instructions/game-start.png
deleted file mode 100644
index 1c37506..0000000
Binary files a/public/img/instructions/game-start.png and /dev/null differ
diff --git a/public/img/instructions/game-start.webp b/public/img/instructions/game-start.webp
new file mode 100644
index 0000000..ed2cf13
Binary files /dev/null and b/public/img/instructions/game-start.webp differ
diff --git a/public/img/instructions/hexagon-gem.png b/public/img/instructions/hexagon-gem.png
deleted file mode 100644
index 175b4aa..0000000
Binary files a/public/img/instructions/hexagon-gem.png and /dev/null differ
diff --git a/public/img/instructions/hexagon-gem.webp b/public/img/instructions/hexagon-gem.webp
new file mode 100644
index 0000000..687b13a
Binary files /dev/null and b/public/img/instructions/hexagon-gem.webp differ
diff --git a/public/img/instructions/leaderboard.png b/public/img/instructions/leaderboard.png
deleted file mode 100644
index fd46262..0000000
Binary files a/public/img/instructions/leaderboard.png and /dev/null differ
diff --git a/public/img/instructions/leaderboard.webp b/public/img/instructions/leaderboard.webp
new file mode 100644
index 0000000..06667af
Binary files /dev/null and b/public/img/instructions/leaderboard.webp differ
diff --git a/public/img/instructions/matchmaking.png b/public/img/instructions/matchmaking.png
deleted file mode 100644
index 39025a3..0000000
Binary files a/public/img/instructions/matchmaking.png and /dev/null differ
diff --git a/public/img/instructions/matchmaking.webp b/public/img/instructions/matchmaking.webp
new file mode 100644
index 0000000..1c58ce6
Binary files /dev/null and b/public/img/instructions/matchmaking.webp differ
diff --git a/public/img/instructions/profile-replays.png b/public/img/instructions/profile-replays.png
deleted file mode 100644
index 3d07eec..0000000
Binary files a/public/img/instructions/profile-replays.png and /dev/null differ
diff --git a/public/img/instructions/profile-replays.webp b/public/img/instructions/profile-replays.webp
new file mode 100644
index 0000000..28a9a0f
Binary files /dev/null and b/public/img/instructions/profile-replays.webp differ
diff --git a/public/img/instructions/replay.png b/public/img/instructions/replay.png
deleted file mode 100644
index f14efb0..0000000
Binary files a/public/img/instructions/replay.png and /dev/null differ
diff --git a/public/img/instructions/replay.webp b/public/img/instructions/replay.webp
new file mode 100644
index 0000000..475a63a
Binary files /dev/null and b/public/img/instructions/replay.webp differ
diff --git a/public/img/instructions/room-creation.png b/public/img/instructions/room-creation.png
deleted file mode 100644
index 507cf55..0000000
Binary files a/public/img/instructions/room-creation.png and /dev/null differ
diff --git a/public/img/instructions/room-creation.webp b/public/img/instructions/room-creation.webp
new file mode 100644
index 0000000..637478a
Binary files /dev/null and b/public/img/instructions/room-creation.webp differ
diff --git a/public/img/instructions/three-hexagons.png b/public/img/instructions/three-hexagons.png
deleted file mode 100644
index 1038f16..0000000
Binary files a/public/img/instructions/three-hexagons.png and /dev/null differ
diff --git a/public/img/instructions/three-hexagons.webp b/public/img/instructions/three-hexagons.webp
new file mode 100644
index 0000000..bb5a166
Binary files /dev/null and b/public/img/instructions/three-hexagons.webp differ
diff --git a/public/img/instructions/tile-placement.png b/public/img/instructions/tile-placement.png
deleted file mode 100644
index cb5eac5..0000000
Binary files a/public/img/instructions/tile-placement.png and /dev/null differ
diff --git a/public/img/instructions/tile-placement.webp b/public/img/instructions/tile-placement.webp
new file mode 100644
index 0000000..4084d5a
Binary files /dev/null and b/public/img/instructions/tile-placement.webp differ
diff --git a/public/img/instructions/trade.png b/public/img/instructions/trade.png
deleted file mode 100644
index 8a3b7b5..0000000
Binary files a/public/img/instructions/trade.png and /dev/null differ
diff --git a/public/img/instructions/trade.webp b/public/img/instructions/trade.webp
new file mode 100644
index 0000000..b43015e
Binary files /dev/null and b/public/img/instructions/trade.webp differ
diff --git a/public/img/instructions/two-hexagons.png b/public/img/instructions/two-hexagons.png
deleted file mode 100644
index c0166be..0000000
Binary files a/public/img/instructions/two-hexagons.png and /dev/null differ
diff --git a/public/img/instructions/two-hexagons.webp b/public/img/instructions/two-hexagons.webp
new file mode 100644
index 0000000..e93c75c
Binary files /dev/null and b/public/img/instructions/two-hexagons.webp differ
diff --git a/views/pages/instructions.ejs b/views/pages/instructions.ejs
index 2b977ca..cfe3a5e 100644
--- a/views/pages/instructions.ejs
+++ b/views/pages/instructions.ejs
@@ -28,7 +28,7 @@
                         From the home page, you can either create a new room or join an existing one. If you create a room, you will receive a unique room code that other players can use to join. Alternatively, browse the room list to find and join a public room.
                     </p>
                 </div>
-                <img src="/img/instructions/room-creation.png" alt="Create or Join Room" class="rounded-lg shadow-md">
+                <img src="/img/instructions/room-creation.webp" alt="Create or Join Room" class="rounded-lg shadow-md">
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center mt-8">
                 <div>
@@ -37,7 +37,7 @@
                         Head to the <strong>Play Now</strong> page to enter the matchmaking queue. Once enough players are gathered, the game will start automatically. This is a quick and easy way to find opponents.
                     </p>
                 </div>
-                <img src="/img/instructions/matchmaking.png" alt="Matchmaking Queue" class="rounded-lg shadow-md">
+                <img src="/img/instructions/matchmaking.webp" alt="Matchmaking Queue" class="rounded-lg shadow-md">
             </div>
         </section>
 
@@ -67,7 +67,7 @@
                         At the start of a basic game, the first player tosses one of their tiles into the air. Where it lands determines their starting placement. Play continues clockwise.
                     </p>
                 </div>
-                <img src="/img/instructions/game-start.png" alt="Game Start" class="rounded-lg shadow-md">
+                <img src="/img/instructions/game-start.webp" alt="Game Start" class="rounded-lg shadow-md">
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start mt-8">
                 <div>
@@ -76,7 +76,7 @@
                         Each player places a tile adjacent to any other tile on the board.
                     </p>
                 </div>
-                <img src="/img/instructions/tile-placement.png" alt="Tile Placement" class="rounded-lg shadow-md">
+                <img src="/img/instructions/tile-placement.webp" alt="Tile Placement" class="rounded-lg shadow-md">
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start mt-8">
                 <div>
@@ -85,7 +85,7 @@
                         If a player places a tile in a way that forms a hexagon gem of a single color, that player can play another tile. Otherwise, it’s the next player’s turn.
                     </p>
                 </div>
-                <img src="/img/instructions/hexagon-gem.png" alt="Hexagon Gem Formation" class="rounded-lg shadow-md">
+                <img src="/img/instructions/hexagon-gem.webp" alt="Hexagon Gem Formation" class="rounded-lg shadow-md">
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start mt-8">
                 <div>
@@ -102,7 +102,7 @@
                         Each player has the option to trade every turn. If the other players reject the trade, the player can place a tile or offer a new trade with a different player.
                     </p>
                 </div>
-                <img src="/img/instructions/trade.png" alt="Trading Tiles" class="rounded-lg shadow-md">
+                <img src="/img/instructions/trade.webp" alt="Trading Tiles" class="rounded-lg shadow-md">
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start mt-8">
                 <div>
@@ -119,7 +119,7 @@
                         After the player forms two gems, they can force trade with another layer (opponent cannot decline) <b>AND</b> can place another tile.
                     </p>
                 </div>
-                <img src="/img/instructions/two-hexagons.png" alt="Forming 2 Hexagons" class="rounded-lg shadow-md">
+                <img src="/img/instructions/two-hexagons.webp" alt="Forming 2 Hexagons" class="rounded-lg shadow-md">
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start mt-8">
                 <div>
@@ -128,7 +128,7 @@
                         At any time, when three gems are formed in one placement, the player wins the round immediately.
                     </p>
                 </div>
-                <img src="/img/instructions/three-hexagons.png" alt="Forming 3 Hexagons" class="rounded-lg shadow-md">
+                <img src="/img/instructions/three-hexagons.webp" alt="Forming 3 Hexagons" class="rounded-lg shadow-md">
             </div>
         </section>
 
@@ -142,7 +142,7 @@
                         At the end of each game, players earn experience points based on their rank. These points contribute to your leaderboard position, allowing you to climb the ranks and showcase your skills.
                     </p>
                 </div>
-                <img src="/img/instructions/leaderboard.png" alt="Leaderboard Rankings" class="rounded-lg shadow-md">
+                <img src="/img/instructions/leaderboard.webp" alt="Leaderboard Rankings" class="rounded-lg shadow-md">
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center mt-8">
                 <div>
@@ -152,8 +152,8 @@
                     </p>
                 </div>
                 <div class="flex flex-col gap-4">
-                    <img src="/img/instructions/profile-replays.png" alt="Profile with Game History" class="rounded-lg shadow-md">
-                    <img src="/img/instructions/replay.png" alt="Game Replay" class="rounded-lg shadow-md">
+                    <img src="/img/instructions/profile-replays.webp" alt="Profile with Game History" class="rounded-lg shadow-md">
+                    <img src="/img/instructions/replay.webp" alt="Game Replay" class="rounded-lg shadow-md">
                 </div>
             </div>
         </section>