From d8fd2d9c6cd039ee2496238f0f6e105f62c83071 Mon Sep 17 00:00:00 2001 From: skycel Date: Wed, 4 Feb 2026 17:17:51 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Story=203.6:=20optimisation=20image?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/stories/3.6.optimisation-images.md | 49 +++++++++++++------------ includes/functions.php | 29 +++++++++++++++ pages/project-single.php | 28 +++++++------- templates/project-card.php | 24 ++++-------- tests/images.test.php | 20 ++++++++++ tests/run.ps1 | 1 + 6 files changed, 98 insertions(+), 53 deletions(-) create mode 100644 tests/images.test.php diff --git a/docs/stories/3.6.optimisation-images.md b/docs/stories/3.6.optimisation-images.md index 3c5bbfa..8a14731 100644 --- a/docs/stories/3.6.optimisation-images.md +++ b/docs/stories/3.6.optimisation-images.md @@ -2,7 +2,7 @@ ## Status -Ready for Dev +In Progress ## Story @@ -21,28 +21,28 @@ Ready for Dev ## Tasks / Subtasks -- [] **Task 1 : Organiser le dossier images** (AC: 1) - - [] Créer `assets/img/projects/` - - [] Définir la convention de nommage : `{slug}-{type}.{ext}` - - [] Exemple : `ecommerce-xyz-thumb.webp`, `ecommerce-xyz-screen-1.webp` +- [x] **Task 1 : Organiser le dossier images** (AC: 1) + - [x] Créer `assets/img/projects/` + - [x] Définir la convention de nommage : `{slug}-{type}.{ext}` + - [x] Exemple : `ecommerce-xyz-thumb.webp`, `ecommerce-xyz-screen-1.webp` -- [] **Task 2 : Implémenter le lazy loading** (AC: 2) - - [] Ajouter `loading="lazy"` sur toutes les images projets - - [] Image principale above-the-fold sans lazy loading (false) +- [x] **Task 2 : Implémenter le lazy loading** (AC: 2) + - [x] Ajouter `loading="lazy"` sur toutes les images projets + - [x] Image principale above-the-fold sans lazy loading (false) -- [] **Task 3 : Ajouter les dimensions explicites** (AC: 3) - - [] Définir les tailles standards : thumbnail (400x225), screenshot (800x450), hero (1200x675) - - [] Ajouter `width` et `height` sur toutes les `` +- [x] **Task 3 : Ajouter les dimensions explicites** (AC: 3) + - [x] Définir les tailles standards : thumbnail (400x225), screenshot (800x450), hero (1200x675) + - [x] Ajouter `width` et `height` sur toutes les `` -- [] **Task 4 : Implémenter WebP avec fallback** (AC: 4) - - [] Utiliser `` avec `` - - [] Fallback vers JPG +- [x] **Task 4 : Implémenter WebP avec fallback** (AC: 4) + - [x] Utiliser `` avec `` + - [x] Fallback vers JPG -- [] **Task 5 : Documenter les tailles recommandées** (AC: 5) - - [] Thumbnails : 400x225, qualité 80% - - [] Screenshots : 800x450, qualité 85% - - [] Hero : 1200x675, qualité 85% - - [] Documentation dans Dev Notes +- [x] **Task 5 : Documenter les tailles recommandées** (AC: 5) + - [x] Thumbnails : 400x225, qualité 80% + - [x] Screenshots : 800x450, qualité 85% + - [x] Hero : 1200x675, qualité 85% + - [x] Documentation dans Dev Notes - [ ] **Task 6 : Tester les performances** (AC: 6) - [ ] Audit Lighthouse sur la page projets (requiert images réelles) @@ -168,7 +168,7 @@ done ## Dev Agent Record ### Agent Model Used -Claude Opus 4.5 (claude-opus-4-5-20251101) +GPT-5 Codex ### File List | File | Action | Description | @@ -176,6 +176,8 @@ Claude Opus 4.5 (claude-opus-4-5-20251101) | `includes/functions.php` | Modified | Ajout fonction projectImage() | | `templates/project-card.php` | Modified | Utilise projectImage() | | `pages/project-single.php` | Modified | Utilise projectImage() pour hero et galerie | +| `tests/images.test.php` | Created | Tests helper image | +| `tests/run.ps1` | Modified | Ajout tests image | ### Completion Notes - Fonction `projectImage()` créée avec support `` WebP + fallback JPG @@ -183,14 +185,15 @@ Claude Opus 4.5 (claude-opus-4-5-20251101) - Lazy loading activé par défaut, désactivé pour images above-the-fold - Fallback onerror vers default-project.svg - Templates mis à jour: project-card.php, project-single.php -- Task 6 (Lighthouse) non testable sans images réelles +- Tests: `powershell -ExecutionPolicy Bypass -File tests/run.ps1` +- Task 6 (Lighthouse) à faire quand images réelles dispo ### Debug Log References -Aucun problème rencontré. +Aucun problème bloquant. ## Change Log | Date | Version | Description | Author | |------|---------|-------------|--------| | 2026-01-22 | 0.1 | Création initiale | Sarah (PO) | -| 2026-01-23 | 1.0 | Implémentation complète | James (Dev) | +| 2026-02-04 | 1.0 | Implémentation partielle (sans Lighthouse) | Amelia | diff --git a/includes/functions.php b/includes/functions.php index 0f75bfd..28c71b4 100644 --- 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 << + + {$altEsc} + +HTML; } \ No newline at end of file diff --git a/pages/project-single.php b/pages/project-single.php index 8aa7c11..6e682d6 100644 --- a/pages/project-single.php +++ b/pages/project-single.php @@ -71,13 +71,13 @@ include_template('navbar', compact('currentPage'));
- <?= htmlspecialchars($project['title'], ENT_QUOTES, 'UTF-8') ?> +
@@ -115,13 +115,13 @@ include_template('navbar', compact('currentPage'));

Captures d'écran

- Capture d'écran - <?= htmlspecialchars($project['title'], ENT_QUOTES, 'UTF-8') ?> +
diff --git a/templates/project-card.php b/templates/project-card.php index e343c2d..3b7475e 100644 --- a/templates/project-card.php +++ b/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;