srcset attribute

You need to disable the responsiveness setting in Webflow 😊

Hi @Georgy Rakita, the srcset is coming from webflow when the responsive toggle is on on. During the conversion we actually delete the srcset. When was your last conversion?

Hi @jonas.halbstark - likely at the day when I posted the screenshot!

I am starting to check "disable responsiveness" in Webflow now and do li-attribute:srcset="{{ product.featured_image.src | '360x400', crop: 'center' }} 1x, {{ product.featured_image.src | '720x800', crop: 'center' }} 2x" manually now, works great - but when I don't check it I get these default srcsets for some reason - and what's strange is that they have asset_url applied to them, like Liquify actually picked them up and modified them.

okay. We will check again.
But thats a nice solution 🙂

can you check one more time with responsive mode enabled? that should already be solved.

this is something I was curious about as well. What's the best practice to use srcset, whether for product images or simply images in content? As Georgy is doing?

If we use an image picker setting (li-settings:image) in a section, will that automatically use srcset attributes when we customize the theme in Shopify?

@jason I think as @jonas.halbstark said they currently just delete the srcset alltogether from an image, so using li-attribute:srcset is the only way to have it.
I've added it to all images, making sure to include both 1x and 2x sizes - and for images that are 100vw, I've written more complicated ones to really optimize them and make sure they are loaded in exactly the size they are needed.

what you can also try @Georgy Rakita to use the image_tag on an li-object. just place it on a div like this: li-object="product | image_url: width: 200 | image_tag" and then shopify will create a img element with all the necessary attribute applied. This will be rernderd then:
<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200" alt="Health potion" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200 200w" width="200" height="133">

https://shopify.dev/docs/api/liquid/filters/image_tag