I had a thought last night while mocking up a new site - how does Webflow handle large background images for mobile/tablet devices? If I have a large bg image on the desktop version, which is cut out on a mobile device, does Webflow still load the image regardless? Or is it conditionally loaded dependant on the device?
KM
Thereās some discussion about this here: Automatic Optimization of Images (Size, Dimension) - #9 by ramatsu - Product feedback - Forum | Webflow
I tossed a lot of related ideas into that thread, but images conditionally loaded by media query is one that probably deserves its own topic here, since that would be a great start even if the workflow to provide assets for each were still manual.
@Karl_M - right now, Webflow defers to default browser behavior, and most browsers that weāve tested are optimized to load only the ālatestā image that happens to match via CSS. So if you have a class like so:
.hero { background-image: url(/hero-huge.png); }
But then you go down to the phone device in Webflow, click on āhero-huge.pngā (the Image & Gradient link should be orange since the image is inherited from desktop), and in the settings panel upload a new image (e.g. hero-small.png), Webflow will create a media query:
@media [phone] { .hero { background-image: url(/hero-small.png); } }
When a mobile device (which matches the made up media query above) loads the style sheet, it gets interpreted in one pass, and the browser ignores the initial hero-large.png definition because there is one more specific that replaces it. In this case, only the smaller version will be loaded on the phone.
If you happen to resize your desktop browser to phone dimensions and load your site, it should also load only the smaller version. Then as you resize your screen, it should download the large one once your screen size goes beyond the boundaries of the phone media query.
In your case, if you completely remove an image in mobile view (e.g. the media query code has background-image: none), the large desktop image should not load. If you are seeing a situation where it does, definitely let us know and weāll take a closer look!
Excellent, thanks for that Callmevlad!
Thanks @callmevlad for that clarification that assets for other media queries arenāt loaded. That takes some pressure off on some fronts, and also sets the table nicely for some of the workflow optimizations mentioned in the other thread, like auto-generation of media query-specific versions.
Today, a designer can either live with full-sized (desktop media query) images being downloaded (time) and sized by the browser (processing + time), or can spend a LOT of time up front to manually create, optimize, and upload separate media query versions of each graphic. Or at least the heaviest ones.
What an enormous service and differentiator it would be if Webflow did this for any images that didnāt have explicit media query overrides:
For those who really need to crunch down footprint as far as possible for mobile, it would save TONS of time.
For those who donāt, or donāt realize they need it, it would transparently provide the benefits with zero effort.
For end users, all webflow-generated sites will have far better than average mobile performance.
For Webflow, it would be right in line with how much you care about the user experience of your users.
*@thesergie makes the point in the other thread that designers especially can be fussy about the compression used, which is true. Iām that way. But for most users, this would be fine for 99% of their images. And with any manually uploaded image taking priority, super-finicky edge cases (users or images 
are still accommodated.
@ramatsu, weāre completely on the same page! Weāre actively brainstorming around how to implement auto-optimization for images (for the 99% ), as well as automatically creating device-specific variations to (in most cases, dramatically) speed up Webflow sites, especially on mobile connections. Just wanted you to know that itās definitely on the roadmap.
Hi @callmevlad and other thread members. Reviving this topic from the dead in case there is any new information users should be aware of.
A specific inquiry I have is around optimizing for Retina/High-def screens while balancing site load speed for normal screens.
Iāve uploaded rather large files in order to suit Retina screens (1460px wide). This comes at the cost of site load time for slower connections, with no benefit for normal screens. Is there a best practice for balancing these two demands?