ENGCOM-7006: Catalog image lazy load #27033

Author: VladimirZaets

app/code/Magento/Catalog/view/frontend/templates/product/image.phtml

@@ -4,11 +4,15 @@
  * See COPYING.txt for license details.
  */
 ?>
-<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>
+<?php
+/** @var $block \Magento\Catalog\Block\Product\Image */
+/** @var $escaper \Magento\Framework\Escaper */
+?>
 
-<img class="photo image <?= $block->escapeHtmlAttr($block->getClass()) ?>"
-    <?= $block->escapeHtml($block->getCustomAttributes()) ?>
-    src="<?= $block->escapeUrl($block->getImageUrl()) ?>"
-    width="<?= $block->escapeHtmlAttr($block->getWidth()) ?>"
-    height="<?= $block->escapeHtmlAttr($block->getHeight()) ?>"
-    alt="<?= /* @noEscape */ $block->stripTags($block->getLabel(), null, true) ?>" />
+<img class="photo image <?= $escaper->escapeHtmlAttr($block->getClass()) ?>"
+    <?= $escaper->escapeHtml($block->getCustomAttributes()) ?>
+    src="<?= $escaper->escapeUrl($block->getImageUrl()) ?>"
+    loading="lazy"
+    width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
+    height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
+    alt="<?= $escaper->escapeHtmlAttr($block->getLabel()) ?>" />

app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml

@@ -4,16 +4,20 @@
  * See COPYING.txt for license details.
  */
 ?>
-<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>
+<?php
+/** @var $block \Magento\Catalog\Block\Product\Image */
+/** @var $escaper \Magento\Framework\Escaper */
+?>
 
 <span class="product-image-container"
-      style="width:<?= $block->escapeHtmlAttr($block->getWidth()) ?>px;">
+      style="width:<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>px;">
     <span class="product-image-wrapper"
           style="padding-bottom: <?= ($block->getRatio() * 100) ?>%;">
-        <img class="<?= $block->escapeHtmlAttr($block->getClass()) ?>"
-            <?= $block->escapeHtmlAttr($block->getCustomAttributes()) ?>
-            src="<?= $block->escapeUrl($block->getImageUrl()) ?>"
-            max-width="<?= $block->escapeHtmlAttr($block->getWidth()) ?>"
-            max-height="<?= $block->escapeHtmlAttr($block->getHeight()) ?>"
-            alt="<?= /* @noEscape */ $block->stripTags($block->getLabel(), null, true) ?>"/></span>
+        <img class="<?= $escaper->escapeHtmlAttr($block->getClass()) ?>"
+            <?= $escaper->escapeHtmlAttr($block->getCustomAttributes()) ?>
+            src="<?= $escaper->escapeUrl($block->getImageUrl()) ?>"
+            loading="lazy"
+            width="<?= $escaper->escapeHtmlAttr($block->getWidth()) ?>"
+            height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
+            alt="<?= $escaper->escapeHtmlAttr($block->getLabel()) ?>"/></span>
 </span>