Remove lazysizes and use browser-default lazyloading

Author: bookernath

templates/components/common/responsive-img.html

@@ -1,16 +1,7 @@
 {{!--
-This file implements the lazysizes srcset pattern (as seen on
-https://github.com/aFarkas/lazysizes#modern-transparent-srcset-pattern) for maximum performance on modern browsers
-and reasonable compatibility with legacy browsers.
-
 There are a few important arguments to know about when using this component:
 `lazyload`:
-    - If set to 'lazyload+lqip', will load a low-res image which will be replaced by lazysizes - ensuring that SOME
-    content is shown immediately on page load. Without LQIP, a transparent gif will be used instead, which reduces
-    the number of requests needed to load the page, making it even faster.
-    - If set to 'lazyload', the browser will not load the full-size image at first, instead the lazysizes plugin will
-        load it progressively after page load. This improves the load speed of the page, but it should be disabled for
-        high-priority above-the-fold images.
+    - If set to 'lazyload', the browser will make a decision about when to load the image based on whether its proximity to the viewport.
     - If set to 'disabled', will not attempt to lazyload the image and instead tell the browser to load it immediately.
         Use this for high-priority images that are above the fold.
 
@@ -30,32 +21,16 @@
     path in the theme config. If a default image is not provided, you'll get an image tag with no image if the primary
     image is undefined.
 
-`lqip_size`:
-    If you want to specify a particular size for the LQIP image, you can do so with this argument. A default of 80
-    pixels wide will be used otherwise. This argument has no effect if the lazyload mode is not "lazyload+lqip".
-
---}}
-<img {{#if image}}{{!-- Get the default image for legacy browsers that do not support srcset
---}}src="{{getImageSrcset image 1x=(default fallback_size '160w')}}" alt="{{image.alt}}" title="{{image.alt}}" {{!--
-  Allow lazysizes to generate the 'sizes' attribute automatically --}}data-sizes="auto"
-  {{#unless lazyload '==' 'disabled'}}
-    {{#if lazyload '==' 'lazyload+lqip'}}
-    {{!-- If we want a LQIP, include it as the default srcset (will be overwritten by lazysizes) --}}
-    srcset="{{getImageSrcset image 1x=(default lqip_size '80w')}}"
-    {{else}}
-      {{!-- If we don't want a LQIP, use a 1px transparent gif for the stand-in image
-            This requires no additional network request, so it's fast --}}
-    srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
-    {{/if}}
-{{/unless}}
-{{!-- If lazyloading is disabled, just use "srcset". If it is not disabled, use "data-srcset" so lazysizes will use
-      this after page load --}}
-{{!--
-Generate the srcset string using the default sizes defined in the helper. This will allow the browser to
-pick the best-sized image based on its own understanding of how it will render the page.
 --}}
-{{#unless lazyload '==' 'disabled'}}data-{{/unless}}srcset="{{getImageSrcset image use_default_sizes=true }}"
-{{else if default_image}}src="{{cdn default_image}}" alt="{{lang 'products.card_default_image_alt'}}"{{/if}}
-class="{{#unless lazyload '==' 'disabled'}}lazyload{{/unless}}{{#if class}} {{class}}{{/if}}"
-{{#if lazyload '==' 'lazyload'}}loading="lazy"{{/if}}
+<img {{#if image}}{{!-- Get the default image for legacy browsers that do not support srcset --}}
+       src="{{getImageSrcset image 1x=(default fallback_size '160w')}}" alt="{{image.alt}}" title="{{image.alt}}"
+     {{!--
+       Generate the srcset string using the default sizes defined in the helper. This will allow the browser to
+       pick the best-sized image based on its own understanding of how it will render the page.
+      --}}
+       srcset="{{getImageSrcset image use_default_sizes=true }}"
+     {{else if default_image}}src="{{cdn default_image}}" alt="{{lang 'products.card_default_image_alt'}}"
+     {{/if}}
+     class="{{#if class}}{{class}}{{/if}}"
+{{#unless lazyload '==' 'disabled'}}loading="lazy"{{/unless}}
 {{otherAttributes}} />