As I understood it, Webflow has responsive image functionality to reduce image size depending on the format they’re being served to. Is this something I need to enable within Webflow for my site? Or am I missing something else here?
It’s always good practice to compress images as much as possible BEFORE uploading them.
There are many online tools available. One popular tool is TinyPNG / TinyJPG (They do the same thing and either format can be used on either site) https://tinypng.com https://tinyjpg.com
@knk, I never noticed that function either. EIther something new or never needed to know about it.
@RobJDR, to speed up your site for images, you want to make sure that your images are small than 100k in size, preferably under 70k is what is recommended. However, not all images can or will get to that size, especially if you are resizing from a stock file or resizing from a resize. I make sure to get as close or under 100k as possible.
Correct, they don’t show in the Assets panel. Here’s a link to Forum question that asked a similar question:
The setting is revealed with sites created prior to a certain date.
Generating responsive images for older sites
If you created your site before September 14th, 2016, you’ll need to walk through a quick process to generate responsive images on your site. Next time you open the Designer, you’ll see a modal asking you to start this process.
Found a Blog Post that has more info when this feature was released:
No. It looks like everything is already being looked after.
So in summary, (after all this information overload!!!)
Webflow automatically creates and serves a ‘Responsive’ image that is used with the Image Element.
Best practice is to ALWAYS compress images BEFORE uploading, whether to Assets panel or to CMS.
Hope that helps, sorry if it’s overkill I was interested to find out more myself.
Thanks Keiran. It’s a shame then - we are using a custom homepage slider which has to have a 1920x1080 image as a minimum. This is something we’ve been waiting on from Webflow for some time and is a bit of a botch job, but without that minimum size the image just tiles on top of itself. Images within blog posts can be reduced and we do use Tinypng, but getting them down to 100kb or less makes them look pretty ugly on monitors. Mobile is fine, but I would have thought the point of responsive images is for Webflow to do this part of the scaling to shrink them to a size which is served quicker on mobile?
@RobJDR, HI, I see your predicament all too often anymore. The designers I deal with on a daily basis are used to print work with large image files, HiRes and print color gaumets. So I know what you mean. I use a image resizer that allows me to drop the file size but still keep the file width and height wherever I need them. I am adding the link here for you:
I use this for all images that I get from my designers. Try using this and changing the settings for your particular purposes. I have a 4K monitor I use for all my work and even after shrinking the images they still come out crystal clear. They just have a small file size.
Here is a site I am working on that has 4 images in a slider with a 3000px width and each image file size is under $120k. Its almost impossible to get every image under 100k, in my opinion. As long as you get it close and have them all under 150k you will be better off.
It’s sort of nuts Webflow dev don’t add an image compression step to the asset upload. It would save a lot of time and these evergreen website performance problems, while requiring no effort from the user.