All Collections
Using the ImageKit dashboard
Image Settings
Understanding different image settings in your ImageKit dashboard
Understanding different image settings in your ImageKit dashboard

How does changing a particular setting impact the output images and recommended settings for different use cases.

Rahul Nanwani avatar
Written by Rahul Nanwani
Updated over a week ago

In this article we will walk you through different sections under the Image settings tab in your ImageKit dashboard and how each setting impacts your images.

1. Optimization

a. USE BEST FORMAT FOR IMAGE DELIVERY
With this setting on, ImageKit automatically converts your image from the original input format to the best suited format for that image. Various factors like browser support, image transparency, image content, original image format and original image quality are taken into account while deciding the output format. 

If you turn this setting off, then your output image will have the same format as the input image. Other transformations, including quality optimizations, will be done on your images.

If you turn this setting off, then turn it on again, the images that are cached on the CDN will continue to be served in their original formats. You will need to clear cache for these images. You can read about clearing caches here.

You can read more about format optimization here.


b. OPTIMIZE IMAGE QUALITY BEFORE DELIVERY
This sets the default quality level at which your output images are delivered. Selecting a quality between 80-90 is usually a safe selection. You can experiment with higher or lower quality levels as well. 

If you specify the quality in the URL, this default settings gets overridden.

You can also enable the support for data-saver mode, that further optimizes the image quality for users using data-saver modes in their devices, from this setting. 

2. Device-Based

a. RESTRICT IMAGE SIZE BASED ON USER'S DEVICE

This setting, if enabled, ensures that images delivered on desktop and mobile devices are not larger than the dimensions specified.

For example, if you enable this setting and set the maximum desktop dimensions at 2000x1500, and try loading an image that is 4000x3000 on your desktop website, then ImageKit will automatically resize it down to 2000x1500, without you specifying anything in the URL. The resizing while preserving the aspect ratio and without any cropping. Thus the output image will be smaller or equal to 2000x1500px.

With this setting off, the image size is not changed at all before delivery.

3. Security

a. RESTRICT UNSIGNED IMAGE URLs
Normally, all your images and transformations on those images will be accessible using the URL. However, you may want to restrict unwarranted misuse of your images by a third party. For that, you can enable this setting and then start attaching a signature with your image URL. Only if the signature is available, and valid will the image get delivered, else the request will be rejected. 

The signature for an image URL is generated using a private key (mentioned later in this post) which is accessible only to you.

This means that if someone tries to change the transformation applied on the image, and since they do not have access to the private key, they won't be able to update the URL signature. Because of which such requests will get rejected. 

This setting is particularly useful if you are watermarking your images and do not want someone to be able to remove that watermark from the image.


b. RESTRICT UNNAMED IMAGE TRANSFORMATIONS
ImageKit provides you with URL-based image transformation parameters. If not using the image signatures as mentioned above, anyone can change the transformation parameter and get a new image. 

For example, they can change the height and width parameters and get a new size of the image.

Restricting unnamed transformations provide a way to avoid this without generating signatures. 

You can create named transformations, which are basically aliases of a regular transformation string, and restrict your image URLs to use only these named aliases of the transformation.

For example, you can create a named transformation called thumbnail which internally maps to width = 100px and height = 100px transformation. In your URL, you can use the "thumbnail" transformation, instead of specifying the width and the height. Now, no once change what "thumbnail" refers to. And with this setting on, one cannot have any other transform in the URL, except the named transforms created by you.

4. Named Transforms

In this section, you can create new named transforms and edit existing ones. These named transforms are aliases for actual transformations that make them simpler to use in your URLs.

5. Upload

This section contains one setting related to media library image uploads and your upload keys (private key and public key). The private key is meant to be used only on your servers and should never be exposed on any client side application.

a. ENSURE UNIQUE IMAGE NAMES DURING UPLOAD
To ensure that older images are not overwritten during upload, it is advisable to make each filename unique before saving. With this setting turned on, ImageKit does that for you automatically and returns the full image URL with the unique filename used for upload.

With this setting turned off, if an image exists with the same name, it would get overridden.

6. Advanced

As the name suggests, these are slightly more complex settings and can be left unchanged as ImageKit picks up the correct defaults for these settings automatically.

a. USE CORRECT ROTATION FROM IMAGE METADATA
By default ImageKit strips out all the metadata (additional data about the image, camera, lens etc.) before delivering the image to reduce the size of the output image. In such cases, if the orientation data is associated with the image, to correctly rotate the image on display screens, then that too gets removed and your image would appear incorrectly rotated. 

Thus, it is recommended to keep this setting on. ImageKit automatically corrects the orientation of the image before removing the metadata which ensures that the image appears correctly rotated, while being the smallest possible in size.


b. USE 4:2:0 CHROMA SUBSAMPLING
Chroma subsampling is the practice of encoding images by implementing less resolution for chroma information than for luma information, taking advantage of the human visual system's lower acuity for color differences than for luminance.

While keeping this setting on would reduce the file size further, it may introduce some unwanted artefacts, especially around sharp edges. Because of this reason, it is kept off by default. However, you can test it for some of your images and if it works fine for you, then you can enable it for all the images.


c. PRESERVE IMAGE METADATA IN OUTPUT
By default, image metadata is removed from an image before delivery to reduce its size. This data, is generally, not useful for display on web and apps. 

However, there might be cases, where you want to preserve the entire metadata in the output image, or preserve the color profile (if your images are looking dull). This can be done by selecting the appropriate value for this setting. 

You can read more about metadata optimization here.

d. PNG IMAGE COMPRESSION MODE
The size of PNG Images can be reduced significantly by using optimizations which might be lossless or lossy in nature. ImageKit provides two levels of optimization for PNGs - "Minimum" does lossless optimization, whereas "Maximum" does lossy optimizations. Choosing "None" disables all optimizations on PNG images. By default, ImageKit goes for "Maximum" compression which involves lossy optimizations.

It is recommended that if you use PNGs only for logos and small graphics, then you can opt for "Maximum" compression setting. If you use it for photographs (though ImageKit's format optimization would ideally correct that to JPG or WebP format), you should use "Minimum" compression mode. You can completely disable any PNG-specific optimization by selecting "None" for this setting.

Did this answer your question?