diff --git a/modules/productcomments/views/templates/hook/post-comment-modal.tpl b/modules/productcomments/views/templates/hook/post-comment-modal.tpl
index 93367b52e..7de4ac83c 100644
--- a/modules/productcomments/views/templates/hook/post-comment-modal.tpl
+++ b/modules/productcomments/views/templates/hook/post-comment-modal.tpl
@@ -29,10 +29,67 @@
 
                 {block name='product_cover'}
                   <div class="product-cover">
-                    {if $product.cover}
-                      <img class="js-qv-product-cover rounded" src="{$product.cover.bySize.medium_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
+                    {if !empty($product.cover)}
+                      <picture>
+                        {if isset($product.cover.bySize.default_xs.sources.avif)}
+                          <source 
+                            srcset="
+                              {$product.cover.bySize.default_xs.sources.avif},
+                              {$product.cover.bySize.default_m.sources.avif} 2x"
+                            type="image/avif"
+                          >
+                        {/if}
+
+                        {if isset($product.cover.bySize.default_xs.sources.webp)}
+                          <source 
+                            srcset="
+                              {$product.cover.bySize.default_xs.sources.webp},
+                              {$product.cover.bySize.default_m.sources.webp} 2x"
+                            type="image/webp"
+                          >
+                        {/if}
+
+                        <img
+                          class="js-qv-product-cover rounded"
+                          srcset="
+                            {$product.cover.bySize.default_xs.url},
+                            {$product.cover.bySize.default_m.url} 2x"
+                          loading="lazy"
+                          width="{$product.cover.bySize.default_xs.width}"
+                          height="{$product.cover.bySize.default_xs.height}"
+                          alt="{$product.cover.legend}"
+                          title="{$product.cover.legend}"
+                      </picture>
                     {else}
-                      <img src="{$urls.no_picture_image.bySize.large_default.url nofilter}" style="width:100%;" class="rounded">
+                      <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="rounded"
+                          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}
                   </div>
                 {/block}
diff --git a/templates/catalog/_partials/miniatures/pack-product.tpl b/templates/catalog/_partials/miniatures/pack-product.tpl
index 6ba7e561e..78e0c5006 100644
--- a/templates/catalog/_partials/miniatures/pack-product.tpl
+++ b/templates/catalog/_partials/miniatures/pack-product.tpl
@@ -6,20 +6,67 @@
   <article class="product-pack__item rounded mb-2 p-2">
     <a href="{$product.url}" title="{$product.name}" class="row align-items-center">
       <div class="product-pack__image col-2">
-        {if !empty($product.default_image.medium)}
-          <img
-            src="{$product.default_image.medium.url}"
-            {if !empty($product.default_image.legend)}
+        {if !empty($product.default_image)}
+          <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 rounded"
+              srcset="
+                {$product.default_image.bySize.default_xs.url},
+                {$product.default_image.bySize.default_m.url} 2x"
+              loading="lazy"
+              width="{$product.default_image.bySize.default_xs.width}"
+              height="{$product.default_image.bySize.default_xs.height}"
               alt="{$product.default_image.legend}"
               title="{$product.default_image.legend}"
-            {else}
-              alt="{$product.name}"
-            {/if}
-            loading="lazy"
-            class="img-fluid rounded"
-          >
+          </picture>
         {else}
-          <img src="{$urls.no_picture_image.bySize.medium_default.url}" loading="lazy" class="img-fluid rounded" />
+          <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 rounded"
+              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}
       </div>
 
diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index fc2614da5..0a47a0188 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -50,8 +50,8 @@
                   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}"
+                  alt="{$product.cover.legend}"
+                  title="{$product.cover.legend}"
                   data-full-size-image-url="{$product.cover.bySize.home_default.url}"
                 >
               </picture>
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index f459644a5..0904b584b 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -110,8 +110,8 @@
                   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}"
+                  alt="{$image.legend}"
+                  title="{$image.legend}"
                 >
               </picture>
             </li>
diff --git a/templates/catalog/_partials/product-images-modal.tpl b/templates/catalog/_partials/product-images-modal.tpl
index 409f6533a..530ee167b 100644
--- a/templates/catalog/_partials/product-images-modal.tpl
+++ b/templates/catalog/_partials/product-images-modal.tpl
@@ -13,12 +13,8 @@
               class="js-modal-product-cover product-cover-modal"
               width="{$product.default_image.bySize.large_default.width}"
               src="{$product.default_image.bySize.large_default.url}"
-              {if !empty($product.default_image.legend)}
-                alt="{$product.default_image.legend}"
-                title="{$product.default_image.legend}"
-              {else}
-                alt="{$product.name}"
-              {/if}
+              alt="{$product.default_image.legend}"
+              title="{$product.default_image.legend}"
               height="{$product.default_image.bySize.large_default.height}"
            >
           {else}
@@ -40,12 +36,8 @@
                       data-image-large-src="{$image.large.url}"
                       class="thumb js-modal-thumb"
                       src="{$image.medium.url}"
-                      {if !empty($image.legend)}
-                        alt="{$image.legend}"
-                        title="{$image.legend}"
-                      {else}
-                        alt="{$product.name}"
-                      {/if}
+                      alt="{$image.legend}"
+                      title="{$image.legend}"
                       width="{$image.medium.width}"
                       height="148"
                    >
diff --git a/templates/checkout/_partials/order-confirmation-table.tpl b/templates/checkout/_partials/order-confirmation-table.tpl
index 5960887de..66b198c33 100644
--- a/templates/checkout/_partials/order-confirmation-table.tpl
+++ b/templates/checkout/_partials/order-confirmation-table.tpl
@@ -11,9 +11,66 @@
 
       <div class="item__image col-lg-1 col-md-2 col-sm-2 col-3 mb-2 mb-md-0">
           {if !empty($product.default_image)}
-            <img src="{$product.default_image.medium.url}" loading="lazy" class="img-fluid" />
+            <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"
+                loading="lazy"
+                width="{$product.default_image.bySize.default_xs.width}"
+                height="{$product.default_image.bySize.default_xs.height}"
+                alt="{$product.default_image.legend}"
+                title="{$product.default_image.legend}"
+            </picture>
           {else}
-            <img src="{$urls.no_picture_image.bySize.medium_default.url}" loading="lazy" class="img-fluid" />
+            <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}
       </div>
 
diff --git a/templates/customer/_partials/order-detail-no-return.tpl b/templates/customer/_partials/order-detail-no-return.tpl
index 6b982e5af..f31ae85f8 100644
--- a/templates/customer/_partials/order-detail-no-return.tpl
+++ b/templates/customer/_partials/order-detail-no-return.tpl
@@ -18,13 +18,67 @@
         <tr>
           <td>
             {if $product.cover}
-              <img src="{$product.cover.bySize.small_default.url}"
-                alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
-                loading="lazy" data-full-size-image-url="{$product.cover.large.url}" width="64" height="64"
-                class="order-products__image card-img-top w-auto" />
+              <picture>
+                {if isset($product.cover.bySize.default_xs.sources.avif)}
+                  <source 
+                    srcset="
+                      {$product.cover.bySize.default_xs.sources.avif},
+                      {$product.cover.bySize.default_m.sources.avif} 2x",
+                    type="image/avif"
+                  >
+                {/if}
+
+                {if isset($product.cover.bySize.default_xs.sources.webp)}
+                  <source 
+                    srcset="
+                      {$product.cover.bySize.default_xs.sources.webp},
+                      {$product.cover.bySize.default_m.sources.webp} 2x"
+                    type="image/webp"
+                  >
+                {/if}
+
+                <img
+                  class="order-products__image card-img-top w-auto"
+                  srcset="
+                    {$product.cover.bySize.default_xs.url},
+                    {$product.cover.bySize.default_m.url} 2x"
+                  width="{$product.cover.bySize.default_xs.width}"
+                  height="{$product.cover.bySize.default_xs.height}"
+                  loading="lazy"
+                  alt="{$product.cover.legend}"
+                  title="{$product.cover.legend}"
+                >
+              </picture>
             {else}
-              <img src="{$urls.no_picture_image.bySize.small_default.url}" loading="lazy" width="64" height="64"
-                class="order-products__image card-img-top w-auto" />
+              <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="order-products__image card-img-top w-auto"
+                  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}
           </td>
 
@@ -91,7 +145,7 @@
             <div class="col-4">
               {if $product.cover}
                 <img src="{$product.cover.bySize.small_default.url}"
-                  alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
+                  alt="{$product.cover.legend}"
                   loading="lazy" data-full-size-image-url="{$product.cover.large.url}" width="64" height="64"
                   class="order-products__image card-img-top w-auto" />
               {else}
diff --git a/templates/customer/_partials/order-detail-return.tpl b/templates/customer/_partials/order-detail-return.tpl
index 423025390..81e1a2e37 100644
--- a/templates/customer/_partials/order-detail-return.tpl
+++ b/templates/customer/_partials/order-detail-return.tpl
@@ -120,13 +120,67 @@
               </div>
               <div class="col-4">
                 {if $product.cover}
-                  <img src="{$product.cover.bySize.small_default.url}"
-                    alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
-                    loading="lazy" data-full-size-image-url="{$product.cover.large.url}" width="64" height="64"
-                    class="order-products__image card-img-top w-auto" />
+                  <picture>
+                    {if isset($product.cover.bySize.default_xs.sources.avif)}
+                      <source 
+                        srcset="
+                          {$product.cover.bySize.default_xs.sources.avif},
+                          {$product.cover.bySize.default_m.sources.avif} 2x",
+                        type="image/avif"
+                      >
+                    {/if}
+
+                    {if isset($product.cover.bySize.default_xs.sources.webp)}
+                      <source 
+                        srcset="
+                          {$product.cover.bySize.default_xs.sources.webp},
+                          {$product.cover.bySize.default_m.sources.webp} 2x"
+                        type="image/webp"
+                      >
+                    {/if}
+
+                    <img
+                      class="order-products__image card-img-top w-auto"
+                      srcset="
+                        {$product.cover.bySize.default_xs.url},
+                        {$product.cover.bySize.default_m.url} 2x"
+                      width="{$product.cover.bySize.default_xs.width}"
+                      height="{$product.cover.bySize.default_xs.height}"
+                      loading="lazy"
+                      alt="{$product.cover.legend}"
+                      title="{$product.cover.legend}"
+                    >
+                  </picture>
                 {else}
-                  <img src="{$urls.no_picture_image.bySize.small_default.url}" loading="lazy" width="64" height="64"
-                    class="order-products__image card-img-top w-auto" />
+                  <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="order-products__image card-img-top w-auto"
+                      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}
               </div>