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:
- Create media query-specific sizes of each image (at the sizes the desktop version would otherwise be scaled to by the browser).
- For pngs, run them through the tinypng API. For jpgs, use a default like 60 or 70%, and maybe add a slider so the user could choose.*
- Auto-name each like “wf-phone-landscape-[image name].png” and use them by default in each query.
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.