chore: Compress images on instructions page to webp format

- Compressed images on the instructions page from 5.81MB to 457KB.
- Achieved a reduction of approximately 5,624,259 bytes (about 5.62 MB) (92.32%).

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>