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.
Take this page as an example: https://www.bikeout.co/stories/how-bike-travel-brings-together-these-two-empty-nesters
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.
100kb header illustration
227kb main image depicting couple
61kb author thumbnail
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
Resized at 800px, 340kb: https://global-uploads.webflow.com/5dea6a2b519095290b2b1b24/5e5544cad93d990634506736_gapsalisbury-p-800.jpeg
Original, at 2,000px, 390kb: https://global-uploads.webflow.com/5dea6a2b519095290b2b1b24/5e5544cad93d990634506736_gapsalisbury.jpg
Can someone help me understand how I can optimize these photos more?
Here is my site Read-Only:
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.
Just to clarify, for the story thumbnails I indicated, how would I optimize those? These, as examples: https://www.dropbox.com/s/oj2eq5f5u4qys2x/Screenshot%202020-05-18%2014.29.03.png?dl=0
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
I created a test page to determine when responsive images were created and what triggered it. You can visit the page and draw your own conclusions.
Ohhhh, I love the experiment
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!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.