Does the Dawn theme support automatic lazy loading for images?

[tobychen]

Hi,

I see that new released Dawn theme didn't include lazysizes plugin for lazy loading of the images. The Debut theme has had it.

This is the code I see from main-collection-banner.liquid.

<img srcset="{%- if collection.image.width >= 165 -%}{{ collection.image | img_url: '165x' }} 165w,{%- endif -%}
          {%- if collection.image.width >= 360 -%}{{ collection.image | img_url: '360x' }} 360w,{%- endif -%}
          {%- if collection.image.width >= 535 -%}{{ collection.image | img_url: '535x' }} 535w,{%- endif -%}
          {%- if collection.image.width >= 720 -%}{{ collection.image | img_url: '720x' }} 720w,{%- endif -%}
          {%- if collection.image.width >= 940 -%}{{ collection.image | img_url: '940x' }} 940w,{%- endif -%}
          {%- if collection.image.width >= 1070 -%}{{ collection.image | img_url: '1070x' }} 1070w{%- endif -%}"
          src="{{ collection.image | img_url: '533x' }}"
          sizes="(min-width: 1100px) 535px, (min-width: 750px) calc(50vw - 130px), calc(50vw - 55px)"
          alt="{{ collection.title | escape }}"
          loading="lazy"
          width="{{ collection.image.width }}"
          height="{{ collection.image.height }}"
>

Does new theme support lazy loading automatically by using attribute loading="lazy" If not, do I have to include lazysizes manually?

[Amarjyoti · Accepted solution]

Hey @tobychen,

The Dawn theme uses browser-level lazy loading and it doesn't require any additional plugins. You can read more about Browser level lazy loading from here.

Thanks!!

[nagumi]

Hey, does this mean that if I just stick in an "<img src=...>" I'll get lazyloading? or do I need to add something different?

Modifying footer.liquid, to be specific.

[tobychen]

@nagumi You have to use like this <img src="..." loading=lazy>.

[nagumi]

Thanks!