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
+            <picture>
-              src="/bryan-slop.jpg"
+              <source
-              alt="Bryan Slop, oprichter van SLP Software"
+                type="image/webp"
-              width={224}
+                srcSet="/bryan-slop-400.webp 400w, /bryan-slop-800.webp 800w"
-              height={224}
+                sizes="(min-width: 640px) 224px, 160px"
-              className="h-40 w-40 rounded-full border-2 border-accent-line object-cover shadow-lg sm:h-56 sm:w-56"
+              />
-            />
+              <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) => (