Generate and include images in webp format

david/2023/01/06/index.html

 <figure>
     <a href="#2023-01-06-toile-gouttes"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-06-toile-gouttes.jpg" alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies"
-             loading="lazy" width="3024" height="4032" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.webp 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-gouttes.jpg"
+                width="3024" height="4032"
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.jpg 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-06-toile-gouttes">
-        <img src="/static/david/2023/2023-01-06-toile-gouttes.jpg" alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies"
-             loading="lazy" width="3024" height="4032" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.webp 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-gouttes.jpg"
+                width="3024" height="4032"
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.jpg 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies">
+        </picture>
     </a>
     <figcaption>Parc Louis-Hébert, Montréal, 2 novembre&nbsp;2022.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-06-toile-soleil"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-06-toile-soleil.jpg" alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile"
-             loading="lazy" width="4032" height="3024" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-soleil.webp 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-soleil.jpg"
+                width="4032" height="3024"
+                srcset="/static/david/2023/2023-01-06-toile-soleil.jpg 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-06-toile-soleil">
-        <img src="/static/david/2023/2023-01-06-toile-soleil.jpg" alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile"
-             loading="lazy" width="4032" height="3024" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-soleil.webp 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-soleil.jpg"
+                width="4032" height="3024"
+                srcset="/static/david/2023/2023-01-06-toile-soleil.jpg 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile">
+        </picture>
     </a>
     <figcaption>Une toile de soleil&nbsp;!</figcaption>
 </figure>

david/2023/01/17/index.html

 <figure>
     <a href="#2023-01-13-ski-visitation1"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation1.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation1.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation1">
-        <img src="/static/david/2023/2023-01-13-ski-visitation1.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation1.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-13-ski-visitation2"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation2.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="1536" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation2.jpg"
+                width="2048" height="1536"
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation2">
-        <img src="/static/david/2023/2023-01-13-ski-visitation2.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="1536" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation2.jpg"
+                width="2048" height="1536"
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-13-ski-visitation3"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation3.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation3.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation3">
-        <img src="/static/david/2023/2023-01-13-ski-visitation3.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation3.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-13-ski-visitation4"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation4.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation4.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation4">
-        <img src="/static/david/2023/2023-01-13-ski-visitation4.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation4.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>

david/2023/01/21/index.html

 <figure>
     <a href="#2023-01-21-selfie-traineau"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-21-selfie-traineau.jpg" alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond."
-             loading="lazy" width="2048" height="2726" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-selfie-traineau.jpg"
+                width="2048" height="2726"
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-21-selfie-traineau">
-        <img src="/static/david/2023/2023-01-21-selfie-traineau.jpg" alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond."
-             loading="lazy" width="2048" height="2726" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-selfie-traineau.jpg"
+                width="2048" height="2726"
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond.">
+        </picture>
     </a>
     <figcaption>Il est très rare que je fasse des égoportraits mais là j’aimais bien voir le téléphone dans les&nbsp;lunettes.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-21-feu-foyer"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-21-feu-foyer.jpg" alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-21-feu-foyer.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-feu-foyer.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-21-feu-foyer.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-21-feu-foyer">
-        <img src="/static/david/2023/2023-01-21-feu-foyer.jpg" alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-21-feu-foyer.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-feu-foyer.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-21-feu-foyer.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige.">
+        </picture>
     </a>
     <figcaption>J’essaye habituellement de faire des petits feux économes et efficaces, j’ai un peu forcé pour la&nbsp;photo…</figcaption>
 </figure>

david/2023/01/22/index.html

 <figure>
     <a href="#2023-01-22-ski-retour"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-22-ski-retour.jpg" alt="Un ski dans les traces de la veille, sur le chemin du retour."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-22-ski-retour.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-22-ski-retour.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-22-ski-retour.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un ski dans les traces de la veille, sur le chemin du retour.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-22-ski-retour">
-        <img src="/static/david/2023/2023-01-22-ski-retour.jpg" alt="Un ski dans les traces de la veille, sur le chemin du retour."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-22-ski-retour.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-22-ski-retour.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-22-ski-retour.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un ski dans les traces de la veille, sur le chemin du retour.">
+        </picture>
     </a>
     <figcaption>Le retour dans ses traces demande tellement moins d’énergie&nbsp;!</figcaption>
 </figure>

david/2023/02/10/index.html

 <figure>
     <a href="#2023-02-10-camping-parking"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-10-camping-parking.jpg" alt="Un parking avec un bon 70 cm de neige vierge dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-10-camping-parking.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-10-camping-parking.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-10-camping-parking.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parking avec un bon 70 cm de neige vierge dessus.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-10-camping-parking">
-        <img src="/static/david/2023/2023-02-10-camping-parking.jpg" alt="Un parking avec un bon 70 cm de neige vierge dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-10-camping-parking.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-10-camping-parking.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-10-camping-parking.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parking avec un bon 70 cm de neige vierge dessus.">
+        </picture>
     </a>
     <figcaption>C’est bien la première fois que je vais camper sur un parking&nbsp;!</figcaption>
 </figure>

david/2023/02/11/index.html

 <figure>
     <a href="#2023-02-11-accueil-poisson-blanc"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg" alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-accueil-poisson-blanc">
-        <img src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg" alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc.">
+        </picture>
     </a>
     <figcaption>Les couleurs sont magnifiques et je regrette déjà de ne pas avoir pris un appareil&nbsp;photo.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-depart-traineaux"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-depart-traineaux.jpg" alt="Des personnes sur le lac gelé qui tirent chacune un traineau"
-             loading="lazy" width="2016" height="1512" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-depart-traineaux.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes sur le lac gelé qui tirent chacune un traineau">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-depart-traineaux">
-        <img src="/static/david/2023/2023-02-11-depart-traineaux.jpg" alt="Des personnes sur le lac gelé qui tirent chacune un traineau"
-             loading="lazy" width="2016" height="1512" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-depart-traineaux.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes sur le lac gelé qui tirent chacune un traineau">
+        </picture>
     </a>
     <figcaption>Le vent a bien soufflé cette nuit, on alterne glace et&nbsp;neige.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-traineau-solo"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-traineau-solo.jpg" alt="Une longue trainée de personnes tirant des traineaux sur le lac"
-             loading="lazy" width="2016" height="1512" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-solo.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-solo.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-traineau-solo.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une longue trainée de personnes tirant des traineaux sur le lac">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-traineau-solo">
-        <img src="/static/david/2023/2023-02-11-traineau-solo.jpg" alt="Une longue trainée de personnes tirant des traineaux sur le lac"
-             loading="lazy" width="2016" height="1512" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-solo.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-solo.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-traineau-solo.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une longue trainée de personnes tirant des traineaux sur le lac">
+        </picture>
     </a>
     <figcaption>Un peu à l’écart de la foule, on ne se refait&nbsp;pas.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-traineau-apres-midi"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg" alt="Des personnes devant moi avec des traineaux, on voit mon ombre."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes devant moi avec des traineaux, on voit mon ombre.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-traineau-apres-midi">
-        <img src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg" alt="Des personnes devant moi avec des traineaux, on voit mon ombre."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes devant moi avec des traineaux, on voit mon ombre.">
+        </picture>
     </a>
     <figcaption>Pour ma part, c’est neige fraîche, quitte à forcer un peu plus je préfère soigner mon silence&nbsp;relatif.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-coucher-soleil"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-coucher-soleil.jpg" alt="Le soleil se couche derrière des blocs de glace."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-coucher-soleil.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le soleil se couche derrière des blocs de glace.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-coucher-soleil">
-        <img src="/static/david/2023/2023-02-11-coucher-soleil.jpg" alt="Le soleil se couche derrière des blocs de glace."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-coucher-soleil.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le soleil se couche derrière des blocs de glace.">
+        </picture>
     </a>
     <figcaption>Je vous épargne les différents dégradés de rose qui ont suivi&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-astro-photographie"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-astro-photographie.jpg" alt="Une tente rouge et Orion au-dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-astro-photographie.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-astro-photographie.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-astro-photographie.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une tente rouge et Orion au-dessus.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-astro-photographie">
-        <img src="/static/david/2023/2023-02-11-astro-photographie.jpg" alt="Une tente rouge et Orion au-dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-astro-photographie.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-astro-photographie.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-astro-photographie.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une tente rouge et Orion au-dessus.">
+        </picture>
     </a>
     <figcaption>C’est bruité et tout mais j’étais content que l’on distingue au moins&nbsp;Orion.</figcaption>
 </figure>

david/2023/02/12/index.html

 <figure>
     <a href="#2023-02-12-depart-campement"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-12-depart-campement.jpg" alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-12-depart-campement.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-depart-campement.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-depart-campement.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-12-depart-campement">
-        <img src="/static/david/2023/2023-02-12-depart-campement.jpg" alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-12-depart-campement.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-depart-campement.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-depart-campement.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé.">
+        </picture>
     </a>
     <figcaption>Avec la gang de&nbsp;tête.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-12-traces-canides"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-12-traces-canides.jpg" alt="De belles traces de canidés dans la neige sur la glace du lac."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-12-traces-canides.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-traces-canides.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-traces-canides.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="De belles traces de canidés dans la neige sur la glace du lac.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-12-traces-canides">
-        <img src="/static/david/2023/2023-02-12-traces-canides.jpg" alt="De belles traces de canidés dans la neige sur la glace du lac."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-12-traces-canides.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-traces-canides.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-traces-canides.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="De belles traces de canidés dans la neige sur la glace du lac.">
+        </picture>
     </a>
     <figcaption>Pas si seul·es au monde&nbsp;:-)</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-12-file-arrivee"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-12-file-arrivee.jpg" alt="File des arrivées progressives sur le site."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-12-file-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-file-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-file-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="File des arrivées progressives sur le site.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-12-file-arrivee">
-        <img src="/static/david/2023/2023-02-12-file-arrivee.jpg" alt="File des arrivées progressives sur le site."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-12-file-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-file-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-file-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="File des arrivées progressives sur le site.">
+        </picture>
     </a>
     <figcaption>Pour donner une idée du&nbsp;cheminement.</figcaption>
 </figure>

david/2023/03/02/index.html

 <figure>
     <a href="#2023-03-02-traineau-arrivee"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-02-traineau-arrivee.jpg" alt="Le traîneau à l’arrivée avec pas mal de neige chargée."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-traineau-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau à l’arrivée avec pas mal de neige chargée.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-02-traineau-arrivee">
-        <img src="/static/david/2023/2023-03-02-traineau-arrivee.jpg" alt="Le traîneau à l’arrivée avec pas mal de neige chargée."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-traineau-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau à l’arrivée avec pas mal de neige chargée.">
+        </picture>
     </a>
     <figcaption>Ce que ça donne à l’arrivée, transporter de la neige n’a pas grand intérêt, il y en aura à&nbsp;l’arrivée.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-02-feu-levitation"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-02-feu-levitation.jpg" alt="Un feu dans un foyer surélevé."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-02-feu-levitation.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-feu-levitation.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-feu-levitation.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un foyer surélevé.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-02-feu-levitation">
-        <img src="/static/david/2023/2023-03-02-feu-levitation.jpg" alt="Un feu dans un foyer surélevé."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-02-feu-levitation.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-feu-levitation.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-feu-levitation.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un foyer surélevé.">
+        </picture>
     </a>
     <figcaption>C’est parti pour quelques heures à entretenir un&nbsp;feu.</figcaption>
 </figure>

david/2023/03/03/index.html

 <figure>
     <a href="#2023-03-03-feu-soleil"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-feu-soleil.jpg" alt="Le campement avec le soleil en arrière plan."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-feu-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-feu-soleil.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-feu-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le campement avec le soleil en arrière plan.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-feu-soleil">
-        <img src="/static/david/2023/2023-03-03-feu-soleil.jpg" alt="Le campement avec le soleil en arrière plan."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-feu-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-feu-soleil.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-feu-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le campement avec le soleil en arrière plan.">
+        </picture>
     </a>
     <figcaption>Ô soleil, merci de ta chaleur&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-riviere-ouareau"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-riviere-ouareau.jpg" alt="La rivière Ouareau bien gelée."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-riviere-ouareau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière Ouareau bien gelée.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-riviere-ouareau">
-        <img src="/static/david/2023/2023-03-03-riviere-ouareau.jpg" alt="La rivière Ouareau bien gelée."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-riviere-ouareau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière Ouareau bien gelée.">
+        </picture>
     </a>
     <figcaption>Les méandres de la rivière&nbsp;gelée.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-sentier-murmures"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-sentier-murmures.jpg" alt="Le sentier des murmures."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-sentier-murmures.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le sentier des murmures.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-sentier-murmures">
-        <img src="/static/david/2023/2023-03-03-sentier-murmures.jpg" alt="Le sentier des murmures."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-sentier-murmures.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le sentier des murmures.">
+        </picture>
     </a>
     <figcaption>Une portion du sentier qui est intégralement à couvert de&nbsp;forêt.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-couleurs-soir"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-couleurs-soir.jpg" alt="La rivière le soir."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-couleurs-soir.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière le soir.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-couleurs-soir">
-        <img src="/static/david/2023/2023-03-03-couleurs-soir.jpg" alt="La rivière le soir."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-couleurs-soir.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière le soir.">
+        </picture>
     </a>
     <figcaption>Difficile de restituer la sensation de calme qu’il y avait alors, seulement troublée sporadiquement par un&nbsp;pic.</figcaption>
 </figure>

david/2023/03/04/index.html

 <figure>
     <a href="#2023-03-04-tempete-neige"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-04-tempete-neige.jpg" alt="La rivière sous la tempête."
-             loading="lazy" width="1920" height="1280" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-04-tempete-neige.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-tempete-neige.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-tempete-neige.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière sous la tempête.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-04-tempete-neige">
-        <img src="/static/david/2023/2023-03-04-tempete-neige.jpg" alt="La rivière sous la tempête."
-             loading="lazy" width="1920" height="1280" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-04-tempete-neige.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-tempete-neige.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-tempete-neige.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière sous la tempête.">
+        </picture>
     </a>
     <figcaption>Il neigeait dru&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-04-traces"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-04-traces.jpg" alt="Des traces dans la neige."
-             loading="lazy" width="1920" height="1280" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-04-traces.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traces.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-traces.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces dans la neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-04-traces">
-        <img src="/static/david/2023/2023-03-04-traces.jpg" alt="Des traces dans la neige."
-             loading="lazy" width="1920" height="1280" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-04-traces.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traces.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-traces.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces dans la neige.">
+        </picture>
     </a>
     <figcaption>À une prochaine, l’animal.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-04-traineau"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-04-traineau.jpg" alt="Le traîneau sur le chemin du retour."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-04-traineau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traineau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-04-traineau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau sur le chemin du retour.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-04-traineau">
-        <img src="/static/david/2023/2023-03-04-traineau.jpg" alt="Le traîneau sur le chemin du retour."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-04-traineau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traineau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-04-traineau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau sur le chemin du retour.">
+        </picture>
     </a>
     <figcaption>Le secret, c’est de faire des pauses, vraiment beaucoup de pauses&nbsp;!</figcaption>
 </figure>

david/2023/aventure/index.html

 <figure>
     <a href="#2023-03-04-tempete-neige"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-04-tempete-neige.jpg" alt="La rivière sous la tempête."
-             loading="lazy" width="1920" height="1280" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-04-tempete-neige.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-tempete-neige.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-tempete-neige.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière sous la tempête.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-04-tempete-neige">
-        <img src="/static/david/2023/2023-03-04-tempete-neige.jpg" alt="La rivière sous la tempête."
-             loading="lazy" width="1920" height="1280" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-04-tempete-neige.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-tempete-neige.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-tempete-neige.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière sous la tempête.">
+        </picture>
     </a>
     <figcaption>Il neigeait dru&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-04-traces"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-04-traces.jpg" alt="Des traces dans la neige."
-             loading="lazy" width="1920" height="1280" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-04-traces.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traces.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-traces.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces dans la neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-04-traces">
-        <img src="/static/david/2023/2023-03-04-traces.jpg" alt="Des traces dans la neige."
-             loading="lazy" width="1920" height="1280" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-04-traces.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traces.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-traces.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces dans la neige.">
+        </picture>
     </a>
     <figcaption>À une prochaine, l’animal.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-04-traineau"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-04-traineau.jpg" alt="Le traîneau sur le chemin du retour."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-04-traineau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traineau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-04-traineau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau sur le chemin du retour.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-04-traineau">
-        <img src="/static/david/2023/2023-03-04-traineau.jpg" alt="Le traîneau sur le chemin du retour."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-04-traineau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traineau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-04-traineau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau sur le chemin du retour.">
+        </picture>
     </a>
     <figcaption>Le secret, c’est de faire des pauses, vraiment beaucoup de pauses&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-feu-soleil"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-feu-soleil.jpg" alt="Le campement avec le soleil en arrière plan."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-feu-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-feu-soleil.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-feu-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le campement avec le soleil en arrière plan.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-feu-soleil">
-        <img src="/static/david/2023/2023-03-03-feu-soleil.jpg" alt="Le campement avec le soleil en arrière plan."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-feu-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-feu-soleil.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-feu-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le campement avec le soleil en arrière plan.">
+        </picture>
     </a>
     <figcaption>Ô soleil, merci de ta chaleur&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-riviere-ouareau"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-riviere-ouareau.jpg" alt="La rivière Ouareau bien gelée."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-riviere-ouareau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière Ouareau bien gelée.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-riviere-ouareau">
-        <img src="/static/david/2023/2023-03-03-riviere-ouareau.jpg" alt="La rivière Ouareau bien gelée."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-riviere-ouareau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière Ouareau bien gelée.">
+        </picture>
     </a>
     <figcaption>Les méandres de la rivière&nbsp;gelée.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-sentier-murmures"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-sentier-murmures.jpg" alt="Le sentier des murmures."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-sentier-murmures.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le sentier des murmures.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-sentier-murmures">
-        <img src="/static/david/2023/2023-03-03-sentier-murmures.jpg" alt="Le sentier des murmures."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-sentier-murmures.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le sentier des murmures.">
+        </picture>
     </a>
     <figcaption>Une portion du sentier qui est intégralement à couvert de&nbsp;forêt.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-couleurs-soir"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-couleurs-soir.jpg" alt="La rivière le soir."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-couleurs-soir.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière le soir.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-couleurs-soir">
-        <img src="/static/david/2023/2023-03-03-couleurs-soir.jpg" alt="La rivière le soir."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-couleurs-soir.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière le soir.">
+        </picture>
     </a>
     <figcaption>Difficile de restituer la sensation de calme qu’il y avait alors, seulement troublée sporadiquement par un&nbsp;pic.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-12-depart-campement"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-12-depart-campement.jpg" alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-12-depart-campement.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-depart-campement.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-depart-campement.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-12-depart-campement">
-        <img src="/static/david/2023/2023-02-12-depart-campement.jpg" alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-12-depart-campement.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-depart-campement.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-depart-campement.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé.">
+        </picture>
     </a>
     <figcaption>Avec la gang de&nbsp;tête.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-12-traces-canides"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-12-traces-canides.jpg" alt="De belles traces de canidés dans la neige sur la glace du lac."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-12-traces-canides.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-traces-canides.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-traces-canides.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="De belles traces de canidés dans la neige sur la glace du lac.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-12-traces-canides">
-        <img src="/static/david/2023/2023-02-12-traces-canides.jpg" alt="De belles traces de canidés dans la neige sur la glace du lac."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-12-traces-canides.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-traces-canides.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-traces-canides.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="De belles traces de canidés dans la neige sur la glace du lac.">
+        </picture>
     </a>
     <figcaption>Pas si seul·es au monde&nbsp;:-)</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-12-file-arrivee"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-12-file-arrivee.jpg" alt="File des arrivées progressives sur le site."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-12-file-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-file-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-file-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="File des arrivées progressives sur le site.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-12-file-arrivee">
-        <img src="/static/david/2023/2023-02-12-file-arrivee.jpg" alt="File des arrivées progressives sur le site."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-12-file-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-file-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-file-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="File des arrivées progressives sur le site.">
+        </picture>
     </a>
     <figcaption>Pour donner une idée du&nbsp;cheminement.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-accueil-poisson-blanc"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg" alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-accueil-poisson-blanc">
-        <img src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg" alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc.">
+        </picture>
     </a>
     <figcaption>Les couleurs sont magnifiques et je regrette déjà de ne pas avoir pris un appareil&nbsp;photo.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-depart-traineaux"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-depart-traineaux.jpg" alt="Des personnes sur le lac gelé qui tirent chacune un traineau"
-             loading="lazy" width="2016" height="1512" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-depart-traineaux.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes sur le lac gelé qui tirent chacune un traineau">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-depart-traineaux">
-        <img src="/static/david/2023/2023-02-11-depart-traineaux.jpg" alt="Des personnes sur le lac gelé qui tirent chacune un traineau"
-             loading="lazy" width="2016" height="1512" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-depart-traineaux.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes sur le lac gelé qui tirent chacune un traineau">
+        </picture>
     </a>
     <figcaption>Le vent a bien soufflé cette nuit, on alterne glace et&nbsp;neige.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-traineau-solo"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-traineau-solo.jpg" alt="Une longue trainée de personnes tirant des traineaux sur le lac"
-             loading="lazy" width="2016" height="1512" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-solo.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-solo.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-traineau-solo.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une longue trainée de personnes tirant des traineaux sur le lac">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-traineau-solo">
-        <img src="/static/david/2023/2023-02-11-traineau-solo.jpg" alt="Une longue trainée de personnes tirant des traineaux sur le lac"
-             loading="lazy" width="2016" height="1512" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-solo.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-solo.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-traineau-solo.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une longue trainée de personnes tirant des traineaux sur le lac">
+        </picture>
     </a>
     <figcaption>Un peu à l’écart de la foule, on ne se refait&nbsp;pas.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-traineau-apres-midi"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg" alt="Des personnes devant moi avec des traineaux, on voit mon ombre."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes devant moi avec des traineaux, on voit mon ombre.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-traineau-apres-midi">
-        <img src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg" alt="Des personnes devant moi avec des traineaux, on voit mon ombre."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes devant moi avec des traineaux, on voit mon ombre.">
+        </picture>
     </a>
     <figcaption>Pour ma part, c’est neige fraîche, quitte à forcer un peu plus je préfère soigner mon silence&nbsp;relatif.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-coucher-soleil"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-coucher-soleil.jpg" alt="Le soleil se couche derrière des blocs de glace."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-coucher-soleil.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le soleil se couche derrière des blocs de glace.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-coucher-soleil">
-        <img src="/static/david/2023/2023-02-11-coucher-soleil.jpg" alt="Le soleil se couche derrière des blocs de glace."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-coucher-soleil.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le soleil se couche derrière des blocs de glace.">
+        </picture>
     </a>
     <figcaption>Je vous épargne les différents dégradés de rose qui ont suivi&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-astro-photographie"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-astro-photographie.jpg" alt="Une tente rouge et Orion au-dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-astro-photographie.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-astro-photographie.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-astro-photographie.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une tente rouge et Orion au-dessus.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-astro-photographie">
-        <img src="/static/david/2023/2023-02-11-astro-photographie.jpg" alt="Une tente rouge et Orion au-dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-astro-photographie.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-astro-photographie.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-astro-photographie.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une tente rouge et Orion au-dessus.">
+        </picture>
     </a>
     <figcaption>C’est bruité et tout mais j’étais content que l’on distingue au moins&nbsp;Orion.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-10-camping-parking"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-10-camping-parking.jpg" alt="Un parking avec un bon 70 cm de neige vierge dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-10-camping-parking.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-10-camping-parking.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-10-camping-parking.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parking avec un bon 70 cm de neige vierge dessus.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-10-camping-parking">
-        <img src="/static/david/2023/2023-02-10-camping-parking.jpg" alt="Un parking avec un bon 70 cm de neige vierge dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-10-camping-parking.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-10-camping-parking.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-10-camping-parking.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parking avec un bon 70 cm de neige vierge dessus.">
+        </picture>
     </a>
     <figcaption>C’est bien la première fois que je vais camper sur un parking&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-22-ski-retour"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-22-ski-retour.jpg" alt="Un ski dans les traces de la veille, sur le chemin du retour."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-22-ski-retour.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-22-ski-retour.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-22-ski-retour.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un ski dans les traces de la veille, sur le chemin du retour.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-22-ski-retour">
-        <img src="/static/david/2023/2023-01-22-ski-retour.jpg" alt="Un ski dans les traces de la veille, sur le chemin du retour."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-22-ski-retour.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-22-ski-retour.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-22-ski-retour.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un ski dans les traces de la veille, sur le chemin du retour.">
+        </picture>
     </a>
     <figcaption>Le retour dans ses traces demande tellement moins d’énergie&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-21-selfie-traineau"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-21-selfie-traineau.jpg" alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond."
-             loading="lazy" width="2048" height="2726" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-selfie-traineau.jpg"
+                width="2048" height="2726"
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-21-selfie-traineau">
-        <img src="/static/david/2023/2023-01-21-selfie-traineau.jpg" alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond."
-             loading="lazy" width="2048" height="2726" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-selfie-traineau.jpg"
+                width="2048" height="2726"
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond.">
+        </picture>
     </a>
     <figcaption>Il est très rare que je fasse des égoportraits mais là j’aimais bien voir le téléphone dans les&nbsp;lunettes.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-21-feu-foyer"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-21-feu-foyer.jpg" alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-21-feu-foyer.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-feu-foyer.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-21-feu-foyer.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-21-feu-foyer">
-        <img src="/static/david/2023/2023-01-21-feu-foyer.jpg" alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-21-feu-foyer.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-feu-foyer.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-21-feu-foyer.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige.">
+        </picture>
     </a>
     <figcaption>J’essaye habituellement de faire des petits feux économes et efficaces, j’ai un peu forcé pour la&nbsp;photo…</figcaption>
 </figure>

david/2023/confiance/index.html

 <figure>
     <a href="#2023-03-02-traineau-arrivee"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-02-traineau-arrivee.jpg" alt="Le traîneau à l’arrivée avec pas mal de neige chargée."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-traineau-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau à l’arrivée avec pas mal de neige chargée.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-02-traineau-arrivee">
-        <img src="/static/david/2023/2023-03-02-traineau-arrivee.jpg" alt="Le traîneau à l’arrivée avec pas mal de neige chargée."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-traineau-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau à l’arrivée avec pas mal de neige chargée.">
+        </picture>
     </a>
     <figcaption>Ce que ça donne à l’arrivée, transporter de la neige n’a pas grand intérêt, il y en aura à&nbsp;l’arrivée.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-02-feu-levitation"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-02-feu-levitation.jpg" alt="Un feu dans un foyer surélevé."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-02-feu-levitation.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-feu-levitation.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-feu-levitation.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un foyer surélevé.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-02-feu-levitation">
-        <img src="/static/david/2023/2023-03-02-feu-levitation.jpg" alt="Un feu dans un foyer surélevé."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-02-feu-levitation.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-feu-levitation.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-feu-levitation.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un foyer surélevé.">
+        </picture>
     </a>
     <figcaption>C’est parti pour quelques heures à entretenir un&nbsp;feu.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-22-ski-retour"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-22-ski-retour.jpg" alt="Un ski dans les traces de la veille, sur le chemin du retour."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-22-ski-retour.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-22-ski-retour.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-22-ski-retour.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un ski dans les traces de la veille, sur le chemin du retour.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-22-ski-retour">
-        <img src="/static/david/2023/2023-01-22-ski-retour.jpg" alt="Un ski dans les traces de la veille, sur le chemin du retour."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-22-ski-retour.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-22-ski-retour.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-22-ski-retour.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un ski dans les traces de la veille, sur le chemin du retour.">
+        </picture>
     </a>
     <figcaption>Le retour dans ses traces demande tellement moins d’énergie&nbsp;!</figcaption>
 </figure>

david/2023/eau/index.html

 <figure>
     <a href="#2023-03-02-traineau-arrivee"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-02-traineau-arrivee.jpg" alt="Le traîneau à l’arrivée avec pas mal de neige chargée."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-traineau-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau à l’arrivée avec pas mal de neige chargée.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-02-traineau-arrivee">
-        <img src="/static/david/2023/2023-03-02-traineau-arrivee.jpg" alt="Le traîneau à l’arrivée avec pas mal de neige chargée."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-traineau-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau à l’arrivée avec pas mal de neige chargée.">
+        </picture>
     </a>
     <figcaption>Ce que ça donne à l’arrivée, transporter de la neige n’a pas grand intérêt, il y en aura à&nbsp;l’arrivée.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-02-feu-levitation"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-02-feu-levitation.jpg" alt="Un feu dans un foyer surélevé."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-02-feu-levitation.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-feu-levitation.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-feu-levitation.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un foyer surélevé.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-02-feu-levitation">
-        <img src="/static/david/2023/2023-03-02-feu-levitation.jpg" alt="Un feu dans un foyer surélevé."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-02-feu-levitation.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-feu-levitation.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-feu-levitation.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un foyer surélevé.">
+        </picture>
     </a>
     <figcaption>C’est parti pour quelques heures à entretenir un&nbsp;feu.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-21-selfie-traineau"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-21-selfie-traineau.jpg" alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond."
-             loading="lazy" width="2048" height="2726" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-selfie-traineau.jpg"
+                width="2048" height="2726"
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-21-selfie-traineau">
-        <img src="/static/david/2023/2023-01-21-selfie-traineau.jpg" alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond."
-             loading="lazy" width="2048" height="2726" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-selfie-traineau.jpg"
+                width="2048" height="2726"
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond.">
+        </picture>
     </a>
     <figcaption>Il est très rare que je fasse des égoportraits mais là j’aimais bien voir le téléphone dans les&nbsp;lunettes.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-21-feu-foyer"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-21-feu-foyer.jpg" alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-21-feu-foyer.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-feu-foyer.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-21-feu-foyer.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-21-feu-foyer">
-        <img src="/static/david/2023/2023-01-21-feu-foyer.jpg" alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-21-feu-foyer.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-feu-foyer.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-21-feu-foyer.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige.">
+        </picture>
     </a>
     <figcaption>J’essaye habituellement de faire des petits feux économes et efficaces, j’ai un peu forcé pour la&nbsp;photo…</figcaption>
 </figure>

david/2023/foret/index.html

 <figure>
     <a href="#2023-03-04-tempete-neige"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-04-tempete-neige.jpg" alt="La rivière sous la tempête."
-             loading="lazy" width="1920" height="1280" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-04-tempete-neige.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-tempete-neige.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-tempete-neige.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière sous la tempête.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-04-tempete-neige">
-        <img src="/static/david/2023/2023-03-04-tempete-neige.jpg" alt="La rivière sous la tempête."
-             loading="lazy" width="1920" height="1280" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-04-tempete-neige.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-tempete-neige.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-tempete-neige.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière sous la tempête.">
+        </picture>
     </a>
     <figcaption>Il neigeait dru&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-04-traces"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-04-traces.jpg" alt="Des traces dans la neige."
-             loading="lazy" width="1920" height="1280" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-04-traces.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traces.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-traces.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces dans la neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-04-traces">
-        <img src="/static/david/2023/2023-03-04-traces.jpg" alt="Des traces dans la neige."
-             loading="lazy" width="1920" height="1280" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-04-traces.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traces.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-traces.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces dans la neige.">
+        </picture>
     </a>
     <figcaption>À une prochaine, l’animal.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-04-traineau"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-04-traineau.jpg" alt="Le traîneau sur le chemin du retour."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-04-traineau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traineau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-04-traineau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau sur le chemin du retour.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-04-traineau">
-        <img src="/static/david/2023/2023-03-04-traineau.jpg" alt="Le traîneau sur le chemin du retour."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-04-traineau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traineau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-04-traineau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau sur le chemin du retour.">
+        </picture>
     </a>
     <figcaption>Le secret, c’est de faire des pauses, vraiment beaucoup de pauses&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-feu-soleil"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-feu-soleil.jpg" alt="Le campement avec le soleil en arrière plan."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-feu-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-feu-soleil.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-feu-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le campement avec le soleil en arrière plan.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-feu-soleil">
-        <img src="/static/david/2023/2023-03-03-feu-soleil.jpg" alt="Le campement avec le soleil en arrière plan."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-feu-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-feu-soleil.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-feu-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le campement avec le soleil en arrière plan.">
+        </picture>
     </a>
     <figcaption>Ô soleil, merci de ta chaleur&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-riviere-ouareau"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-riviere-ouareau.jpg" alt="La rivière Ouareau bien gelée."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-riviere-ouareau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière Ouareau bien gelée.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-riviere-ouareau">
-        <img src="/static/david/2023/2023-03-03-riviere-ouareau.jpg" alt="La rivière Ouareau bien gelée."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-riviere-ouareau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière Ouareau bien gelée.">
+        </picture>
     </a>
     <figcaption>Les méandres de la rivière&nbsp;gelée.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-sentier-murmures"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-sentier-murmures.jpg" alt="Le sentier des murmures."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-sentier-murmures.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le sentier des murmures.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-sentier-murmures">
-        <img src="/static/david/2023/2023-03-03-sentier-murmures.jpg" alt="Le sentier des murmures."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-sentier-murmures.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le sentier des murmures.">
+        </picture>
     </a>
     <figcaption>Une portion du sentier qui est intégralement à couvert de&nbsp;forêt.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-couleurs-soir"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-couleurs-soir.jpg" alt="La rivière le soir."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-couleurs-soir.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière le soir.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-couleurs-soir">
-        <img src="/static/david/2023/2023-03-03-couleurs-soir.jpg" alt="La rivière le soir."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-couleurs-soir.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière le soir.">
+        </picture>
     </a>
     <figcaption>Difficile de restituer la sensation de calme qu’il y avait alors, seulement troublée sporadiquement par un&nbsp;pic.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-02-traineau-arrivee"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-02-traineau-arrivee.jpg" alt="Le traîneau à l’arrivée avec pas mal de neige chargée."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-traineau-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau à l’arrivée avec pas mal de neige chargée.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-02-traineau-arrivee">
-        <img src="/static/david/2023/2023-03-02-traineau-arrivee.jpg" alt="Le traîneau à l’arrivée avec pas mal de neige chargée."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-traineau-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-traineau-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau à l’arrivée avec pas mal de neige chargée.">
+        </picture>
     </a>
     <figcaption>Ce que ça donne à l’arrivée, transporter de la neige n’a pas grand intérêt, il y en aura à&nbsp;l’arrivée.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-02-feu-levitation"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-02-feu-levitation.jpg" alt="Un feu dans un foyer surélevé."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-02-feu-levitation.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-feu-levitation.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-feu-levitation.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un foyer surélevé.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-02-feu-levitation">
-        <img src="/static/david/2023/2023-03-02-feu-levitation.jpg" alt="Un feu dans un foyer surélevé."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-02-feu-levitation.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-02-feu-levitation.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-03-02-feu-levitation.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un foyer surélevé.">
+        </picture>
     </a>
     <figcaption>C’est parti pour quelques heures à entretenir un&nbsp;feu.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-12-depart-campement"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-12-depart-campement.jpg" alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-12-depart-campement.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-depart-campement.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-depart-campement.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-12-depart-campement">
-        <img src="/static/david/2023/2023-02-12-depart-campement.jpg" alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-12-depart-campement.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-depart-campement.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-depart-campement.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé.">
+        </picture>
     </a>
     <figcaption>Avec la gang de&nbsp;tête.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-12-traces-canides"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-12-traces-canides.jpg" alt="De belles traces de canidés dans la neige sur la glace du lac."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-12-traces-canides.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-traces-canides.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-traces-canides.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="De belles traces de canidés dans la neige sur la glace du lac.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-12-traces-canides">
-        <img src="/static/david/2023/2023-02-12-traces-canides.jpg" alt="De belles traces de canidés dans la neige sur la glace du lac."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-12-traces-canides.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-traces-canides.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-traces-canides.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="De belles traces de canidés dans la neige sur la glace du lac.">
+        </picture>
     </a>
     <figcaption>Pas si seul·es au monde&nbsp;:-)</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-12-file-arrivee"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-12-file-arrivee.jpg" alt="File des arrivées progressives sur le site."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-12-file-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-file-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-file-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="File des arrivées progressives sur le site.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-12-file-arrivee">
-        <img src="/static/david/2023/2023-02-12-file-arrivee.jpg" alt="File des arrivées progressives sur le site."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-12-file-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-file-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-file-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="File des arrivées progressives sur le site.">
+        </picture>
     </a>
     <figcaption>Pour donner une idée du&nbsp;cheminement.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-accueil-poisson-blanc"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg" alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-accueil-poisson-blanc">
-        <img src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg" alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc.">
+        </picture>
     </a>
     <figcaption>Les couleurs sont magnifiques et je regrette déjà de ne pas avoir pris un appareil&nbsp;photo.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-depart-traineaux"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-depart-traineaux.jpg" alt="Des personnes sur le lac gelé qui tirent chacune un traineau"
-             loading="lazy" width="2016" height="1512" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-depart-traineaux.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes sur le lac gelé qui tirent chacune un traineau">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-depart-traineaux">
-        <img src="/static/david/2023/2023-02-11-depart-traineaux.jpg" alt="Des personnes sur le lac gelé qui tirent chacune un traineau"
-             loading="lazy" width="2016" height="1512" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-depart-traineaux.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes sur le lac gelé qui tirent chacune un traineau">
+        </picture>
     </a>
     <figcaption>Le vent a bien soufflé cette nuit, on alterne glace et&nbsp;neige.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-traineau-solo"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-traineau-solo.jpg" alt="Une longue trainée de personnes tirant des traineaux sur le lac"
-             loading="lazy" width="2016" height="1512" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-solo.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-solo.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-traineau-solo.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une longue trainée de personnes tirant des traineaux sur le lac">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-traineau-solo">
-        <img src="/static/david/2023/2023-02-11-traineau-solo.jpg" alt="Une longue trainée de personnes tirant des traineaux sur le lac"
-             loading="lazy" width="2016" height="1512" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-solo.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-solo.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-traineau-solo.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une longue trainée de personnes tirant des traineaux sur le lac">
+        </picture>
     </a>
     <figcaption>Un peu à l’écart de la foule, on ne se refait&nbsp;pas.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-traineau-apres-midi"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg" alt="Des personnes devant moi avec des traineaux, on voit mon ombre."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes devant moi avec des traineaux, on voit mon ombre.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-traineau-apres-midi">
-        <img src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg" alt="Des personnes devant moi avec des traineaux, on voit mon ombre."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes devant moi avec des traineaux, on voit mon ombre.">
+        </picture>
     </a>
     <figcaption>Pour ma part, c’est neige fraîche, quitte à forcer un peu plus je préfère soigner mon silence&nbsp;relatif.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-coucher-soleil"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-coucher-soleil.jpg" alt="Le soleil se couche derrière des blocs de glace."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-coucher-soleil.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le soleil se couche derrière des blocs de glace.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-coucher-soleil">
-        <img src="/static/david/2023/2023-02-11-coucher-soleil.jpg" alt="Le soleil se couche derrière des blocs de glace."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-coucher-soleil.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le soleil se couche derrière des blocs de glace.">
+        </picture>
     </a>
     <figcaption>Je vous épargne les différents dégradés de rose qui ont suivi&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-astro-photographie"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-astro-photographie.jpg" alt="Une tente rouge et Orion au-dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-astro-photographie.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-astro-photographie.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-astro-photographie.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une tente rouge et Orion au-dessus.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-astro-photographie">
-        <img src="/static/david/2023/2023-02-11-astro-photographie.jpg" alt="Une tente rouge et Orion au-dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-astro-photographie.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-astro-photographie.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-astro-photographie.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une tente rouge et Orion au-dessus.">
+        </picture>
     </a>
     <figcaption>C’est bruité et tout mais j’étais content que l’on distingue au moins&nbsp;Orion.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-10-camping-parking"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-10-camping-parking.jpg" alt="Un parking avec un bon 70 cm de neige vierge dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-10-camping-parking.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-10-camping-parking.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-10-camping-parking.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parking avec un bon 70 cm de neige vierge dessus.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-10-camping-parking">
-        <img src="/static/david/2023/2023-02-10-camping-parking.jpg" alt="Un parking avec un bon 70 cm de neige vierge dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-10-camping-parking.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-10-camping-parking.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-10-camping-parking.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parking avec un bon 70 cm de neige vierge dessus.">
+        </picture>
     </a>
     <figcaption>C’est bien la première fois que je vais camper sur un parking&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-22-ski-retour"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-22-ski-retour.jpg" alt="Un ski dans les traces de la veille, sur le chemin du retour."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-22-ski-retour.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-22-ski-retour.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-22-ski-retour.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un ski dans les traces de la veille, sur le chemin du retour.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-22-ski-retour">
-        <img src="/static/david/2023/2023-01-22-ski-retour.jpg" alt="Un ski dans les traces de la veille, sur le chemin du retour."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-22-ski-retour.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-22-ski-retour.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-22-ski-retour.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un ski dans les traces de la veille, sur le chemin du retour.">
+        </picture>
     </a>
     <figcaption>Le retour dans ses traces demande tellement moins d’énergie&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-21-selfie-traineau"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-21-selfie-traineau.jpg" alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond."
-             loading="lazy" width="2048" height="2726" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-selfie-traineau.jpg"
+                width="2048" height="2726"
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-21-selfie-traineau">
-        <img src="/static/david/2023/2023-01-21-selfie-traineau.jpg" alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond."
-             loading="lazy" width="2048" height="2726" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-selfie-traineau.jpg"
+                width="2048" height="2726"
+                srcset="/static/david/2023/2023-01-21-selfie-traineau.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2726))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond.">
+        </picture>
     </a>
     <figcaption>Il est très rare que je fasse des égoportraits mais là j’aimais bien voir le téléphone dans les&nbsp;lunettes.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-21-feu-foyer"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-21-feu-foyer.jpg" alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-21-feu-foyer.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-feu-foyer.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-21-feu-foyer.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-21-feu-foyer">
-        <img src="/static/david/2023/2023-01-21-feu-foyer.jpg" alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-21-feu-foyer.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-21-feu-foyer.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-21-feu-foyer.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un feu dans un réceptacle permettant de le garder au-dessus de la neige.">
+        </picture>
     </a>
     <figcaption>J’essaye habituellement de faire des petits feux économes et efficaces, j’ai un peu forcé pour la&nbsp;photo…</figcaption>
 </figure>

david/2023/gratitude/index.html

 <figure>
     <a href="#2023-01-13-ski-visitation1"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation1.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation1.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation1">
-        <img src="/static/david/2023/2023-01-13-ski-visitation1.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation1.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-13-ski-visitation2"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation2.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="1536" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation2.jpg"
+                width="2048" height="1536"
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation2">
-        <img src="/static/david/2023/2023-01-13-ski-visitation2.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="1536" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation2.jpg"
+                width="2048" height="1536"
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-13-ski-visitation3"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation3.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation3.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation3">
-        <img src="/static/david/2023/2023-01-13-ski-visitation3.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation3.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-13-ski-visitation4"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation4.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation4.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation4">
-        <img src="/static/david/2023/2023-01-13-ski-visitation4.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation4.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-06-toile-gouttes"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-06-toile-gouttes.jpg" alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies"
-             loading="lazy" width="3024" height="4032" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.webp 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-gouttes.jpg"
+                width="3024" height="4032"
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.jpg 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-06-toile-gouttes">
-        <img src="/static/david/2023/2023-01-06-toile-gouttes.jpg" alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies"
-             loading="lazy" width="3024" height="4032" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.webp 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-gouttes.jpg"
+                width="3024" height="4032"
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.jpg 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies">
+        </picture>
     </a>
     <figcaption>Parc Louis-Hébert, Montréal, 2 novembre&nbsp;2022.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-06-toile-soleil"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-06-toile-soleil.jpg" alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile"
-             loading="lazy" width="4032" height="3024" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-soleil.webp 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-soleil.jpg"
+                width="4032" height="3024"
+                srcset="/static/david/2023/2023-01-06-toile-soleil.jpg 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-06-toile-soleil">
-        <img src="/static/david/2023/2023-01-06-toile-soleil.jpg" alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile"
-             loading="lazy" width="4032" height="3024" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-soleil.webp 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-soleil.jpg"
+                width="4032" height="3024"
+                srcset="/static/david/2023/2023-01-06-toile-soleil.jpg 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile">
+        </picture>
     </a>
     <figcaption>Une toile de soleil&nbsp;!</figcaption>
 </figure>

david/2023/photographie/index.html

 <figure>
     <a href="#2023-03-03-feu-soleil"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-feu-soleil.jpg" alt="Le campement avec le soleil en arrière plan."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-feu-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-feu-soleil.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-feu-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le campement avec le soleil en arrière plan.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-feu-soleil">
-        <img src="/static/david/2023/2023-03-03-feu-soleil.jpg" alt="Le campement avec le soleil en arrière plan."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-feu-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-feu-soleil.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-feu-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le campement avec le soleil en arrière plan.">
+        </picture>
     </a>
     <figcaption>Ô soleil, merci de ta chaleur&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-riviere-ouareau"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-riviere-ouareau.jpg" alt="La rivière Ouareau bien gelée."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-riviere-ouareau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière Ouareau bien gelée.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-riviere-ouareau">
-        <img src="/static/david/2023/2023-03-03-riviere-ouareau.jpg" alt="La rivière Ouareau bien gelée."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-riviere-ouareau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-riviere-ouareau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière Ouareau bien gelée.">
+        </picture>
     </a>
     <figcaption>Les méandres de la rivière&nbsp;gelée.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-sentier-murmures"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-sentier-murmures.jpg" alt="Le sentier des murmures."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-sentier-murmures.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le sentier des murmures.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-sentier-murmures">
-        <img src="/static/david/2023/2023-03-03-sentier-murmures.jpg" alt="Le sentier des murmures."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-sentier-murmures.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-sentier-murmures.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le sentier des murmures.">
+        </picture>
     </a>
     <figcaption>Une portion du sentier qui est intégralement à couvert de&nbsp;forêt.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-03-couleurs-soir"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-03-couleurs-soir.jpg" alt="La rivière le soir."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-couleurs-soir.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière le soir.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-03-couleurs-soir">
-        <img src="/static/david/2023/2023-03-03-couleurs-soir.jpg" alt="La rivière le soir."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-03-couleurs-soir.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-03-couleurs-soir.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière le soir.">
+        </picture>
     </a>
     <figcaption>Difficile de restituer la sensation de calme qu’il y avait alors, seulement troublée sporadiquement par un&nbsp;pic.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-06-toile-gouttes"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-06-toile-gouttes.jpg" alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies"
-             loading="lazy" width="3024" height="4032" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.webp 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-gouttes.jpg"
+                width="3024" height="4032"
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.jpg 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-06-toile-gouttes">
-        <img src="/static/david/2023/2023-01-06-toile-gouttes.jpg" alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies"
-             loading="lazy" width="3024" height="4032" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.webp 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-gouttes.jpg"
+                width="3024" height="4032"
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.jpg 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies">
+        </picture>
     </a>
     <figcaption>Parc Louis-Hébert, Montréal, 2 novembre&nbsp;2022.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-06-toile-soleil"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-06-toile-soleil.jpg" alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile"
-             loading="lazy" width="4032" height="3024" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-soleil.webp 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-soleil.jpg"
+                width="4032" height="3024"
+                srcset="/static/david/2023/2023-01-06-toile-soleil.jpg 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-06-toile-soleil">
-        <img src="/static/david/2023/2023-01-06-toile-soleil.jpg" alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile"
-             loading="lazy" width="4032" height="3024" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-soleil.webp 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-soleil.jpg"
+                width="4032" height="3024"
+                srcset="/static/david/2023/2023-01-06-toile-soleil.jpg 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile">
+        </picture>
     </a>
     <figcaption>Une toile de soleil&nbsp;!</figcaption>
 </figure>

david/2023/simplicite/index.html

 <figure>
     <a href="#2023-01-13-ski-visitation1"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation1.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation1.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation1">
-        <img src="/static/david/2023/2023-01-13-ski-visitation1.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation1.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-13-ski-visitation2"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation2.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="1536" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation2.jpg"
+                width="2048" height="1536"
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation2">
-        <img src="/static/david/2023/2023-01-13-ski-visitation2.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="1536" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation2.jpg"
+                width="2048" height="1536"
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-13-ski-visitation3"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation3.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation3.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation3">
-        <img src="/static/david/2023/2023-01-13-ski-visitation3.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation3.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-13-ski-visitation4"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation4.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation4.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation4">
-        <img src="/static/david/2023/2023-01-13-ski-visitation4.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation4.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>

david/2023/sociologie/index.html

 <figure>
     <a href="#2023-02-12-depart-campement"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-12-depart-campement.jpg" alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-12-depart-campement.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-depart-campement.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-depart-campement.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-12-depart-campement">
-        <img src="/static/david/2023/2023-02-12-depart-campement.jpg" alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-12-depart-campement.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-depart-campement.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-depart-campement.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un groupe de personnes qui partent du campement en traineau sur un lac gelé.">
+        </picture>
     </a>
     <figcaption>Avec la gang de&nbsp;tête.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-12-traces-canides"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-12-traces-canides.jpg" alt="De belles traces de canidés dans la neige sur la glace du lac."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-12-traces-canides.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-traces-canides.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-traces-canides.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="De belles traces de canidés dans la neige sur la glace du lac.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-12-traces-canides">
-        <img src="/static/david/2023/2023-02-12-traces-canides.jpg" alt="De belles traces de canidés dans la neige sur la glace du lac."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-12-traces-canides.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-traces-canides.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-traces-canides.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="De belles traces de canidés dans la neige sur la glace du lac.">
+        </picture>
     </a>
     <figcaption>Pas si seul·es au monde&nbsp;:-)</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-12-file-arrivee"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-12-file-arrivee.jpg" alt="File des arrivées progressives sur le site."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-12-file-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-file-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-file-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="File des arrivées progressives sur le site.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-12-file-arrivee">
-        <img src="/static/david/2023/2023-02-12-file-arrivee.jpg" alt="File des arrivées progressives sur le site."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-12-file-arrivee.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-12-file-arrivee.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-12-file-arrivee.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="File des arrivées progressives sur le site.">
+        </picture>
     </a>
     <figcaption>Pour donner une idée du&nbsp;cheminement.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-accueil-poisson-blanc"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg" alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-accueil-poisson-blanc">
-        <img src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg" alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc.">
+        </picture>
     </a>
     <figcaption>Les couleurs sont magnifiques et je regrette déjà de ne pas avoir pris un appareil&nbsp;photo.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-depart-traineaux"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-depart-traineaux.jpg" alt="Des personnes sur le lac gelé qui tirent chacune un traineau"
-             loading="lazy" width="2016" height="1512" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-depart-traineaux.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes sur le lac gelé qui tirent chacune un traineau">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-depart-traineaux">
-        <img src="/static/david/2023/2023-02-11-depart-traineaux.jpg" alt="Des personnes sur le lac gelé qui tirent chacune un traineau"
-             loading="lazy" width="2016" height="1512" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-depart-traineaux.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-depart-traineaux.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes sur le lac gelé qui tirent chacune un traineau">
+        </picture>
     </a>
     <figcaption>Le vent a bien soufflé cette nuit, on alterne glace et&nbsp;neige.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-traineau-solo"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-traineau-solo.jpg" alt="Une longue trainée de personnes tirant des traineaux sur le lac"
-             loading="lazy" width="2016" height="1512" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-solo.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-solo.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-traineau-solo.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une longue trainée de personnes tirant des traineaux sur le lac">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-traineau-solo">
-        <img src="/static/david/2023/2023-02-11-traineau-solo.jpg" alt="Une longue trainée de personnes tirant des traineaux sur le lac"
-             loading="lazy" width="2016" height="1512" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-solo.webp 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-solo.jpg"
+                width="2016" height="1512"
+                srcset="/static/david/2023/2023-02-11-traineau-solo.jpg 2016w"
+                sizes="min(100vw, calc(100vh * 2016 / 1512))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une longue trainée de personnes tirant des traineaux sur le lac">
+        </picture>
     </a>
     <figcaption>Un peu à l’écart de la foule, on ne se refait&nbsp;pas.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-traineau-apres-midi"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg" alt="Des personnes devant moi avec des traineaux, on voit mon ombre."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes devant moi avec des traineaux, on voit mon ombre.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-traineau-apres-midi">
-        <img src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg" alt="Des personnes devant moi avec des traineaux, on voit mon ombre."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des personnes devant moi avec des traineaux, on voit mon ombre.">
+        </picture>
     </a>
     <figcaption>Pour ma part, c’est neige fraîche, quitte à forcer un peu plus je préfère soigner mon silence&nbsp;relatif.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-coucher-soleil"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-coucher-soleil.jpg" alt="Le soleil se couche derrière des blocs de glace."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-coucher-soleil.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le soleil se couche derrière des blocs de glace.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-coucher-soleil">
-        <img src="/static/david/2023/2023-02-11-coucher-soleil.jpg" alt="Le soleil se couche derrière des blocs de glace."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-coucher-soleil.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-coucher-soleil.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le soleil se couche derrière des blocs de glace.">
+        </picture>
     </a>
     <figcaption>Je vous épargne les différents dégradés de rose qui ont suivi&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-11-astro-photographie"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-11-astro-photographie.jpg" alt="Une tente rouge et Orion au-dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-11-astro-photographie.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-astro-photographie.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-astro-photographie.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une tente rouge et Orion au-dessus.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-11-astro-photographie">
-        <img src="/static/david/2023/2023-02-11-astro-photographie.jpg" alt="Une tente rouge et Orion au-dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-11-astro-photographie.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-11-astro-photographie.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-11-astro-photographie.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une tente rouge et Orion au-dessus.">
+        </picture>
     </a>
     <figcaption>C’est bruité et tout mais j’étais content que l’on distingue au moins&nbsp;Orion.</figcaption>
 </figure>
 <figure>
     <a href="#2023-02-10-camping-parking"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-02-10-camping-parking.jpg" alt="Un parking avec un bon 70 cm de neige vierge dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-02-10-camping-parking.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-10-camping-parking.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-10-camping-parking.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parking avec un bon 70 cm de neige vierge dessus.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-02-10-camping-parking">
-        <img src="/static/david/2023/2023-02-10-camping-parking.jpg" alt="Un parking avec un bon 70 cm de neige vierge dessus."
-             loading="lazy" width="1512" height="2016" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-02-10-camping-parking.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-02-10-camping-parking.jpg"
+                width="1512" height="2016"
+                srcset="/static/david/2023/2023-02-10-camping-parking.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2016))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parking avec un bon 70 cm de neige vierge dessus.">
+        </picture>
     </a>
     <figcaption>C’est bien la première fois que je vais camper sur un parking&nbsp;!</figcaption>
 </figure>

david/2023/sport/index.html

 <figure>
     <a href="#2023-01-13-ski-visitation1"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation1.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation1.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation1">
-        <img src="/static/david/2023/2023-01-13-ski-visitation1.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation1.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation1.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-13-ski-visitation2"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation2.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="1536" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation2.jpg"
+                width="2048" height="1536"
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation2">
-        <img src="/static/david/2023/2023-01-13-ski-visitation2.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="1536" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation2.jpg"
+                width="2048" height="1536"
+                srcset="/static/david/2023/2023-01-13-ski-visitation2.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 1536))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-13-ski-visitation3"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation3.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation3.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation3">
-        <img src="/static/david/2023/2023-01-13-ski-visitation3.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation3.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation3.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-13-ski-visitation4"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-13-ski-visitation4.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation4.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-13-ski-visitation4">
-        <img src="/static/david/2023/2023-01-13-ski-visitation4.jpg" alt="Des traces de piste de ski de fond dans la tempête de neige."
-             loading="lazy" width="2048" height="2731" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.webp 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-13-ski-visitation4.jpg"
+                width="2048" height="2731"
+                srcset="/static/david/2023/2023-01-13-ski-visitation4.jpg 2048w"
+                sizes="min(100vw, calc(100vh * 2048 / 2731))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces de piste de ski de fond dans la tempête de neige.">
+        </picture>
     </a>
     <figcaption>Parc de l’Île de la Visitation, Montréal, 13 janvier&nbsp;2023.</figcaption>
 </figure>

david/2023/traces/index.html

 <figure>
     <a href="#2023-03-04-tempete-neige"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-04-tempete-neige.jpg" alt="La rivière sous la tempête."
-             loading="lazy" width="1920" height="1280" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-04-tempete-neige.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-tempete-neige.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-tempete-neige.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière sous la tempête.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-04-tempete-neige">
-        <img src="/static/david/2023/2023-03-04-tempete-neige.jpg" alt="La rivière sous la tempête."
-             loading="lazy" width="1920" height="1280" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-04-tempete-neige.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-tempete-neige.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-tempete-neige.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="La rivière sous la tempête.">
+        </picture>
     </a>
     <figcaption>Il neigeait dru&nbsp;!</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-04-traces"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-04-traces.jpg" alt="Des traces dans la neige."
-             loading="lazy" width="1920" height="1280" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-04-traces.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traces.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-traces.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces dans la neige.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-04-traces">
-        <img src="/static/david/2023/2023-03-04-traces.jpg" alt="Des traces dans la neige."
-             loading="lazy" width="1920" height="1280" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-04-traces.webp 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traces.jpg"
+                width="1920" height="1280"
+                srcset="/static/david/2023/2023-03-04-traces.jpg 1920w"
+                sizes="min(100vw, calc(100vh * 1920 / 1280))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Des traces dans la neige.">
+        </picture>
     </a>
     <figcaption>À une prochaine, l’animal.</figcaption>
 </figure>
 <figure>
     <a href="#2023-03-04-traineau"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-03-04-traineau.jpg" alt="Le traîneau sur le chemin du retour."
-             loading="lazy" width="1512" height="2268" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-03-04-traineau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traineau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-04-traineau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau sur le chemin du retour.">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-03-04-traineau">
-        <img src="/static/david/2023/2023-03-04-traineau.jpg" alt="Le traîneau sur le chemin du retour."
-             loading="lazy" width="1512" height="2268" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-03-04-traineau.webp 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-03-04-traineau.jpg"
+                width="1512" height="2268"
+                srcset="/static/david/2023/2023-03-04-traineau.jpg 1512w"
+                sizes="min(100vw, calc(100vh * 1512 / 2268))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Le traîneau sur le chemin du retour.">
+        </picture>
     </a>
     <figcaption>Le secret, c’est de faire des pauses, vraiment beaucoup de pauses&nbsp;!</figcaption>
 </figure>

david/2023/web/index.html

 <figure>
     <a href="#2023-01-06-toile-gouttes"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-06-toile-gouttes.jpg" alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies"
-             loading="lazy" width="3024" height="4032" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.webp 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-gouttes.jpg"
+                width="3024" height="4032"
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.jpg 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-06-toile-gouttes">
-        <img src="/static/david/2023/2023-01-06-toile-gouttes.jpg" alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies"
-             loading="lazy" width="3024" height="4032" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.webp 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-gouttes.jpg"
+                width="3024" height="4032"
+                srcset="/static/david/2023/2023-01-06-toile-gouttes.jpg 3024w"
+                sizes="min(100vw, calc(100vh * 3024 / 4032))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies">
+        </picture>
     </a>
     <figcaption>Parc Louis-Hébert, Montréal, 2 novembre&nbsp;2022.</figcaption>
 </figure>
 <figure>
     <a href="#2023-01-06-toile-soleil"
         title="Cliquer pour une version haute résolution">
-        <img src="/static/david/2023/2023-01-06-toile-soleil.jpg" alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile"
-             loading="lazy" width="4032" height="3024" />
+        <picture>
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-soleil.webp 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-soleil.jpg"
+                width="4032" height="3024"
+                srcset="/static/david/2023/2023-01-06-toile-soleil.jpg 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile">
+        </picture>
     </a>
     <a href="#_" class="lightbox" id="2023-01-06-toile-soleil">
-        <img src="/static/david/2023/2023-01-06-toile-soleil.jpg" alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile"
-             loading="lazy" width="4032" height="3024" />
+        <picture style="margin:0 auto;">
+            <source
+                srcset="/static/david/2023/2023-01-06-toile-soleil.webp 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                type="image/webp">
+            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+            <img
+                src="/static/david/2023/2023-01-06-toile-soleil.jpg"
+                width="4032" height="3024"
+                srcset="/static/david/2023/2023-01-06-toile-soleil.jpg 4032w"
+                sizes="min(100vw, calc(100vh * 4032 / 3024))"
+                fetchpriority="high"
+                decoding="sync"
+                alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile">
+        </picture>
     </a>
     <figcaption>Une toile de soleil&nbsp;!</figcaption>
 </figure>

david/log/index.xml

     <link href="https://larlet.fr/david/" rel="alternate" type="text/html" />
     <link href="https://larlet.fr/david/log/" rel="self" />
     <id>https://larlet.fr/david/</id>
-    <updated>2023-03-06T12:00:00+01:00</updated>
+    <updated>2023-03-10T12:00:00+01:00</updated>
     <author>
         <name>David Larlet</name>
         <uri>https://larlet.fr/david/</uri>
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-03-04-tempete-neige.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-03-04-tempete-neige.jpg&quot; alt=&quot;La rivière sous la tempête.&quot;
-             width=&quot;1920&quot; height=&quot;1280&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-03-04-tempete-neige.webp 1920w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1920 / 1280))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-03-04-tempete-neige.jpg&quot;
+            width=&quot;1920&quot; height=&quot;1280&quot;
+            srcset=&quot;/static/david/2023/2023-03-04-tempete-neige.jpg 1920w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1920 / 1280))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;La rivière sous la tempête.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Il neigeait dru&amp;nbsp;!&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-03-04-traces.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-03-04-traces.jpg&quot; alt=&quot;Des traces dans la neige.&quot;
-             width=&quot;1920&quot; height=&quot;1280&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-03-04-traces.webp 1920w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1920 / 1280))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-03-04-traces.jpg&quot;
+            width=&quot;1920&quot; height=&quot;1280&quot;
+            srcset=&quot;/static/david/2023/2023-03-04-traces.jpg 1920w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1920 / 1280))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Des traces dans la neige.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;À une prochaine, l’animal.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-03-04-traineau.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-03-04-traineau.jpg&quot; alt=&quot;Le traîneau sur le chemin du retour.&quot;
-             width=&quot;1512&quot; height=&quot;2268&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-03-04-traineau.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2268))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-03-04-traineau.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2268&quot;
+            srcset=&quot;/static/david/2023/2023-03-04-traineau.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2268))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Le traîneau sur le chemin du retour.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Le secret, c’est de faire des pauses, vraiment beaucoup de pauses&amp;nbsp;!&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-03-03-feu-soleil.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-03-03-feu-soleil.jpg&quot; alt=&quot;Le campement avec le soleil en arrière plan.&quot;
-             width=&quot;1512&quot; height=&quot;2268&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-03-03-feu-soleil.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2268))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-03-03-feu-soleil.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2268&quot;
+            srcset=&quot;/static/david/2023/2023-03-03-feu-soleil.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2268))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Le campement avec le soleil en arrière plan.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Ô soleil, merci de ta chaleur&amp;nbsp;!&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-03-03-riviere-ouareau.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-03-03-riviere-ouareau.jpg&quot; alt=&quot;La rivière Ouareau bien gelée.&quot;
-             width=&quot;1512&quot; height=&quot;2268&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-03-03-riviere-ouareau.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2268))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-03-03-riviere-ouareau.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2268&quot;
+            srcset=&quot;/static/david/2023/2023-03-03-riviere-ouareau.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2268))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;La rivière Ouareau bien gelée.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Les méandres de la rivière&amp;nbsp;gelée.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-03-03-sentier-murmures.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-03-03-sentier-murmures.jpg&quot; alt=&quot;Le sentier des murmures.&quot;
-             width=&quot;1512&quot; height=&quot;2268&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-03-03-sentier-murmures.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2268))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-03-03-sentier-murmures.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2268&quot;
+            srcset=&quot;/static/david/2023/2023-03-03-sentier-murmures.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2268))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Le sentier des murmures.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Une portion du sentier qui est intégralement à couvert de&amp;nbsp;forêt.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-03-03-couleurs-soir.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-03-03-couleurs-soir.jpg&quot; alt=&quot;La rivière le soir.&quot;
-             width=&quot;1512&quot; height=&quot;2268&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-03-03-couleurs-soir.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2268))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-03-03-couleurs-soir.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2268&quot;
+            srcset=&quot;/static/david/2023/2023-03-03-couleurs-soir.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2268))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;La rivière le soir.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Difficile de restituer la sensation de calme qu’il y avait alors, seulement troublée sporadiquement par un&amp;nbsp;pic.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-03-02-traineau-arrivee.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-03-02-traineau-arrivee.jpg&quot; alt=&quot;Le traîneau à l’arrivée avec pas mal de neige chargée.&quot;
-             width=&quot;1512&quot; height=&quot;2016&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-03-02-traineau-arrivee.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-03-02-traineau-arrivee.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2016&quot;
+            srcset=&quot;/static/david/2023/2023-03-02-traineau-arrivee.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Le traîneau à l’arrivée avec pas mal de neige chargée.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Ce que ça donne à l’arrivée, transporter de la neige n’a pas grand intérêt, il y en aura à&amp;nbsp;l’arrivée.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-03-02-feu-levitation.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-03-02-feu-levitation.jpg&quot; alt=&quot;Un feu dans un foyer surélevé.&quot;
-             width=&quot;1512&quot; height=&quot;2016&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-03-02-feu-levitation.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-03-02-feu-levitation.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2016&quot;
+            srcset=&quot;/static/david/2023/2023-03-02-feu-levitation.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Un feu dans un foyer surélevé.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;C’est parti pour quelques heures à entretenir un&amp;nbsp;feu.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-02-12-depart-campement.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-02-12-depart-campement.jpg&quot; alt=&quot;Un groupe de personnes qui partent du campement en traineau sur un lac gelé.&quot;
-             width=&quot;1512&quot; height=&quot;2016&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-02-12-depart-campement.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-02-12-depart-campement.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2016&quot;
+            srcset=&quot;/static/david/2023/2023-02-12-depart-campement.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Un groupe de personnes qui partent du campement en traineau sur un lac gelé.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Avec la gang de&amp;nbsp;tête.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-02-12-traces-canides.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-02-12-traces-canides.jpg&quot; alt=&quot;De belles traces de canidés dans la neige sur la glace du lac.&quot;
-             width=&quot;1512&quot; height=&quot;2016&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-02-12-traces-canides.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-02-12-traces-canides.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2016&quot;
+            srcset=&quot;/static/david/2023/2023-02-12-traces-canides.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;De belles traces de canidés dans la neige sur la glace du lac.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Pas si seul·es au monde&amp;nbsp;:-)&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-02-12-file-arrivee.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-02-12-file-arrivee.jpg&quot; alt=&quot;File des arrivées progressives sur le site.&quot;
-             width=&quot;1512&quot; height=&quot;2016&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-02-12-file-arrivee.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-02-12-file-arrivee.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2016&quot;
+            srcset=&quot;/static/david/2023/2023-02-12-file-arrivee.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;File des arrivées progressives sur le site.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Pour donner une idée du&amp;nbsp;cheminement.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg&quot; alt=&quot;Le ciel à 7h du matin sur le réservoir du Poisson Blanc.&quot;
-             width=&quot;1512&quot; height=&quot;2016&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-02-11-accueil-poisson-blanc.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2016&quot;
+            srcset=&quot;/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Le ciel à 7h du matin sur le réservoir du Poisson Blanc.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Les couleurs sont magnifiques et je regrette déjà de ne pas avoir pris un appareil&amp;nbsp;photo.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-02-11-depart-traineaux.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-02-11-depart-traineaux.jpg&quot; alt=&quot;Des personnes sur le lac gelé qui tirent chacune un traineau&quot;
-             width=&quot;2016&quot; height=&quot;1512&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-02-11-depart-traineaux.webp 2016w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2016 / 1512))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-02-11-depart-traineaux.jpg&quot;
+            width=&quot;2016&quot; height=&quot;1512&quot;
+            srcset=&quot;/static/david/2023/2023-02-11-depart-traineaux.jpg 2016w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2016 / 1512))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Des personnes sur le lac gelé qui tirent chacune un traineau&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Le vent a bien soufflé cette nuit, on alterne glace et&amp;nbsp;neige.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-02-11-traineau-solo.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-02-11-traineau-solo.jpg&quot; alt=&quot;Une longue trainée de personnes tirant des traineaux sur le lac&quot;
-             width=&quot;2016&quot; height=&quot;1512&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-02-11-traineau-solo.webp 2016w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2016 / 1512))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-02-11-traineau-solo.jpg&quot;
+            width=&quot;2016&quot; height=&quot;1512&quot;
+            srcset=&quot;/static/david/2023/2023-02-11-traineau-solo.jpg 2016w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2016 / 1512))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Une longue trainée de personnes tirant des traineaux sur le lac&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Un peu à l’écart de la foule, on ne se refait&amp;nbsp;pas.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-02-11-traineau-apres-midi.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-02-11-traineau-apres-midi.jpg&quot; alt=&quot;Des personnes devant moi avec des traineaux, on voit mon ombre.&quot;
-             width=&quot;1512&quot; height=&quot;2016&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-02-11-traineau-apres-midi.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-02-11-traineau-apres-midi.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2016&quot;
+            srcset=&quot;/static/david/2023/2023-02-11-traineau-apres-midi.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Des personnes devant moi avec des traineaux, on voit mon ombre.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Pour ma part, c’est neige fraîche, quitte à forcer un peu plus je préfère soigner mon silence&amp;nbsp;relatif.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-02-11-coucher-soleil.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-02-11-coucher-soleil.jpg&quot; alt=&quot;Le soleil se couche derrière des blocs de glace.&quot;
-             width=&quot;1512&quot; height=&quot;2016&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-02-11-coucher-soleil.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-02-11-coucher-soleil.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2016&quot;
+            srcset=&quot;/static/david/2023/2023-02-11-coucher-soleil.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Le soleil se couche derrière des blocs de glace.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Je vous épargne les différents dégradés de rose qui ont suivi&amp;nbsp;!&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-02-11-astro-photographie.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-02-11-astro-photographie.jpg&quot; alt=&quot;Une tente rouge et Orion au-dessus.&quot;
-             width=&quot;1512&quot; height=&quot;2016&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-02-11-astro-photographie.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-02-11-astro-photographie.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2016&quot;
+            srcset=&quot;/static/david/2023/2023-02-11-astro-photographie.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Une tente rouge et Orion au-dessus.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;C’est bruité et tout mais j’étais content que l’on distingue au moins&amp;nbsp;Orion.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-02-10-camping-parking.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-02-10-camping-parking.jpg&quot; alt=&quot;Un parking avec un bon 70 cm de neige vierge dessus.&quot;
-             width=&quot;1512&quot; height=&quot;2016&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-02-10-camping-parking.webp 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-02-10-camping-parking.jpg&quot;
+            width=&quot;1512&quot; height=&quot;2016&quot;
+            srcset=&quot;/static/david/2023/2023-02-10-camping-parking.jpg 1512w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 1512 / 2016))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Un parking avec un bon 70 cm de neige vierge dessus.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;C’est bien la première fois que je vais camper sur un parking&amp;nbsp;!&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-01-22-ski-retour.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-01-22-ski-retour.jpg&quot; alt=&quot;Un ski dans les traces de la veille, sur le chemin du retour.&quot;
-             width=&quot;2048&quot; height=&quot;2731&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-01-22-ski-retour.webp 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 2731))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-01-22-ski-retour.jpg&quot;
+            width=&quot;2048&quot; height=&quot;2731&quot;
+            srcset=&quot;/static/david/2023/2023-01-22-ski-retour.jpg 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 2731))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Un ski dans les traces de la veille, sur le chemin du retour.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Le retour dans ses traces demande tellement moins d’énergie&amp;nbsp;!&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-01-21-selfie-traineau.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-01-21-selfie-traineau.jpg&quot; alt=&quot;Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond.&quot;
-             width=&quot;2048&quot; height=&quot;2726&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-01-21-selfie-traineau.webp 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 2726))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-01-21-selfie-traineau.jpg&quot;
+            width=&quot;2048&quot; height=&quot;2726&quot;
+            srcset=&quot;/static/david/2023/2023-01-21-selfie-traineau.jpg 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 2726))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Un selfie avec le traîneau en arrière-plan, sur un lac québécois avec la forêt au fond.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Il est très rare que je fasse des égoportraits mais là j’aimais bien voir le téléphone dans les&amp;nbsp;lunettes.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-01-21-feu-foyer.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-01-21-feu-foyer.jpg&quot; alt=&quot;Un feu dans un réceptacle permettant de le garder au-dessus de la neige.&quot;
-             width=&quot;2048&quot; height=&quot;2731&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-01-21-feu-foyer.webp 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 2731))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-01-21-feu-foyer.jpg&quot;
+            width=&quot;2048&quot; height=&quot;2731&quot;
+            srcset=&quot;/static/david/2023/2023-01-21-feu-foyer.jpg 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 2731))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Un feu dans un réceptacle permettant de le garder au-dessus de la neige.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;J’essaye habituellement de faire des petits feux économes et efficaces, j’ai un peu forcé pour la&amp;nbsp;photo…&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-01-13-ski-visitation1.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-01-13-ski-visitation1.jpg&quot; alt=&quot;Des traces de piste de ski de fond dans la tempête de neige.&quot;
-             width=&quot;2048&quot; height=&quot;2731&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-01-13-ski-visitation1.webp 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 2731))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-01-13-ski-visitation1.jpg&quot;
+            width=&quot;2048&quot; height=&quot;2731&quot;
+            srcset=&quot;/static/david/2023/2023-01-13-ski-visitation1.jpg 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 2731))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Des traces de piste de ski de fond dans la tempête de neige.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Parc de l’Île de la Visitation, Montréal, 13 janvier&amp;nbsp;2023.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-01-13-ski-visitation2.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-01-13-ski-visitation2.jpg&quot; alt=&quot;Des traces de piste de ski de fond dans la tempête de neige.&quot;
-             width=&quot;2048&quot; height=&quot;1536&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-01-13-ski-visitation2.webp 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 1536))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-01-13-ski-visitation2.jpg&quot;
+            width=&quot;2048&quot; height=&quot;1536&quot;
+            srcset=&quot;/static/david/2023/2023-01-13-ski-visitation2.jpg 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 1536))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Des traces de piste de ski de fond dans la tempête de neige.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Parc de l’Île de la Visitation, Montréal, 13 janvier&amp;nbsp;2023.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-01-13-ski-visitation3.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-01-13-ski-visitation3.jpg&quot; alt=&quot;Des traces de piste de ski de fond dans la tempête de neige.&quot;
-             width=&quot;2048&quot; height=&quot;2731&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-01-13-ski-visitation3.webp 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 2731))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-01-13-ski-visitation3.jpg&quot;
+            width=&quot;2048&quot; height=&quot;2731&quot;
+            srcset=&quot;/static/david/2023/2023-01-13-ski-visitation3.jpg 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 2731))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Des traces de piste de ski de fond dans la tempête de neige.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Parc de l’Île de la Visitation, Montréal, 13 janvier&amp;nbsp;2023.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
     &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-01-13-ski-visitation4.jpg&quot;
         title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img src=&quot;https://larlet.fr/static/david/2023/2023-01-13-ski-visitation4.jpg&quot; alt=&quot;Des traces de piste de ski de fond dans la tempête de neige.&quot;
-             width=&quot;2048&quot; height=&quot;2731&quot; /&gt;
+        &lt;source
+            srcset=&quot;/static/david/2023/2023-01-13-ski-visitation4.webp 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 2731))&quot;
+            type=&quot;image/webp&quot;&gt;
+        &lt;!-- The &lt;img&gt; tag is a fallback image (required in the &lt;picture&gt; tag) --&gt;
+        &lt;img
+            src=&quot;https://larlet.fr/static/david/2023/2023-01-13-ski-visitation4.jpg&quot;
+            width=&quot;2048&quot; height=&quot;2731&quot;
+            srcset=&quot;/static/david/2023/2023-01-13-ski-visitation4.jpg 2048w&quot;
+            sizes=&quot;min(100vw, calc(100vh * 2048 / 2731))&quot;
+            fetchpriority=&quot;high&quot;
+            decoding=&quot;sync&quot;
+            alt=&quot;Des traces de piste de ski de fond dans la tempête de neige.&quot;&gt;
     &lt;/a&gt;
     &lt;figcaption&gt;Parc de l’Île de la Visitation, Montréal, 13 janvier&amp;nbsp;2023.&lt;/figcaption&gt;
 &lt;/figure&gt;

site.py

 #!/usr/bin/env python3
 import json
 import locale
+import subprocess
 from collections import defaultdict
 from dataclasses import dataclass
 from datetime import datetime, timedelta
             return text
         return super().paragraph(text)
 
+    def _generate_webp(self, src):
+        src_webp = src.replace(".jpg", ".webp")
+        full_path = STATIC / Path(src[1:])
+        full_path_webp = STATIC / Path(src_webp[1:])
+        if full_path_webp.exists() or "/2023/" not in src:
+            return src_webp
+        command = ["cwebp", "-q", "80", full_path, "-o", full_path_webp]
+        subprocess.check_output(command, stderr=subprocess.STDOUT)
+        return src_webp
+
     def image(self, src, alt="", title=None):
+        src_webp = self._generate_webp(src)
         full_path = STATIC / Path(src[1:])
         image = Image.open(full_path)
         width, height = image.size
                 <figure>
                     <a href="{src}"
                         title="Cliquer pour une version haute résolution">
-                        <img src="{src}" alt="{alt}"
-                             width="{width}" height="{height}" />
+                        <source
+                            srcset="{src_webp} {width}w"
+                            sizes="min(100vw, calc(100vh * {width} / {height}))"
+                            type="image/webp">
+                        <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+                        <img
+                            src="{src}"
+                            width="{width}" height="{height}"
+                            srcset="{src} {width}w"
+                            sizes="min(100vw, calc(100vh * {width} / {height}))"
+                            fetchpriority="high"
+                            decoding="sync"
+                            alt="{alt}">
                     </a>
                     <figcaption>{title}</figcaption>
                 </figure>
     """
 
     def image(self, src, alt="", title=None):
+        src_webp = self._generate_webp(src)
         file_name = Path(src).stem
         full_path = STATIC / Path(src[1:])
         image = Image.open(full_path)
                 <figure>
                     <a href="#{file_name}"
                         title="Cliquer pour une version haute résolution">
-                        <img src="{src}" alt="{alt}"
-                             loading="lazy" width="{width}" height="{height}" />
+                        <picture>
+                            <source
+                                srcset="{src_webp} {width}w"
+                                sizes="min(100vw, calc(100vh * {width} / {height}))"
+                                type="image/webp">
+                            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+                            <img
+                                src="{src}"
+                                width="{width}" height="{height}"
+                                srcset="{src} {width}w"
+                                sizes="min(100vw, calc(100vh * {width} / {height}))"
+                                fetchpriority="high"
+                                decoding="sync"
+                                alt="{alt}">
+                        </picture>
                     </a>
                     <a href="#_" class="lightbox" id="{file_name}">
-                        <img src="{src}" alt="{alt}"
-                             loading="lazy" width="{width}" height="{height}" />
+                        <picture style="margin:0 auto;">
+                            <source
+                                srcset="{src_webp} {width}w"
+                                sizes="min(100vw, calc(100vh * {width} / {height}))"
+                                type="image/webp">
+                            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
+                            <img
+                                src="{src}"
+                                width="{width}" height="{height}"
+                                srcset="{src} {width}w"
+                                sizes="min(100vw, calc(100vh * {width} / {height}))"
+                                fetchpriority="high"
+                                decoding="sync"
+                                alt="{alt}">
+                        </picture>
                     </a>
                     <figcaption>{title}</figcaption>
                 </figure>