How to load different images depending on screen size?

Hello there,

I have published a website (https://www.logora.com/) that is doing great in page speed on desktop (95/100) but not so good in mobile (60/10).

I found out that it is because the image I load (a scrollable image) is too large for mobile.

Therefore, I would like to remove the image section on mobile.

I got how to “hide” the image on a specific size but it remains loaded and ruins my page speed efficiency.

Thank you very much for your help, I am a Webflow beginner (and I love it).

Webflow does not have a <picture> element but you just need a plan that supports custom code and you need the URI for the assets you want to use.

The <picture> HTML element element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.