Variable image sizes/weight based on device

We are trying to resolve the question for our site SwitchUp how to adjust the image size based on device. Currently we are serving the same image for all devices. And as Google Page Speed Insights points out, we should be compressing them. About 3MB of images are loading on smartphones, despite the much smaller screen size. At the same time, we seek to provide higher resolution images to desktop users with larger screens.

Hence, we are wondering how to overcome this issue and whether there are solutions that someone is already using in combination with webflow? In particular, I wonder whether using SRCSET, Picture or Picturefill may be approaches that could work with webflow? (particularly given that SRCSET seems to be supported by the latest versions of iOS and Android)

I am not a developer, hence, excuse my limited knowledge in case there is an easy solution out there to resolve this.

Which I just read is below the average page loaded on mobile the last past month.

This is somewhere funny because on a site with @2x assets, a mobile handset will call an image 4 times as big as the one called by a desktop browser (:

But I understand your concern, it’s all about to give each breakpoint an adapted and optimized image. So rather than “based on device”, it’s about “based on the responsive scenario”. I don’t have any solution to provide, never really had time to push the enveloppe so far. I’m really interested to hear about a solution though. I’m less concerned about saving mobile bandwidth than providing luxurious splendid big images to who decide to browse fullscreen on his 27" monitor.

For a one time banner you can achieve that in Webflow but it’s kind of painful. Creating multiple copies of an image set to 100% and piling them up in the container, then for each, declaring in the settings for which device it’s displayed. This way I’m sure, only the desired image is loaded for a given device. Long to do, hard to maintain, not recommended for more than a few images.

Looking at Switchup, I see what you mean, and your problem is beyond responsivity. Breakpoints are set for a given width, and in the case of Switchup, where you have the big portraits, it’s more about how high the browser is, actually, as your sections are set to 100% height, and the size of the image vary with the browser height.

Vincent,

I am confused by your multiple copy approach. I thought hidden images loaded on all devices? So say you have 4 versions of the same image would they not load on all devices?

-Brian

It depends. Browsers tend to load them less and less. Also if you display:none a div that has an image as a background, no browser loads the image.