Liquid, JavaScript, themes, sales channels
Hi shopify community.
For our e-comm stores www.bravior.at and www.bravior.de have we the need to use responsive images in liquid templates and insert an code for responsive image where we need. So we would like to load differend image sizes depending on users device. The aim is to decrease loading time and increase conversions and SEO rankings. How can we do this? If I use insert following code into liquid template:
<img class="slideshow__image slideshow__image--{{ block.id }} lazyload"
src="{{ block.settings.image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
alt="{{ block.settings.image.alt | escape }}">
and replace src & data-src attribute content with image url, for example https://cdn.shopify.com/s/files/1/0526/1931/3327/files/bravior-magnetfischen_produkt_doppelseitiger-... , it does not work:
<img class="slideshow__image slideshow__image--{{ block.id }} lazyload"
src="https://cdn.shopify.com/s/files/1/0526/1931/3327/files/bravior-magnetfischen_produkt_doppelseitiger-..."
data-src="https://cdn.shopify.com/s/files/1/0526/1931/3327/files/bravior-magnetfischen_produkt_doppelseitiger-..."
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
alt="{{ block.settings.image.alt | escape }}">
The image is not displayed.
What do I wrong? Can someone please post here an functional code for an responsive image for liquid template? Functional code would make the whole situation easier for us. We would just insert other image URLs into it.
Best regards,
Michal
Solved! Go to the solution
This is an accepted solution.
Hi Michalc!
I think you should not use "src" in lazyload.
Here is what I use, hope is usefull:
<img
class="lazyload no-js"
data-src="{{ img_url }}"
data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}"
>
Ok thank you, I will try this code and let you know it if works. My question is that there is no way how to lazyload responsive images? Do we have to completely remove lazyloading? What will be the effect on page speed?
That should work as a lazyloaded and responsive image. The responsiveness is given by the data-width. It should improve your performance if the landing screen doesn't show these images (Ex. images in the footer).
You can look at the lazyload documentation (which I highly recommend) if you want to know more.
Another option for lazyloading is "lozad" which is also very simple and easy to use. Link
Note that images that are show immediately when the page is loaded should not use lazyload, as it slow down the performance.
Hello, I want to know if you have made progress in this regard? I am also facing this problem.
Hi. I didnt make any progress so far. Tested this two codes:
<img
class="lazyload no-js"
data-src="https://cdn.shopify.com/s/files/1/0526/1931/3327/files/bravior-magnetfischen_produkt_doppelseitiger-..."
data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}"
>
And this one:
<img class="slideshow__image slideshow__image--{{ block.id }} lazyload"
src="{{ block.settings.image | img_url: '300x' }}"
data-src="https://cdn.shopify.com/s/files/1/0526/1931/3327/files/bravior-magnetfischen_produkt_magnet282kg_fun..."
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
alt="{{ block.settings.image.alt | escape }}">
But none of them is functional. I contacted theme developers and they will have a look at it.
This is an accepted solution.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024