diff --git a/src/assets/images/jesus.jpg b/src/assets/images/jesus.jpg
deleted file mode 100644
index 2fb2ec6..0000000
Binary files a/src/assets/images/jesus.jpg and /dev/null differ
diff --git a/src/assets/images/jesus.webp b/src/assets/images/jesus.webp
new file mode 100644
index 0000000..b0bf288
Binary files /dev/null and b/src/assets/images/jesus.webp differ
diff --git a/src/index.md b/src/index.md
index 657c7a3..9a6f044 100644
--- a/src/index.md
+++ b/src/index.md
@@ -4,7 +4,7 @@ layout: "layout.njk"
 description: "A website showcasing my skills and experience as a network engineer"
 sitemapPriority: 0.9
 sitemapChangefreq: "weekly"
-image: "/assets/images/jesus.jpg"
+image: "/assets/images/jesus.webp"
 ---
 <!-- Hero Section -->
 <section id="hero" class="text-center py-20">
@@ -17,7 +17,7 @@ image: "/assets/images/jesus.jpg"
     <h2 class="text-3xl font-bold text-center section-title">About Me</h2>
     <div class="flex flex-col md:flex-row items-center gap-12">
         <div class="md:w-1/3 text-center">
-            <img src="/assets/images/jesus.jpg" width="300" height="300" alt="Jesus Otero Lagunes" class="rounded-full mx-auto shadow-2xl border-4 border-gray-700">
+            <img src="{{ image }}" width="300" height="300" alt="Jesus Otero Lagunes" class="rounded-full mx-auto shadow-2xl border-4 border-gray-700">
         </div>
         <div class="md:w-2/3">
             <p class="text-lg text-gray-400 mb-4">