I’ve been trying to increase page speed times and I’m curious if someone can help me understand how Webflow’s responsive image compression works. It seems like maybe I don’t have it turned on, or could be missing something that could improve optimization.
Pingdom says its a 2.7 MB page load, but the images on the page just aren’t adding up in my mind, or seem much higher than I’d expect if Webflow is resizing based on the size of images.
Then there’s 3 thumbnails on the story links below the author bio which I’d expect to be compressed given their tiny less than 64x64 size, by add up to almost 503kb despite being very small.
Finally, the story link images below that section see some compression, but not as much as I’d expect - take this example
I think it is best to start with the fact that background images are not optimized by Webflow. That is up to you.
Then for images that are responsively created you can look in your design to see what the max dimensions are and then optimize for that as a starting point. You can also define the best optimized compression in your export. If webflow responsively creates derivatives, those will be from your starting point.
Inspecting your site with browser dev tools (and the network panel) will go a long way to determining what needs to be optimized.
If I upload a 300kb, 2,000px image that’s used in a blog post header, and then a thumbnail element on another page pulls in that image to show a related blog post as shown in the screenshot, how is it controlled at the smaller 64x64 icon size? My understanding was that Webflow knew it was delivering a smaller image, it would reduce the size.
Maybe I’m missing the point of the feature - is responsive literally just for device size? Would I need to have a separate upload for smaller images in related story feature/thumbnail?
The use case I’m thinking of seems pretty common, so I assumed Webflow was doing the work: that is, a blog post main image being reused and rescaled as a thumbnail on a related page.
If I was going to use background images I would have a thumbnail sized version in its own field. As I said, Webflow does not do anything with background images. As an alternative you could use an image and use the new object-fit property set to cover.
Oh, so helpful! I saw this release previously but didn’t quite understand its use case initially.
One follow-up question here - does the responsive image functionality work if Webflow sees that the bounding box/div is smaller than the original image uploaded, or does the responsive image functionality only fire when there’s an actual breakpoint seen?
That would still effect how/if I decide to create a separate thumbnail field
To be honest, the way webflow handles is actually more confusing to me now, lol. When I save to my computer, the 600x600 image is 209kb, while its 1080x1080 image is 93kb.
I can probably spend a little more time analyzing the results but that’s just a quick look.
Thanks so much, I think this is a really valuable experiment!
