perf(images): convert hero PNGs to WebP — 93% size reduction

19MB of hero PNGs → 1.4MB WebP (cwebp q80). Add <picture> tags with WebP source + PNG fallback, fetchpriority="high" on LCP hero image. Target LCP improvement from 3.5s to <700ms. Co-Authored-By: Claude Opus 4.6 <[email protected]>
2026-03-11 03:33:02 +01:00
parent d145749219
commit f9800135f5
8 changed files with 17 additions and 10 deletions
@@ -193,19 +193,26 @@

          <aside class="hero-lab-visual" aria-label="Assets labo electronique">
            <figure class="lab-asset lab-asset-pcb" data-hero-asset="primary">
-              <img
-                src="/assets/da/openai/hero-pcb-routing-map.png"
-                alt="Plan de routage PCB avec traces et vias"
-                loading="eager"
-                data-hero-image />
+              <picture>
+                <source srcset="/assets/da/openai/hero-pcb-routing-map.webp" type="image/webp" />
+                <img
+                  src="/assets/da/openai/hero-pcb-routing-map.png"
+                  alt="Plan de routage PCB avec traces et vias"
+                  loading="eager"
+                  fetchpriority="high"
+                  data-hero-image />
+              </picture>
              <figcaption>Plan de routage vivant — trace / via / bus</figcaption>
            </figure>
            <figure class="lab-asset lab-asset-measure" data-hero-asset="secondary">
-              <img
-                src="/assets/da/openai/hero-measurement-rig.png"
-                alt="Planche de mesure pour validation électronique"
-                loading="lazy"
-                data-hero-image />
+              <picture>
+                <source srcset="/assets/da/openai/hero-measurement-rig.webp" type="image/webp" />
+                <img
+                  src="/assets/da/openai/hero-measurement-rig.png"
+                  alt="Planche de mesure pour validation électronique"
+                  loading="lazy"
+                  data-hero-image />
+              </picture>
              <figcaption>Notebook labo — validation terrain & protocole</figcaption>
            </figure>
          </aside>