How do I optimize the size and quality of my project’s images (they are all too big)? I want to improve the page loading speed. If possible, optimize all images with just 1 click.
Here is my site Read-Only: [https://preview.webflow.com/preview/ace-super-site?utm_medium=preview_link&utm_source=designer&utm_content=ace-super-site&preview=34c835ca03a3ce4bee3b6a7871c84aa3&mode=preview]
([how to share your site Read-Only link][2])
Paula, I take it this is a cloned website and not your own?
I noticed this “enable now” option which you don’t see if you built your own website in the last year or so.
It will create an image (you won’t see it listed its implied) for each breakpoint.
Yes, this is my own website, I created it on Adobe Xd and now I’m inserting it on webflow with assets and all. But I’m having dificulty to do move things around because the images are really large and the website is getting very slow, do I have to convert all of them (images)? If yes, how big they need to be?
Could that be because I’m not paying webflow yet? I’m using the free version because I need to finish first for my boss pay later. In the desciption plan, webflow doesn’t mention responsive variants for the assets.
Well that is strange, no I am not aware that you need to pay for responsive as that would be silly.
I think you can opt not to use responsive, but that’s just a vague memory.
So I don’t know why you are seeing that option, maybe as you have created higher breakpoints.
Try this, duplicate your website, then on the duplicate click the “enable now” option, see what happens.
There is no option in webflow to alter images, that I am afraid is for you to do. You can’t as far as I found replace an image in webflow either. You have to upload a new one and change the element to link to the new one. That is a MAJOR pain in the bum. Also no option to see which images are in use and which ones are not.
My next tip, run tinypng to scan your webpage for images, it will give you a report.
I don’t recommend it to compress your images as its too aggressive but at least you can see anything big to do.
hi @Paula_Rodrigues I always optimise images before upload even WF does good job with serving optimal size for each viewport. There is no magic button that will do whole job for you and optimising images is always finding acceptable compromise. Here is How I thing about that.
Let say that I have image 3000px wide.
first determine what will be biggest size of image (eg. on large viewport 1920) If image will be on large screen 700px wide I will create image about 10-15% bigger. This mean that this image doesn’t need to be 3000px wide.
I open image eg. in Affinity Photo (or Photoshop) and export it for desire size let say 800px with 80% quality.
now I have image of size I need with still great quality (and smaller size in mb)
(next step is not necessary)
4. go to tinyPNG website, upload my image and compress it
I have done these steps on your larges image
I have size it to 2400px @ 80% as I presume it will be full width image
and result is image with size 246kb. This it a lot smaller compare to 3.91MB but still with great quality.
Here is image but I do not know what compression is applied by WF as they may compress it even more just to save space.
Outcome is that we always have to pay attention to images before uploading to any platform as there is no service that do it for us. 
