diff --git a/src/routes/zakarya/+page.svelte b/src/routes/zakarya/+page.svelte
index 002eece..9d32087 100644
--- a/src/routes/zakarya/+page.svelte
+++ b/src/routes/zakarya/+page.svelte
@@ -30,13 +30,19 @@
 </svelte:head>
 
 <main class={darkTheme() ? "dark-theme" : ""}>
-  <img class="banner" src="/img/zakarya-banner.png" alt="Zakarya Banner" />
+  <img
+    class="banner"
+    src="/img/zakarya-banner.webp"
+    alt="Zakarya Banner"
+    srcset="/img/zakarya-banner.webp 960w, /img/zakarya-banner@2x.webp 1920w"
+  />
   <div class="hero panel profile">
     <div class="nameplate">
       <img
-        src="/img/zakarya-icon.png"
+        src="/img/zakarya-icon.webp"
         class="zakarya-icon"
         alt="Zakarya Icon"
+        srcset="/img/zakarya-icon.webp 540w, /img/zakarya-icon@2x.webp 1080w"
       />
       <span class="name-title">Zakarya</span>
     </div>
diff --git a/static/img/zakarya-banner.png b/static/img/zakarya-banner.png
deleted file mode 100644
index 268751e..0000000
Binary files a/static/img/zakarya-banner.png and /dev/null differ
diff --git a/static/img/zakarya-banner.webp b/static/img/zakarya-banner.webp
new file mode 100644
index 0000000..85341f1
Binary files /dev/null and b/static/img/zakarya-banner.webp differ
diff --git a/static/img/zakarya-banner@2x.webp b/static/img/zakarya-banner@2x.webp
new file mode 100644
index 0000000..ef01885
Binary files /dev/null and b/static/img/zakarya-banner@2x.webp differ
diff --git a/static/img/zakarya-icon.png b/static/img/zakarya-icon.png
deleted file mode 100644
index 288ffdf..0000000
Binary files a/static/img/zakarya-icon.png and /dev/null differ
diff --git a/static/img/zakarya-icon.webp b/static/img/zakarya-icon.webp
new file mode 100644
index 0000000..95e0b4b
Binary files /dev/null and b/static/img/zakarya-icon.webp differ
diff --git a/static/img/zakarya-icon@2x.webp b/static/img/zakarya-icon@2x.webp
new file mode 100644
index 0000000..e7a13ac
Binary files /dev/null and b/static/img/zakarya-icon@2x.webp differ