diff --git a/config/theme.yml b/config/theme.yml
index 5a967e9e7..29918670e 100644
--- a/config/theme.yml
+++ b/config/theme.yml
@@ -135,6 +135,43 @@ global_settings:
       width: 170
       height: 115
       scope: [stores]
+    default_xs:
+      width: 120
+      height: 120
+      scope: [products, manufacturers, suppliers, categories]
+    default_s:
+      width: 160
+      height: 160
+      scope: [categories, products]
+    default_m:
+      width: 200
+      height: 200
+      scope: [stores, manufacturers, suppliers, products]
+    default_md:
+      width: 320
+      height: 320
+      scope: [categories, products]
+    default_xl:
+      width: 400
+      height: 400
+      scope: [stores, products]
+    product_main:
+      width: 720
+      height: 720
+      scope: [products]
+    category_cover:
+      width: 1000
+      height: 200
+      scope: [categories]
+    product_main_2x:
+      width: 1440
+      height: 1440
+      scope: [products]
+    category_cover_2x:
+      width: 2000
+      height: 400
+      scope: [categories]
+
 
 theme_settings:
   rtl_generation: false
diff --git a/templates/catalog/_partials/category-header.tpl b/templates/catalog/_partials/category-header.tpl
index 6106947e4..d256412f0 100644
--- a/templates/catalog/_partials/category-header.tpl
+++ b/templates/catalog/_partials/category-header.tpl
@@ -24,5 +24,3 @@
       {include file='catalog/_partials/subcategories.tpl' subcategories=$subcategories}
     {/if}
 </div>
-
-
diff --git a/templates/catalog/_partials/miniatures/brand.tpl b/templates/catalog/_partials/miniatures/brand.tpl
index abbb910cb..084f2b798 100644
--- a/templates/catalog/_partials/miniatures/brand.tpl
+++ b/templates/catalog/_partials/miniatures/brand.tpl
@@ -4,7 +4,11 @@
  *}
 {block name='brand_miniature_item'}
   <li class="brand card col-6 col-md-4 col-lg-3">
-    <div class="brand__img"><a href="{$brand.url}"><img src="{$brand.image}" alt="{$brand.name}" loading="lazy"></a></div>
+    <div class="brand__img">
+      <a href="{$brand.url}">
+        <img src="{$brand.image}" alt="{$brand.name}" loading="lazy">
+      </a>
+    </div>
     <div class="brand__infos">
       <p><a class="brand__link" href="{$brand.url}">{$brand.name}</a></p>
       {$brand.text nofilter}
diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index 88fb6ebed..fc2614da5 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -13,23 +13,91 @@
         {block name='product_miniature_image'}
           <div class="{$componentName}__image-container thumbnail-container">
             {if $product.cover}
-              <img
-                src="{$product.cover.bySize.home_default.url}"
-                alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
-                loading="lazy"
-                data-full-size-image-url="{$product.cover.bySize.home_default.url}"
-                width="{$product.cover.bySize.home_default.width}"
-                height="{$product.cover.bySize.home_default.height}"
-                class="{$componentName}__image card-img-top"
-              />
+              <picture>
+                {if isset($product.cover.bySize.default_md.sources.avif)}
+                  <source 
+                    srcset="
+                      {$product.cover.bySize.default_xs.sources.avif} 120w,
+                      {$product.cover.bySize.default_m.sources.avif} 200w,
+                      {$product.cover.bySize.default_md.sources.avif} 320w,
+                      {$product.cover.bySize.product_main.sources.avif} 720w"
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 50vw" 
+                    type="image/avif"
+                  >
+                {/if}
+
+                {if isset($product.cover.bySize.default_md.sources.webp)}
+                  <source 
+                    srcset="
+                      {$product.cover.bySize.default_xs.sources.webp} 120w,
+                      {$product.cover.bySize.default_m.sources.webp} 200w,
+                      {$product.cover.bySize.default_md.sources.webp} 320w,
+                      {$product.cover.bySize.product_main.sources.webp} 720w"
+                    sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw" 
+                    type="image/webp"
+                  >
+                {/if}
+
+                <img
+                  class="{$componentName}__image card-img-top"
+                  srcset="
+                    {$product.cover.bySize.default_xs.url} 120w,
+                    {$product.cover.bySize.default_m.url} 200w,
+                    {$product.cover.bySize.default_md.url} 320w,
+                    {$product.cover.bySize.product_main.url} 720w"
+                  sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw" 
+                  src="{$product.cover.bySize.default_md.url}" 
+                  width="{$product.cover.bySize.default_md.width}"
+                  height="{$product.cover.bySize.default_md.height}"
+                  loading="lazy"
+                  alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
+                  title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
+                  data-full-size-image-url="{$product.cover.bySize.home_default.url}"
+                >
+              </picture>
             {else}
-              <img
-                src="{$urls.no_picture_image.bySize.home_default.url}"
-                loading="lazy"
-                width="{$urls.no_picture_image.bySize.home_default.width}"
-                height="{$urls.no_picture_image.bySize.home_default.height}"
-                class="{$componentName}__image card-img-top"
-              />
+              <picture>
+                {if isset($urls.no_picture_image.bySize.default_md.sources.avif)}
+                  <source 
+                    srcset="
+                      {$urls.no_picture_image.bySize.default_xs.sources.avif} 120w,
+                      {$urls.no_picture_image.bySize.default_m.sources.avif} 200w,
+                      {$urls.no_picture_image.bySize.default_md.sources.avif} 320w,
+                      {$urls.no_picture_image.bySize.product_main.sources.avif} 720w"
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 50vw" 
+                    type="image/avif"
+                  >
+                {/if}
+
+                {if isset($urls.no_picture_image.bySize.default_md.sources.webp)}
+                  <source 
+                    srcset="
+                      {$urls.no_picture_image.bySize.default_xs.sources.webp} 120w,
+                      {$urls.no_picture_image.bySize.default_m.sources.webp} 200w,
+                      {$urls.no_picture_image.bySize.default_md.sources.webp} 320w,
+                      {$urls.no_picture_image.bySize.product_main.sources.webp} 720w"
+                    sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw" 
+                    type="image/webp"
+                  >
+                {/if}
+
+                <img
+                  class="{$componentName}__image card-img-top"
+                  srcset="
+                    {$urls.no_picture_image.bySize.default_xs.url} 120w,
+                    {$urls.no_picture_image.bySize.default_m.url} 200w,
+                    {$urls.no_picture_image.bySize.default_md.url} 320w,
+                    {$urls.no_picture_image.bySize.product_main.url} 720w"
+                  sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw" 
+                  width="{$urls.no_picture_image.bySize.default_md.width}"
+                  height="{$urls.no_picture_image.bySize.default_md.height}"
+                  src="{$urls.no_picture_image.bySize.default_md.url}" 
+                  loading="lazy"
+                  alt="{l s='No image available' d='Shop.Theme.Catalog'}"
+                  title="{l s='No image available' d='Shop.Theme.Catalog'}"
+                  data-full-size-image-url="{$product.cover.bySize.home_default.url}"
+                >
+              </picture>
             {/if}
 
             {block name='quick_view_touch'}
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 59dd3ebc9..f459644a5 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -23,18 +23,47 @@
         {/if}
 
         {block name='product_cover'}
-          {foreach from=$product.images item=image key=key}
+          {foreach from=$product.images item=image key=key name=productImages}
             <div class="carousel-item{if $image.id_image == $product.default_image.id_image} active{/if}">
-              <img
-                class="img-fluid"
-                src="{$image.bySize.large_default.url}"
-                {if !empty($image.legend)}
+              <picture>
+                {if isset($image.bySize.default_md.sources.avif)}
+                  <source 
+                    srcset="
+                      {$image.bySize.default_md.sources.avif} 320w,
+                      {$image.bySize.product_main.sources.avif} 720w,
+                      {$image.bySize.product_main_2x.sources.avif} 1440w"
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                    type="image/avif"
+                  >
+                {/if}
+
+                {if isset($image.bySize.default_md.sources.webp)}
+                  <source 
+                    srcset="
+                      {$image.bySize.default_md.sources.webp} 320w,
+                      {$image.bySize.product_main.sources.webp} 720w,
+                      {$image.bySize.product_main_2x.sources.webp} 1440w"
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                    type="image/webp"
+                  >
+                {/if}
+
+                <img
+                  class="img-fluid"
+                  srcset="
+                    {$image.bySize.default_md.url} 320w,
+                    {$image.bySize.product_main.url} 720w,
+                    {$image.bySize.product_main_2x.url} 1440w"
+                  sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                  src="{$image.bySize.product_main.url}" 
+                  width="{$image.bySize.product_main.width}"
+                  height="{$image.bySize.product_main.height}"
+                  loading="{if $smarty.foreach.productImages.first}eager{else}lazy{/if}"
                   alt="{$image.legend}"
                   title="{$image.legend}"
-                {else}
-                  alt="{$product.name}"
-                {/if}
-                loading="lazy">
+                  data-full-size-image-url="{$image.bySize.home_default.url}"
+                >
+              </picture>
             </div>
           {/foreach}
         {/block}
@@ -54,19 +83,37 @@
               {/if}
               aria-label="{l s='Product image %number%' d='Shop.Theme.Catalog' sprintf=['%number%' => $key]}"
           >
-              <img
-                class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
-                data-image-medium-src="{$image.bySize.medium_default.url}"
-                data-image-large-src="{$image.bySize.large_default.url}"
-                src="{$image.bySize.home_default.url}"
-                {if !empty($image.legend)}
-                  alt="{$image.legend}"
-                  title="{$image.legend}"
-                {else}
-                  alt="{$product.name}"
+              <picture>
+                {if isset($image.bySize.default_xs.sources.avif)}
+                  <source 
+                    srcset="
+                      {$image.bySize.default_xs.sources.avif},
+                      {$image.bySize.default_m.sources.avif} 2x",
+                  type="image/avif"
+                  >
+                {/if}
+
+                {if isset($image.bySize.default_xs.sources.webp)}
+                  <source 
+                    srcset="
+                      {$image.bySize.default_xs.sources.webp},
+                      {$image.bySize.default_m.sources.webp} 2x"
+                    type="image/webp"
+                  >
                 {/if}
-                loading="lazy"
-            >
+
+                <img
+                  class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
+                  srcset="
+                    {$image.bySize.default_xs.url},
+                    {$image.bySize.default_m.url} 2x"
+                  width="{$image.bySize.default_xs.width}"
+                  height="{$image.bySize.default_xs.height}"
+                  loading="lazy"
+                  alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
+                  title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
+                >
+              </picture>
             </li>
           {/foreach}
         </ul>
@@ -75,12 +122,43 @@
 
     {hook h='displayAfterProductThumbs' product=$product}
   {else}
-      <img 
-        class="img-fluid" 
-        src="{$urls.no_picture_image.bySize.large_default.url}" 
-        width="{$urls.no_picture_image.bySize.large_default.width}"
-        height="{$urls.no_picture_image.bySize.large_default.height}"
+    <picture>
+      {if isset($urls.no_picture_image.bySize.default_md.sources.avif)}
+        <source 
+          srcset="
+            {$urls.no_picture_image.bySize.default_md.sources.avif} 320w,
+            {$urls.no_picture_image.bySize.product_main.sources.avif} 720w,
+            {$urls.no_picture_image.bySize.product_main_2x.sources.avif} 1440w"
+          sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+          type="image/avif"
+        >
+      {/if}
+
+      {if isset($urls.no_picture_image.bySize.default_md.sources.webp)}
+        <source 
+          srcset="
+            {$urls.no_picture_image.bySize.default_md.sources.webp} 320w,
+            {$urls.no_picture_image.bySize.product_main.sources.webp} 720w,
+            {$urls.no_picture_image.bySize.product_main_2x.sources.webp} 1440w"
+          sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+          type="image/webp"
+        >
+      {/if}
+
+      <img
+        class="img-fluid"
+        srcset="
+          {$urls.no_picture_image.bySize.default_md.url} 320w,
+          {$urls.no_picture_image.bySize.product_main.url} 720w,
+          {$urls.no_picture_image.bySize.product_main_2x.url} 1440w"
+        sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+        width="{$urls.no_picture_image.bySize.product_main.width}"
+        height="{$urls.no_picture_image.bySize.product_main.height}"
+        src="{$urls.no_picture_image.bySize.default_md.url}" 
         loading="lazy"
+        alt="{l s='No image available' d='Shop.Theme.Catalog'}"
+        title="{l s='No image available' d='Shop.Theme.Catalog'}"
       >
+    </picture>
   {/if}
 </div>
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index 861193e42..dc79a298e 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -10,10 +10,67 @@
     <a class="product-line__title product-line__item" href="{$product.url}"
       data-id_customization="{$product.id_customization|intval}">
       {if $product.default_image}
-        <img src="{$product.default_image.bySize.cart_default.url}" class="img-fluid" alt="{$product.name|escape:'quotes'}"
-          loading="lazy">
+        <picture>
+          {if isset($product.default_image.bySize.default_xs.sources.avif)}
+            <source 
+              srcset="
+                {$product.default_image.bySize.default_xs.sources.avif},
+                {$product.default_image.bySize.default_m.sources.avif} 2x"
+              type="image/avif"
+            >
+          {/if}
+
+          {if isset($product.default_image.bySize.default_xs.sources.webp)}
+            <source 
+              srcset="
+                {$product.default_image.bySize.default_xs.sources.webp},
+                {$product.default_image.bySize.default_m.sources.webp} 2x"
+              type="image/webp"
+            >
+          {/if}
+
+          <img
+            class="img-fluid"
+            srcset="
+              {$product.default_image.bySize.default_xs.url},
+              {$product.default_image.bySize.default_m.url} 2x"
+            width="{$product.default_image.bySize.default_xs.width}"
+            height="{$product.default_image.bySize.default_xs.height}"
+            loading="lazy"
+            alt="{$product.name|escape:'quotes'}"
+            title="{$product.name|escape:'quotes'}"
+          >
+        </picture>
       {else}
-        <img src="{$urls.no_picture_image.bySize.cart_default.url}" class="img-fluid" loading="lazy" />
+        <picture>
+          {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
+            <source 
+              srcset="
+                {$urls.no_picture_image.bySize.default_xs.sources.avif},
+                {$urls.no_picture_image.bySize.default_m.sources.avif} 2x"
+              type="image/avif"
+            >
+          {/if}
+
+          {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
+            <source 
+              srcset="
+                {$urls.no_picture_image.bySize.default_xs.sources.webp},
+                {$urls.no_picture_image.bySize.default_m.sources.webp} 2x"
+              type="image/webp"
+            >
+          {/if}
+
+          <img
+            class="img-fluid"
+            srcset="
+              {$urls.no_picture_image.bySize.default_xs.url},
+              {$urls.no_picture_image.bySize.default_m.url} 2x"
+            width="{$urls.no_picture_image.bySize.default_xs.width}"
+            height="{$urls.no_picture_image.bySize.default_xs.height}"
+            loading="lazy"
+          >
+        </picture>
       {/if}
     </a>
   </div>
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index b211ecdac..40ba64089 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -6,9 +6,67 @@
   <div class="cart-summary__product__image col-md-2">
     <a href="{$product.url}" title="{$product.name}">
       {if $product.default_image}
-        <img src="{$product.default_image.small.url}" alt="{$product.name}" class="img-fluid rounded" loading="lazy">
+        <picture>
+          {if isset($product.default_image.bySize.default_xs.sources.avif)}
+            <source 
+              srcset="
+                {$product.default_image.bySize.default_xs.sources.avif},
+                {$product.default_image.bySize.default_s.sources.avif} 2x"
+              type="image/avif"
+            >
+          {/if}
+
+          {if isset($product.default_image.bySize.default_xs.sources.webp)}
+            <source 
+              srcset="
+                {$product.default_image.bySize.default_xs.sources.webp},
+                {$product.default_image.bySize.default_s.sources.webp} 2x"
+              type="image/webp"
+            >
+          {/if}
+
+          <img
+            class="img-fluid rounded"
+            srcset="
+              {$product.default_image.bySize.default_xs.url},
+              {$product.default_image.bySize.default_s.url} 2x"
+            width="{$product.default_image.bySize.default_xs.width}"
+            height="{$product.default_image.bySize.default_xs.height}"
+            loading="lazy"
+            alt="{$product.name}"
+            title="{$product.name}"
+          >
+        </picture>
       {else}
-        <img src="{$urls.no_picture_image.bySize.small_default.url}" class="img-fluid" loading="lazy" />
+        <picture>
+          {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
+            <source 
+              srcset="
+                {$urls.no_picture_image.bySize.default_xs.sources.avif},
+                {$urls.no_picture_image.bySize.default_s.sources.avif} 2x"
+              type="image/avif"
+            >
+          {/if}
+
+          {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
+            <source 
+              srcset="
+                {$urls.no_picture_image.bySize.default_xs.sources.webp},
+                {$urls.no_picture_image.bySize.default_s.sources.webp} 2x"
+              type="image/webp"
+            >
+          {/if}
+
+          <img
+            class="img-fluid"
+            srcset="
+              {$urls.no_picture_image.bySize.default_xs.url},
+              {$urls.no_picture_image.bySize.default_s.url} 2x"
+            width="{$urls.no_picture_image.bySize.default_xs.width}"
+            height="{$urls.no_picture_image.bySize.default_xs.height}"
+            loading="lazy"
+          >
+        </picture>
       {/if}
     </a>
   </div>
diff --git a/templates/cms/stores.tpl b/templates/cms/stores.tpl
index d9fc334b6..7c4796ff1 100644
--- a/templates/cms/stores.tpl
+++ b/templates/cms/stores.tpl
@@ -16,18 +16,40 @@
           <div class="card-body">
             <div class="row">
               <div class="col-xl-6 store__picture">
-                <img
-                  src="{$store.image.bySize.stores_default.url}"
-                  width="{$store.image.bySize.stores_default.width}"
-                  height="{$store.image.bySize.stores_default.height}"
-                  class="img-fluid"
-                  {if !empty($store.image.legend)}
-                    alt="{$store.image.legend}"
-                    title="{$store.image.legend}"
-                  {else}
-                    alt="{$store.name}"
+                <picture>
+                  {if isset($store.image.bySize.default_m.sources.avif)}
+                    <source 
+                      srcset="
+                        {$store.image.bySize.default_m.sources.avif},
+                        {$store.image.bySize.default_xl.sources.avif} 2x"
+                      type="image/avif"
+                    >
                   {/if}
-              >
+
+                  {if isset($store.image.bySize.default_m.sources.webp)}
+                    <source 
+                      srcset="
+                        {$store.image.bySize.default_m.sources.webp},
+                        {$store.image.bySize.default_xl.sources.webp} 2x"
+                      type="image/webp"
+                    >
+                  {/if}
+
+                  <img
+                    class="img-fluid rounded"
+                    srcset="
+                      {$store.image.bySize.default_m.url},
+                      {$store.image.bySize.default_xl.url} 2x"
+                    loading="lazy"
+                    width="{$store.image.bySize.default_m.width}"
+                    height="{$store.image.bySize.default_m.height}"
+                    {if !empty($store.image.legend)}
+                      alt="{$store.image.legend}"
+                      title="{$store.image.legend}"
+                    {else}
+                      alt="{$store.name}"
+                    {/if}
+                </picture>
               </div>
               <div class="col-xl-6 store__description d-none d-md-block">
                 <h2 class="h6 store__name">{$store.name}</h2>