From 62144384ce2323700125d9287936f530e1457a6d Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 23 Mar 2026 22:08:04 +0100
Subject: [PATCH] optimize image blocks with responsive srcset and webp
 conversion

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 site/config/config.php         |  1 +
 site/config/thumbs.php         | 44 ++++++++++++++++++++++++++++++++++
 site/snippets/blocks/image.php |  6 ++---
 3 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 site/config/thumbs.php

diff --git a/site/config/config.php b/site/config/config.php
index f682a75..4e9a0da 100644
--- a/site/config/config.php
+++ b/site/config/config.php
@@ -28,4 +28,5 @@ return [
   ],
 
   'moinframe.loop.language' => 'fr',
+  'thumbs' => require __DIR__ . '/thumbs.php',
 ];
diff --git a/site/config/thumbs.php b/site/config/thumbs.php
new file mode 100644
index 0000000..8b80f08
--- /dev/null
+++ b/site/config/thumbs.php
@@ -0,0 +1,44 @@
+<?php
+
+/**
+ * Génère un preset srcset Kirby à partir d'un tableau [label => largeur_px].
+ * Applique le multiplicateur et optionnellement un format (ex: 'webp').
+ */
+function srcsetPreset(array $widths, float $mult, ?string $format = null): array
+{
+    $preset = [];
+    foreach ($widths as $label => $px) {
+        $entry = ['width' => (int) round($px * $mult)];
+        if ($format !== null) {
+            $entry['format'] = $format;
+        }
+        $preset[$label] = $entry;
+    }
+    return $preset;
+}
+
+/**
+ * Génère une paire de presets (original + webp) depuis un tableau de widths.
+ */
+function srcsetPair(string $name, array $widths, float $mult): array
+{
+    return [
+        $name          => srcsetPreset($widths, $mult),
+        $name . '-webp' => srcsetPreset($widths, $mult, 'webp'),
+    ];
+}
+
+// Pas de multiplicateur supplémentaire : les tailles retina sont déjà dans les widths
+$m = 1;
+
+// Bloc image — desktop max 720px, retina x2 = 1440px, mobile 95vw
+$widths = [
+    'block-image' => ['360w' => 360, '720w' => 720, '1080w' => 1080, '1440w' => 1440],
+];
+
+return [
+    'quality' => 80,
+    'srcsets' => array_merge(
+        srcsetPair('block-image', $widths['block-image'], $m),
+    ),
+];
diff --git a/site/snippets/blocks/image.php b/site/snippets/blocks/image.php
index 2099224..9c8f225 100644
--- a/site/snippets/blocks/image.php
+++ b/site/snippets/blocks/image.php
@@ -14,7 +14,7 @@ if ($block->location() == 'web') {
 } elseif ($image = $block->image()->toFile()) {
     $alt = $alt->or($image->alt());
     $src = $image->url();
-    $srcset = $image->srcset([300, 600, 900, 1200, 1800]);
+    $srcset = $image->srcset('block-image-webp');
 }
 
 ?>
@@ -22,10 +22,10 @@ if ($block->location() == 'web') {
 <figure<?= Html::attr(['data-ratio' => $ratio, 'data-crop' => $crop], null, ' ') ?>>
   <?php if ($link->isNotEmpty()): ?>
   <a href="<?= Str::esc($link->toUrl()) ?>">
-    <img src="<?= $src ?>" alt="<?= $alt->esc() ?>"<?php if ($srcset): ?> srcset="<?= $srcset ?>" sizes="min(60vw, 45rem)"<?php endif ?> loading="lazy">
+    <img src="<?= $src ?>" alt="<?= $alt->esc() ?>"<?php if ($srcset): ?> srcset="<?= $srcset ?>" sizes="(min-width: 768px) 720px, 95vw"<?php endif ?> loading="lazy">
   </a>
   <?php else: ?>
-  <img src="<?= $src ?>" alt="<?= $alt->esc() ?>"<?php if ($srcset): ?> srcset="<?= $srcset ?>" sizes="min(60vw, 45rem)"<?php endif ?> loading="lazy">
+  <img src="<?= $src ?>" alt="<?= $alt->esc() ?>"<?php if ($srcset): ?> srcset="<?= $srcset ?>" sizes="(min-width: 768px) 720px, 95vw"<?php endif ?> loading="lazy">
   <?php endif ?>
 
   <?php if ($caption->isNotEmpty()): ?>