✨ Story 3.6: optimisation images

templates/project-card.php

@@ -6,7 +6,7 @@
 
 $title = $project['title'] ?? 'Sans titre';
 $slug = $project['slug'] ?? '#';
-$thumbnail = $project['thumbnail'] ?? 'default-project.svg';
+$thumbnail = $project['thumbnail'] ?? 'default-project.webp';
 $technologies = $project['technologies'] ?? [];
 $maxTechs = 4;
 ?>
@@ -14,21 +14,13 @@ $maxTechs = 4;
 <article class="card-interactive group">
     <a href="/projet/<?= htmlspecialchars($slug, ENT_QUOTES, 'UTF-8') ?>" class="block">
         <div class="aspect-thumbnail overflow-hidden">
-            <picture>
-                <source
-                    srcset="/assets/img/projects/<?= htmlspecialchars($thumbnail, ENT_QUOTES, 'UTF-8') ?>"
-                    type="image/webp"
-                >
-                <img
-                    src="/assets/img/projects/<?= htmlspecialchars(str_replace('.webp', '.jpg', $thumbnail), ENT_QUOTES, 'UTF-8') ?>"
-                    alt="Aperçu du projet <?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?>"
-                    width="400"
-                    height="225"
-                    loading="lazy"
-                    class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
-                    onerror="this.onerror=null;this.src='/assets/img/projects/default-project.svg';"
-                >
-            </picture>
+            <?= projectImage(
+                $thumbnail,
+                "Aperçu du projet {$title}",
+                400,
+                225,
+                true
+            ) ?>
         </div>
 
         <div class="card-body">