How to limit the size of CMS images in Webflow, and how to define how light they should be
The new CMS image field parameters (Jan 2022)
You can now set a minimum and maximum acceptable size (in kb) for a image uploaded through the CMS. (jump straight to the results.)
This feature is not going to compress an uploaded image to a target size, instead, it will set a limit on the size of the images that Editors and Designers can add to a given CMS field.
You can find this setting inside of the Image Field settings.
When an editor tries to upload an image that exceeds the limit, the action is refused. Let's limit the image field to images under 250kb, and then try to add a CMS image larger than that: we get an error message.
Defining the best values for the Maximum Image Size parameter
Why is it a big deal to define those values?
Two images of the same dimensions and compressed the same way won't get an identical size, or weight, in KB, because the nature of the compression methods, that are aware of the content of the images. The more an image is complex, the more it has of different colors and details, the less it can be compressed.
It's important not to set the limit too low, because your Editors will have hard time to meet the requirement with good quality images.
How do we do it?
To do this, we will use the most standard text images for compression, and a lossy compressor such as Optimage. We will process those images at 540pt, 960pt, 1280pt, 1920pt and 2500pt, sizes you're most likely going to use in your web designs.
Source images
From https://imagecompression.info/test_images/
artificial.jpg 3072 × 2048 2Mo
bigtree.jpg 6088 × 4550 32Mo
From Depositphotos.com
Depositphotos 1
Depositphotos 2
Depositphotos 3
Compressor app
The best results are obtained by using an enduser LOSSY compression. It means some details will be removed from the images but you won't be able to notify it. The results, however, are dramatically better than when using a lossless compression.
Lossless compression is useful while you're still working on images, when they still have to be integrated into another piece of work. When compressing images for the web, for their final destination, use lossy coimpression.
Here are the settings used in Optimage.
Compression tests
To do this, we will use the most standard text images for compression, at 2/3rd and 4/5 ratios, and a lossy compressor such as Optimage. We will process those images at 540 px, 960 px, 1280 px, 1920 px and 2500 px, sizes you're most likely going to use in your web designs.
Compression results (in KB)
The results are very different for a given width, here is why:
Ratio: we're compressing images of the same width. But a 4/3rd image has a lot more pixels than a 2/3rd image, and even more than a 16/9th image. We're doing so because in your CMS templates designs, the width most often controls the dimensions of your images.
Source: some images are raw images, from the camera source, but the images from a photo bank (Depositphotos) have already been post processed, toned, and they lost quite some data in the process.
Nature: some images have more coulors and details than others.
The last image of the series almost always comes the lightest, because it combines the most elongated ratio (less pixels), it has a short dynamic range (the blacks aren't even blacks, the colors are never vibrant) and it's made mostly the same things: variations of white and bright pixels). It's completely the opposite of the bigtree.jpg image.
We have determined a range, compressing various types of images. We can use the biggest number of each column as a base for our limit value. Of course this depends on your strategy. Here the strategy is to get quality images while not forcing the Editors to compress too much.
Results
Here are the values we can try for our defined resolutions, for the Maximum Image Size field.
Those values are used to provide a safeguard against editors uploading images of several Mo. Editors can still use advanced compression techniques to achieve a better result. But those numbers will help them avoiding mistakes, and will provide you, designers, a base to work with.