How to load different images depending on screen size?

Community resources
1

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).

2

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.

1 Like
4

Hi,

Great job on achieving a solid page speed score on desktop! For improving your mobile performance, particularly with the large scrollable image, here are a few suggestions:

Optimize Images for Mobile Devices:

  1. Resize the Image for Mobile: Ensure the image is appropriately sized for mobile screens. Use Webflow’s Responsive Images or the srcset attribute to load smaller versions for smaller screens.
  2. Compress the Image: Use tools like TinyPNG or Squoosh to reduce the file size without compromising quality.
  3. Convert to WebP: Serve the image in WebP format for better compression and faster loading.

Enable Lazy Loading:
Lazy loading can significantly improve initial load times by deferring the loading of images until they come into view.

  1. In Webflow: You can enable lazy loading in the Image Settings for your scrollable image. This will ensure it only loads when the user scrolls to it.

Recheck Performance:
After implementing these changes, test your site again using tools like Google PageSpeed Insights, Lighthouse, or Webflow’s built-in performance analyzer to measure the impact.

Alternative, if you do not want to invest much time on optimizing yourself, you can try our speed optimization tool called Website Speedy that comes with 14 days trial. It will do the optimization automatically for you.

(Disclaimer: We are the developer of this tool and are happy to answer any questions you may have.)