I’ve been running Google Lighthouse against my site and for mobile emulation it is saying that the images being served are far too big. For example:
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?
Cheers!
Here is my site Read-Only: LINK
Hey Rob,
A couple of things to note regarding Images.
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
Webflow does create responsive images automatically.
Here’s a link with the lowdown:
Responsive Images | Webflow
Also noticed that you need to enable this function within your Assets Panel (To be honest I’d never noticed this before?)
Here is an image with the setting:
Hope that helps
Keiran
@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.
Woah, I thought responsive images is the default settings. I don’t even have the function to enable it on any of my projects.
Yeah it was a surprise to me to see the setting there. I’ve never noticed it before and none of my projects have that setting either?
Hi Keiran,
Thanks - however, there are a couple of points:
1.) The images I use are within CMS content so I don’t believe they appear in the Assets panel?
2.) I do not get that option within the Assets panel anyway!
What am I missing, and do I need to do something to enable responsive images for CMS content images?
Hey Rob, (Sorry long answer coming 
)
this one has really got me thinking!
Ok, found out a couple of things:
Correct, they don’t show in the Assets panel. Here’s a link to Forum question that asked a similar question:
Correct.
The setting is revealed with sites created prior to a certain date.
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.
Regards,
Keiran
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.
Hope this helps you.
Thanks Brandon, I’ll see how that resizing site works out for me. You mentioned a link to a site with a slider, but I couldn’t see it in the post?
My bad, I forgot to add it. http://bodyessence.webflow.io
I’m getting a 404 visiting that site?
it should be http://body-esssence.webflow.io
My bad forgot the “-“ in there.
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.
Best open source image compression projects plenty of free open source solutions
