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">
+            <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.jpg"
+                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) => (