Guys its a little strange the automatic resizing only goes down to 500px. That is the size of where a lot of our images start! And they scale to 300 px, 200 px, 100 px, etc. There is a lot more size savings to be had with this scaling. We get dinged on Google Page Speed for mobile because we aren't serving smaller images when we should.
however, for background images, we don't optimize those. its always a good rule of thumb to keep your images smaller than 300k.
Also, for any iconography, logos or logotypes, make sure to use SVG with as little points and colors as possible. You wont need to embed the SVG code, but you can drag the SVG file into your asset manager just like other images.
Would love more detail here. How much work should we do to optimize images before uploading?
(Like, Squarespace does a great job of generating separate images for different media queries so you don't load the giant 1600px hero image on a 300px mobile screen, but I still run jpgs through JPEGMini before uploading them to Squarespace…)
Deleted User
.svg){kind=logo}
Background sooo needed, @nelso @koen, please add your votes over on https://wishlist.webflow.com/ideas/WEBFLOW-I-1073
Good Idea !!!
I think Eric is right. Webflow already optimize the images but the minimum size is 500px.
https://help.webflow.com/article/responsive-images
Good idea! I was just reading about this and would suggest the same.
https://modpagespeed.com/doc/filter-image-optimize.html#resize_rendered_image_dimensions
Guys its a little strange the automatic resizing only goes down to 500px. That is the size of where a lot of our images start! And they scale to 300 px, 200 px, 100 px, etc. There is a lot more size savings to be had with this scaling. We get dinged on Google Page Speed for mobile because we aren't serving smaller images when we should.
Also for background images indeed Nelson! This makes the traffic for Weblflow at least 10 times faster!!!
@lee - Webflow already optimizes inline images:
https://help.webflow.com/article/responsive-images
however, for background images, we don't optimize those. its always a good rule of thumb to keep your images smaller than 300k.
Also, for any iconography, logos or logotypes, make sure to use SVG with as little points and colors as possible. You wont need to embed the SVG code, but you can drag the SVG file into your asset manager just like other images.
Would love more detail here. How much work should we do to optimize images before uploading?
(Like, Squarespace does a great job of generating separate images for different media queries so you don't load the giant 1600px hero image on a 300px mobile screen, but I still run jpgs through JPEGMini before uploading them to Squarespace…)