diff --git a/public/bryan-slop-400.jpg b/public/bryan-slop-400.jpg
new file mode 100644
index 0000000..696fe8c
Binary files /dev/null and b/public/bryan-slop-400.jpg differ
diff --git a/public/bryan-slop-400.webp b/public/bryan-slop-400.webp
new file mode 100644
index 0000000..0863a9f
Binary files /dev/null and b/public/bryan-slop-400.webp differ
diff --git a/public/bryan-slop.jpg b/public/bryan-slop-800.jpg
similarity index 100%
rename from public/bryan-slop.jpg
rename to public/bryan-slop-800.jpg
diff --git a/public/bryan-slop-800.webp b/public/bryan-slop-800.webp
new file mode 100644
index 0000000..c7e79bc
Binary files /dev/null and b/public/bryan-slop-800.webp differ
diff --git a/src/features/landing/components/AboutSection.tsx b/src/features/landing/components/AboutSection.tsx
index c8ddbc1..5b249e2 100644
--- a/src/features/landing/components/AboutSection.tsx
+++ b/src/features/landing/components/AboutSection.tsx
@@ -17,13 +17,22 @@ export function AboutSection() {
             </h2>
           </div>
           <div className="order-2 flex items-center justify-center sm:order-3 sm:col-start-2 sm:row-start-1 sm:row-span-2">
-            <img
-              src="/bryan-slop.jpg"
-              alt="Bryan Slop, oprichter van SLP Software"
-              width={224}
-              height={224}
-              className="h-40 w-40 rounded-full border-2 border-accent-line object-cover shadow-lg sm:h-56 sm:w-56"
-            />
+            <picture>
+              <source
+                type="image/webp"
+                srcSet="/bryan-slop-400.webp 400w, /bryan-slop-800.webp 800w"
+                sizes="(min-width: 640px) 224px, 160px"
+              />
+              <img
+                src="/bryan-slop-800.jpg"
+                srcSet="/bryan-slop-400.jpg 400w, /bryan-slop-800.jpg 800w"
+                sizes="(min-width: 640px) 224px, 160px"
+                alt="Bryan Slop, oprichter van SLP Software"
+                width={224}
+                height={224}
+                className="h-40 w-40 rounded-full border-2 border-accent-line object-cover shadow-lg sm:h-56 sm:w-56"
+              />
+            </picture>
           </div>
           <div className="order-3 sm:order-2 sm:col-start-1 sm:row-start-2">
             {aboutContent.paragraphs.map((paragraph) => (