diff --git a/app/header.tsx b/app/header.tsx
index 03a6f87..e6cf3c5 100644
--- a/app/header.tsx
+++ b/app/header.tsx
@@ -95,6 +95,7 @@ export default function Header() {
             rel="noopener noreferrer"
             target="_blank"
             passHref
+            aria-label="Link to GitHub repo of the project"
           >
             <GitHubLogoIcon className="h-4 w-4" />
           </Link>
diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index 0a1bfd8..483c1ec 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -338,34 +338,58 @@ export default function PlaygroundPage() {
                   {!userPlaying && !visualizing && (
                     <>
                       <div className="absolute left-1/2 top-0 flex -translate-x-1/2 -translate-y-full gap-4">
-                        <button onClick={handleIncreaseUp}>
+                        <button
+                          onClick={handleIncreaseUp}
+                          aria-label="One more row on top"
+                        >
                           <ChevronUp />
                         </button>
-                        <button onClick={handleDecreaseUp}>
+                        <button
+                          onClick={handleDecreaseUp}
+                          aria-label="One less row on top"
+                        >
                           <ChevronDown />
                         </button>
                       </div>
                       <div className="absolute left-0 top-1/2 flex -translate-x-full -translate-y-1/2 flex-col gap-4">
-                        <button onClick={handleIncreaseLeft}>
+                        <button
+                          onClick={handleIncreaseLeft}
+                          aria-label="One more column on left side"
+                        >
                           <ChevronLeft />
                         </button>
-                        <button onClick={handleDecreaseLeft}>
+                        <button
+                          onClick={handleDecreaseLeft}
+                          aria-label="One less column on left side"
+                        >
                           <ChevronRight />
                         </button>
                       </div>
                       <div className="absolute right-0 top-1/2 flex -translate-y-1/2 translate-x-full flex-col gap-4">
-                        <button onClick={handleIncreaseRight}>
+                        <button
+                          onClick={handleIncreaseRight}
+                          aria-label="One more column on right side"
+                        >
                           <ChevronRight />
                         </button>
-                        <button onClick={handleDecreaseRight}>
+                        <button
+                          onClick={handleDecreaseRight}
+                          aria-label="One less column on right side"
+                        >
                           <ChevronLeft />
                         </button>
                       </div>
                       <div className="absolute bottom-0 left-1/2 flex -translate-x-1/2 translate-y-full gap-4">
-                        <button onClick={handleIncreaseDown}>
+                        <button
+                          onClick={handleIncreaseDown}
+                          aria-label="One more row on bottom"
+                        >
                           <ChevronDown />
                         </button>
-                        <button onClick={handleDecreaseDown}>
+                        <button
+                          onClick={handleDecreaseDown}
+                          aria-label="One less row on bottom"
+                        >
                           <ChevronUp />
                         </button>
                       </div>
diff --git a/components/Map.tsx b/components/Map.tsx
index 6c385af..90b01c1 100644
--- a/components/Map.tsx
+++ b/components/Map.tsx
@@ -57,7 +57,7 @@ export function Map({ map, size = 64 }: { map: string[][]; size?: number }) {
   return (
     <div className="relative">
       <img
-        src="/map.png"
+        src="/map.webp"
         alt="Background Map"
         className="absolute inset-0 h-full w-full object-cover opacity-50"
       />
diff --git a/public/map.png b/public/map.png
deleted file mode 100644
index 690c534..0000000
Binary files a/public/map.png and /dev/null differ
diff --git a/public/map.webp b/public/map.webp
new file mode 100644
index 0000000..89148d2
Binary files /dev/null and b/public/map.webp differ
diff --git a/renderer/index.ts b/renderer/index.ts
index 505efd8..93961b0 100644
--- a/renderer/index.ts
+++ b/renderer/index.ts
@@ -30,7 +30,7 @@ async function loadAssets() {
   assets.loading = true;
 
   const [bg, box, player, rock, zombie, zombieHit] = await Promise.all([
-    loadImage("/map.png"),
+    loadImage("/map.webp"),
     loadImage("/entities/block.svg"),
     loadImage("/entities/player_alive_1.svg"),
     loadImage("/entities/rocks.svg"),