Improve srcset/sizes attribute to remove google pagespeed warnings about too large images on mobile devices

[Vova Yatsyuk]

[Oleksandr Krasko]

https://github.com/swissup/module-easycatalogimg/blob/master/Block/SubcategoriesList.php#L331

[Oleksandr Krasko]

stash

diff --git a/Block/SubcategoriesList.php b/Block/SubcategoriesList.php
index 0f29471..ccf917f 100644
--- a/Block/SubcategoriesList.php
+++ b/Block/SubcategoriesList.php
@@ -341,6 +341,65 @@ class SubcategoriesList extends \Magento\Framework\View\Element\Template impleme
         return sprintf('%s 1x, %s 2x', $x1, $x2);
     }
 
+    /**
+     * Build `srcset` and `sizes` attributes for image
+     *
+     * @return array
+     */
+    public function getResponsiveAttributes($category, $originalWidth, $originalHeight)
+    {
+        $ratio = $originalHeight / $originalWidth;
+
+        $screens = [320, 480, 640, 768, 1024/*, 1440/*, 2560*/];
+        if (is_array($screens) && !empty($screens) && $originalWidth) {
+            $srcsetAttr = [];
+            $sizesAttr = [];
+            foreach ($screens as $screenWidth) {
+                if ($screenWidth < 640) {
+                    $columnsCount = 1;
+                } elseif ($screenWidth < 768) {
+                    $columnsCount = 2;
+                } else {
+                    $columnsCount = $this->getColumnCount();
+                }
+
+                $width = ceil($screenWidth / $columnsCount);
+                $height = ceil($width * $ratio);
+
+                if (!$width) {
+                    continue;
+                }
+
+//                if ($width >= $originalWidth) {
+//                    continue;
+//                }
+                $imageSrc = $this->getImageSrc($category, $width, $height);
+
+                if (substr($imageSrc, -4) === '.svg'
+                    || substr($imageSrc, 0, 18) === 'data:image/svg+xml'
+                ) {
+                    break;
+                }
+
+                $sizesAttr[] = "(max-width: {$screenWidth}px) {$width}px";
+                $srcsetAttr[/*$width*/] = "{$imageSrc} {$width}w";
+            }
+
+//            $srcsetAttr[] = "{$this->getImageSrc($category, $originalWidth, $originalHeight)} {$originalWidth}w";
+//            $sizesAttr[] = "{$originalWidth}px";
+
+//            $srcsetAttr[] = "{$this->getImageSrc($category, $originalWidth, $originalHeight)} 1x";
+//            $srcsetAttr[] = "{$this->getImageSrc($category, $originalWidth * 2, $originalHeight * 2)} 2x";
+
+            return [
+                'srcset' => implode(', ', $srcsetAttr),
+                'sizes' => implode(', ', $sizesAttr)
+            ];
+        }
+
+        return [];
+    }
+
     /**
      * Check if image is svg
      * @param  String $filepath path to file
diff --git a/view/frontend/templates/list.phtml b/view/frontend/templates/list.phtml
index d4016f0..ae8aaff 100644
--- a/view/frontend/templates/list.phtml
+++ b/view/frontend/templates/list.phtml
@@ -44,14 +44,18 @@
                 } else if (!empty($height)) {
                     $style = 'height: ' . (is_numeric($height) ? $height . 'px' : $height);
                 }
-                $srcset = $block->getImageSrcset($_category, $width, $height);
+                $rAttrs = $block->getResponsiveAttributes($_category, $width, $height);
+                $srcset = $rAttrs['srcset'];
+                $sizes = $rAttrs['sizes'];
             ?>
+
             <a href="<?= $block->getCategoryUrl($_category) ?>"
                 title="<?= $block->escapeHtml($_category->getName()) ?>"
                 class="image"
             ><img alt="<?= $block->escapeHtml($_category->getName()) ?>"
                 src="<?= $block->getImageSrc($_category, $width, $height) ?>"
                 <?= $srcset ? 'srcset="' . $srcset . '"' : '' ?>
+                <?= $sizes ? 'sizes="' . $sizes . '"' : '' ?>
                 <?= $width  ? 'width="' . $width . '"' : '' ?>
                 <?= $height ? 'height="' . $height . '"' : '' ?>
                 <?= $style  ? 'style="' . $style . '"' : '' ?>

[Vova Yatsyuk]

15306e3