Site speed

What are your scores like in the desktop and mobile?

This is desktop

And mobile:

I know that Shopify is doing some compressions, but for example the header image shows with 800kb

would image_tag https://shopify.dev/docs/api/liquid/filters/image_tag help on all images?

Yes that would work. Currently li-settings:image only supports large images. But i would recommend to download it, compress it and replace it

you could also use li-settings:custom for a image selector and then use li-object:src="section.settings.image | image_url: width: 200"

for example

Okay thanks. I'm not a developer—does adding all these custom attributes slow the site down? Can I apply a global setting like srcset to have Shopify automatically create the highest quality, smallest version of every site image? I'm looking for solutions that can efficiently make every Liquify site we manage much faster to load.

Hi @Seth, adding custom attributes does not slow the site down.
You can also work with the image_tag filter from shopify liquid: https://shopify.dev/docs/api/liquid/filters/image_tag

Why do the images in the template not use image_tag?

Hi @Seth, we heard you feedback and implemented a filter tag on settings image. In the future you can use | image_url: 'master' also in the webflow attribute. We currntly testing the feature

Not sure what that means, but sounds great 😅 I am also seeing this message https://shopify.dev/docs/api/liquid/filters/img_url****

they moved from img_url to image_url 🙂

just a naming thing

Got it.. so the shopify.dev example is: {{ product | image_url: width: 200 | image_tag }}
And in the starter template we have: li-object:src="image.src | product_img_url: 'master'"

Is there any performance difference?

using master gives you the full resolution of the image.. so they it was uploaded. if you dont need the this size you can also use a specific with. thats will improve your performance

good example is here: https://www.aufunddavon.com/products/damen-lutok-kapuzen-isolationsjacke

big images use: image.src | product_img_url: 'grande'
Small images use: image.src | product_img_url: 'small'

that makes a noticable diffrent

Alright, does putting | image_tag at the end do anything?

thats only important if you render the image without an image tag. You could also use it like this:
{{ product | img_tag }}
and to whole image tag will be rendered like this:
<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new_small.jpg?v=1683744744" alt="" />

Hey @jonas.halbstark , could you clarify what you mean when you say that you've added the img_url filter? Do you mean that it will be added as a setting to images in the Shopify Editor?

it is already added during the conversion. But in the future you can set it in webflow..