✨ Story 3.6: optimisation images

2026-02-04 17:17:51 +01:00
parent d3e699d00e
commit d8fd2d9c6c
6 changed files with 98 additions and 53 deletions
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -78,4 +78,33 @@ function getAllTechnologies(): array
    }
    sort($technologies);
    return $technologies;
+}
+
+/**
+ * Helper pour afficher une image projet optimisée
+ */
+function projectImage(string $filename, string $alt, int $width, int $height, bool $lazy = true): string
+{
+    $webp = $filename;
+    $fallback = str_replace('.webp', '.jpg', $filename);
+    $lazyAttr = $lazy ? 'loading="lazy"' : '';
+
+    $altEsc = htmlspecialchars($alt, ENT_QUOTES, 'UTF-8');
+    $webpEsc = htmlspecialchars($webp, ENT_QUOTES, 'UTF-8');
+    $fallbackEsc = htmlspecialchars($fallback, ENT_QUOTES, 'UTF-8');
+
+    return <<<HTML
+<picture>
+    <source srcset="/assets/img/projects/{$webpEsc}" type="image/webp">
+    <img
+        src="/assets/img/projects/{$fallbackEsc}"
+        alt="{$altEsc}"
+        width="{$width}"
+        height="{$height}"
+        {$lazyAttr}
+        class="w-full h-full object-cover"
+        onerror="this.onerror=null;this.src='/assets/img/projects/default-project.svg';"
+    >
+</picture>
+HTML;
 }