diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css
index 25981568..f9f8316b 100644
--- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css
+++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css
@@ -35,6 +35,9 @@
   visibility: hidden;
   opacity: 0;
 }
+#page-accueil .storytelling__image picture {
+  max-height: inherit;
+}
 #page-accueil .storytelling__image img {
   scale: 0.9;
   max-height: inherit;
diff --git a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map
index bfa1ef57..4a3bd34f 100644
--- a/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map
+++ b/web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":"AAEA;AACE;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"page-accueil.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":"AAEA;AACE;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"page-accueil.css"}
\ No newline at end of file
diff --git a/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss b/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss
index 8dc09d1f..020c2e51 100644
--- a/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss
+++ b/web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss
@@ -41,6 +41,10 @@
         opacity: 0;
       }
 
+      picture {
+        max-height: inherit;
+      }
+
       img {
         scale: 0.9;
         max-height: inherit;
diff --git a/web/app/themes/haiku-atelier-2024/views/a-propos.twig b/web/app/themes/haiku-atelier-2024/views/a-propos.twig
index 717bbbb9..941920ee 100644
--- a/web/app/themes/haiku-atelier-2024/views/a-propos.twig
+++ b/web/app/themes/haiku-atelier-2024/views/a-propos.twig
@@ -1,28 +1,13 @@
 {% extends "base.twig" %}
 
+{% import "macros/images.twig" as images %}
+
 {% block contenu %}
   <main id="page-a-propos">
     <div class="storytelling">
       <div class="storytelling__conteneur">
-        <img
-          alt=""
-          decoding="sync"
-          height="4127"
-          id="image-1"
-          loading="lazy"
-          src="{{ site.theme.link }}/assets/img/about/tool11.png"
-          width="3828"
-        />
-
-        <img
-          alt=""
-          decoding="sync"
-          height="1080"
-          id="image-2"
-          loading="lazy"
-          src="{{ site.theme.link }}/assets/img/about/pic1.png"
-          width="903"
-        />
+        {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/tool11", "", 3828, 4127) }}
+        {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/pic1", "", 903, 1080) }}
       </div>
     </div>
   </main>
diff --git a/web/app/themes/haiku-atelier-2024/views/accueil.twig b/web/app/themes/haiku-atelier-2024/views/accueil.twig
index 237495d3..73f17f64 100644
--- a/web/app/themes/haiku-atelier-2024/views/accueil.twig
+++ b/web/app/themes/haiku-atelier-2024/views/accueil.twig
@@ -1,4 +1,5 @@
 {% extends "base.twig" %}
+{% import "macros/images.twig" as images %}
 
 {% block contenu %}
   <main id="page-accueil">
@@ -8,194 +9,141 @@
           class="storytelling__image"
           data-index="1"
         >
-          <img
-            alt=""
-            decoding="sync"
-            height="1080"
-            loading="lazy"
-            src="{{ site.theme.link }}/assets/img/storytelling/scroll1.jpg"
-            width="903"
-          />
+          {{
+            images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", "", 753, 900)
+          }}
         </div>
+
         <div
           aria-hidden
           class="storytelling__image"
           data-cache
           data-index="2"
         >
-          <img
-            alt=""
-            decoding="sync"
-            height="1080"
-            loading="lazy"
-            src="{{ site.theme.link }}/assets/img/storytelling/scroll2.jpg"
-            width="903"
-          />
+          {{
+            images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", "", 753, 900)
+          }}
         </div>
+
         <div
           aria-hidden
           class="storytelling__image"
           data-cache
           data-index="3"
         >
-          <img
-            alt=""
-            decoding="sync"
-            height="1080"
-            loading="lazy"
-            src="{{ site.theme.link }}/assets/img/storytelling/scroll3.jpg"
-            width="903"
-          />
+          {{
+            images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", "", 753, 900)
+          }}
         </div>
+
         <div
           aria-hidden
           class="storytelling__image"
           data-cache
           data-index="4"
         >
-          <img
-            alt=""
-            decoding="sync"
-            height="1080"
-            loading="lazy"
-            src="{{ site.theme.link }}/assets/img/storytelling/scroll4.jpg"
-            width="903"
-          />
+          {{
+            images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", "", 753, 900)
+          }}
         </div>
+
         <div
           aria-hidden
           class="storytelling__image"
           data-cache
           data-index="5"
         >
-          <img
-            alt=""
-            decoding="sync"
-            height="1080"
-            loading="lazy"
-            src="{{ site.theme.link }}/assets/img/storytelling/scroll5.jpg"
-            width="903"
-          />
+          {{
+            images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", "", 753, 900)
+          }}
         </div>
+
         <div
           aria-hidden
           class="storytelling__image"
           data-cache
           data-index="6"
         >
-          <img
-            alt=""
-            decoding="sync"
-            height="1080"
-            loading="lazy"
-            src="{{ site.theme.link }}/assets/img/storytelling/scroll6.jpg"
-            width="903"
-          />
+          {{
+            images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", "", 753, 900)
+          }}
         </div>
+
         <div
           aria-hidden
           class="storytelling__image"
           data-cache
           data-index="7"
         >
-          <img
-            alt=""
-            decoding="sync"
-            height="1080"
-            loading="lazy"
-            src="{{ site.theme.link }}/assets/img/storytelling/scroll7.jpg"
-            width="903"
-          />
+          {{
+            images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", "", 753, 900)
+          }}
         </div>
+
         <div
           aria-hidden
           class="storytelling__image"
           data-cache
           data-index="8"
         >
-          <img
-            alt=""
-            decoding="sync"
-            height="1080"
-            loading="lazy"
-            src="{{ site.theme.link }}/assets/img/storytelling/scroll8.jpg"
-            width="903"
-          />
+          {{
+            images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", "", 753, 900)
+          }}
         </div>
+
         <div
           aria-hidden
           class="storytelling__image"
           data-cache
           data-index="9"
         >
-          <img
-            alt=""
-            decoding="sync"
-            height="1080"
-            loading="lazy"
-            src="{{ site.theme.link }}/assets/img/storytelling/scroll9.jpg"
-            width="903"
-          />
+          {{
+            images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", "", 753, 900)
+          }}
         </div>
+
         <div
           aria-hidden
           class="storytelling__image"
           data-cache
           data-index="10"
         >
-          <img
-            alt=""
-            decoding="sync"
-            height="1080"
-            loading="lazy"
-            src="{{ site.theme.link }}/assets/img/storytelling/scroll10.jpg"
-            width="903"
-          />
+          {{
+            images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", "", 753, 900)
+          }}
         </div>
+
         <div
           aria-hidden
           class="storytelling__image"
           data-cache
           data-index="11"
         >
-          <img
-            alt=""
-            decoding="sync"
-            height="1080"
-            loading="lazy"
-            src="{{ site.theme.link }}/assets/img/storytelling/scroll11.jpg"
-            width="903"
-          />
+          {{
+            images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", "", 753, 900)
+          }}
         </div>
+
         <div
           aria-hidden
           class="storytelling__image"
           data-cache
           data-index="12"
         >
-          <img
-            alt=""
-            decoding="sync"
-            height="1080"
-            loading="lazy"
-            src="{{ site.theme.link }}/assets/img/storytelling/scroll12.jpg"
-            width="903"
-          />
+          {{
+            images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", "", 753, 900)
+          }}
         </div>
+
         <div
           aria-hidden
           class="storytelling__image"
           data-cache
           data-index="13"
         >
-          <img
-            alt=""
-            decoding="sync"
-            height="1080"
-            loading="lazy"
-            src="{{ site.theme.link }}/assets/img/storytelling/scroll13.jpg"
-            width="903"
-          />
+          {{
+            images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", "", 753, 900)
+          }}
         </div>
       </div>
     </div>
diff --git a/web/app/themes/haiku-atelier-2024/views/macros/images.twig b/web/app/themes/haiku-atelier-2024/views/macros/images.twig
new file mode 100644
index 00000000..c4820fda
--- /dev/null
+++ b/web/app/themes/haiku-atelier-2024/views/macros/images.twig
@@ -0,0 +1,25 @@
+{% macro genere_source_img_multi_formats(rel_url, alt="", width, height) %}
+  <picture>
+    <source
+      srcset="{{ rel_url }}.avif"
+      type="image/avif"
+    />
+    <source
+      srcset="{{ rel_url }}.jxl"
+      type="image/jxl"
+    />
+    <source
+      srcset="{{ rel_url }}.webp"
+      type="image/webp"
+    />
+
+    <img
+      alt="{{ alt }}"
+      decoding="sync"
+      height="{{ height }}"
+      loading="eager"
+      src="{{ rel_url }}.jpg"
+      width="{{ width }}"
+    />
+  </picture>
+{% endmacro %}