Remove lazysizes and use browser-default lazyloading

package.json

@@ -16,7 +16,6 @@
     "foundation-sites": "^5.5.3",
     "jquery": "^3.5.1",
     "jstree": "^3.3.12",
-    "lazysizes": "5.2.2",
     "lodash": "^4.17.21",
     "nanobar": "^0.4.2",
     "nod-validate": "^2.0.12",

templates/components/account/order-contents.html

@@ -33,6 +33,7 @@ <h5 class="account-listShipping-title">{{lang 'account.orders.details.ship_to_mu
                         fallback_size=../theme_settings.productthumb_size
                         lazyload=../theme_settings.lazyload_mode
                         default_image=../theme_settings.default_image_product
+                        sizes=(concat (first (split ../theme_settings.productthumb_size 'x')) 'px')
                     }}
                 {{/if}}
                 {{#unless refunded}}

templates/components/account/orders-list.html

@@ -17,6 +17,7 @@ <h3 class="account-heading">{{lang 'account.orders.heading' }}</h3>
                         fallback_size=../theme_settings.productthumb_size
                         lazyload=../theme_settings.lazyload_mode
                         default_image=../theme_settings.default_image_product
+                        sizes=(concat (first (split ../theme_settings.productthumb_size 'x')) 'px')
                     }}
                 {{/if}}
             </div>

templates/components/account/returns-list.html

@@ -9,6 +9,7 @@ <h3 class="account-heading">{{lang 'account.returns.heading' }}</h3>
                     image=product.image
                     fallback_size=../theme_settings.productthumb_size
                     lazyload=../theme_settings.lazyload_mode
+                    sizes=(concat (first (split ../theme_settings.productthumb_size 'x')) 'px')
                 }}
             </div>
             <div class="account-product-body">

templates/components/blog/post.html

@@ -7,6 +7,7 @@
                         image=post.thumbnail
                         fallback_size=theme_settings.blog_size
                         lazyload=theme_settings.lazyload_mode
+                        sizes=(concat (first (split theme_settings.blog_size 'x')) 'px')
                     }}
                 </a>
             </figure>

templates/components/carousel.html

@@ -27,13 +27,15 @@
                     class="heroCarousel-image"
                     fallback_size='1280w'
                     lazyload='disabled'
+                    sizes='(max-width: 640px) 640px, (max-width: 1280px) 1280px, (max-width: 1920px) 1920px, 2560px'
                 }}
             {{else}}
                 {{> components/common/responsive-img
                     image=stencil_image
                     class="heroCarousel-image"
                     fallback_size='1280w'
                     lazyload='lazyload'
+                    sizes='(max-width: 640px) 640px, (max-width: 1280px) 1280px, (max-width: 1920px) 1920px, 2560px'
                 }}
             {{/if}}
             {{#if button_text}}

templates/components/cart/content.html

@@ -25,6 +25,7 @@
                             fallback_size=../theme_settings.productthumb_size
                             lazyload="lazyload"
                             default_image=../theme_settings.default_image_product
+                            sizes='80px'
                         }}
                     {{/if}}
                 </td>

templates/components/cart/preview.html

@@ -61,6 +61,7 @@ <h1 class="modal-header-title">
                             fallback_size=../theme_settings.product_size
                             lazyload=../theme_settings.lazyload_mode
                             default_image=../theme_settings.default_image_product
+                            sizes='(min-width: 800px) 80px, 640px'
                         }}
                     </div>
                 </figure>

templates/components/common/cart-preview.html

@@ -17,6 +17,7 @@
                                 fallback_size=../theme_settings.productthumb_size
                                 lazyload=../theme_settings.lazyload_mode
                                 default_image=../theme_settings.default_image_product
+                                sizes="160px"
                             }}
                         {{/if}}
                     </div>

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,17 @@
     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}}
+     {{#if class}}class="{{class}}"{{/if}}
+     {{#if sizes}}sizes="{{sizes}}"{{/if}}
+{{#unless lazyload '==' 'disabled'}}loading="lazy"{{/unless}}
 {{otherAttributes}} />

templates/components/products/card.html

@@ -72,6 +72,7 @@
                     fallback_size=theme_settings.productgallery_size
                     lazyload=theme_settings.lazyload_mode
                     default_image=theme_settings.default_image_product
+                    sizes='320px'
                 }}
             </div>
         </a>

templates/components/products/list-item.html

@@ -57,6 +57,7 @@
             fallback_size=theme_settings.productgallery_size
             lazyload=theme_settings.lazyload_mode
             default_image=theme_settings.default_image_product
+            sizes='320px'
         }}
         </a>
         {{#unless hide_product_quick_view}}

templates/components/products/modals/writeReview.html

@@ -15,6 +15,7 @@ <h2 class="modal-header-title">{{lang 'products.reviews.write_a_review'}}</h2>
                     fallback_size=theme_settings.product_size
                     lazyload=theme_settings.lazyload_mode
                     default_image=theme_settings.default_image_product
+                    sizes=(concat (first (split theme_settings.product_size 'x')) 'px')
                 }}
             </div>
             <h6 class="product-brand">{{ product.brand.name }}</h6>

templates/components/products/options/product-list.html

@@ -26,7 +26,8 @@
                             {{> components/common/responsive-img
                                 image=image
                                 class="productOptions-list-item-image"
-                                lazyload='lazyload+lqip'
+                                lazyload='lazyload'
+                                sizes='80px'
                             }}
                         </figure>
                     {{/if}}

templates/components/products/product-view.html

@@ -56,6 +56,7 @@
                     lazyload=theme_settings.lazyload_mode
                     default_image=theme_settings.default_image_product
                     otherAttributes="data-main-image"
+                    sizes=(concat (first (split theme_settings.product_size 'x')) 'px')
                 }}
                 {{!-- Remove the surrounding a-element if there is no main image. --}}
                 {{#if product.main_image}}
@@ -85,7 +86,8 @@
                         image=this
                         fallback_size=../theme_settings.productview_thumb_size
                         lazyload=../theme_settings.lazyload_mode
-                    }}
+                        sizes=(concat (first (split ../theme_settings.productview_thumb_size 'x')) 'px')
+                        }}
                     </a>
                 </li>
             {{/each}}

templates/layout/base.html

@@ -24,7 +24,6 @@
             window.lazySizesConfig = window.lazySizesConfig || {};
             window.lazySizesConfig.loadMode = 1;
         </script>
-        <script async src="{{cdn 'assets/dist/theme-bundle.head_async.js'}}"></script>
 
         <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
 

templates/pages/brand.html

@@ -21,6 +21,7 @@
             image=brand.image
             fallback_size=theme_settings.thumb_size
             lazyload='disabled'
+            sizes=(concat (first (split theme_settings.thumb_size 'x')) 'px')
         }}
     </div>
 {{/if}}

templates/pages/brands.html

@@ -22,6 +22,8 @@ <h1 class="page-heading">{{lang 'brand.label'}}</h1>
                                     fallback_size=../theme_settings.brand_size
                                     lazyload=../theme_settings.lazyload_mode
                                     default_image=../theme_settings.default_image_brand
+                                    sizes='320px'
+                                    sizes=(concat (first (split ../theme_settings.brand_size 'x')) 'px')
                                 }}
                             </div>
                         </a>

templates/pages/category.html

@@ -24,6 +24,7 @@
         fallback_size=theme_settings.zoom_size
         lazyload=theme_settings.lazyload_mode
         class="category-header-image"
+        sizes=(concat (first (split ../theme_settings.zoom_size 'x')) 'px')
     }}
 {{/if}}
 {{#unless theme_settings.hide_category_page_heading }}

templates/pages/compare.html

@@ -21,6 +21,7 @@ <h1 class="page-heading">{{lang 'compare.header' products=comparisons.length}}</
                                         fallback_size=../theme_settings.product_size
                                         lazyload=../theme_settings.lazyload_mode
                                         default_image=../theme_settings.default_image_product
+                                        sizes=(concat (first (split ../theme_settings.product_size 'x')) 'px')
                                     }}
                                 </div>
                             </a>

webpack.common.js

@@ -10,7 +10,6 @@ module.exports = {
     context: __dirname,
     entry: {
         main: './assets/js/app.js',
-        head_async: ['lazysizes'],
         polyfills: './assets/js/polyfills.js',
     },
     module: {
@@ -75,7 +74,6 @@ module.exports = {
         alias: {
             jquery: path.resolve(__dirname, 'node_modules/jquery/dist/jquery.min.js'),
             jstree: path.resolve(__dirname, 'node_modules/jstree/dist/jstree.min.js'),
-            lazysizes: path.resolve(__dirname, 'node_modules/lazysizes/lazysizes.min.js'),
             nanobar: path.resolve(__dirname, 'node_modules/nanobar/nanobar.min.js'),
             'slick-carousel': path.resolve(__dirname, 'node_modules/slick-carousel/slick/slick.min.js'),
             'svg-injector': path.resolve(__dirname, 'node_modules/svg-injector/dist/svg-injector.min.js'),