Image optimization

Image optimization is very important for any web application. Optimized images load faster, consume less bandwidth, and improve the overall user experience. On the other hand, unoptimized images load slowly, degrade user experience, increase bounce rates, and negatively impact your business.

Images are the single largest contributor to the Largest Contentful Paint (LCP) metric, a key metric for measuring page load speed. Optimizing images can significantly improve your LCP score.

Image optimization is a set of techniques to reduce image file size without compromising "perceived" image quality. The goal is to make images load faster on web and mobile applications. Techniques that are used for image optimization include:

• Image compression - Reducing the file size of an image while maintaining visual quality using lossy compression techniques. Learn how automatic image compression works in ImageKit.
• Image format selection - Choosing the right output image format based on the image content and device. Learn how automatic format conversion works in ImageKit.
• Image resizing - Changing the dimensions of an image on the server side to fit the application layout on the front end. Learn how to correctly resize images.
• Lazy loading - Loading images only when the user is about to see them on the screen. Learn how to lazy load images.

Refer to supported image formats for a list of image formats supported by ImageKit.io for optimization. Check out various limits.

Image quality is a measure of the perceived visual quality of the image. ImageKit.io measures the image quality on a scale of 1 to 100, with 100 indicating the best quality and 1 indicating the lowest quality. Image quality and file size are also directly proportional. The higher the image quality, the larger the file size.

The human eye's inability to perceive pixel-level changes in an image can be advantageous for serving smaller images.

For example, the images below show no perceived visual difference between quality 100 and 80.

ImageKit automatically compresses images to reduce the file size without compromising the visual quality. The quality parameter controls the compression level. The default quality is set to 80, but you can change it from the dashboard settings.

By default, ImageKit strips out all the metadata from the image, including the color profile. Learn more about image metadata.

The right image format is the one that provides high quality and the smallest file size based on the image content and device support. This means that AVIF may be suitable for some users, and JPEG may be the better choice for others.

ImageKit automatically converts images to the most optimal format based on the user's device, input format, and account settings. The format parameter can control the output format. You can turn off image format optimization from the dashboard settings.

ImageKit uses standard content negotiation techniques to identify the image formats a device or browser supports. This content negotiation technique depends on the request's Accept header value. However, mobile apps do not always send these headers. You can force the output format using URL transformation parameters to ensure that the right format is delivered to mobile apps. Or, for enterprise plans, you can specify a list of user agents for which ImageKit should serve images in next-gen formats.

Resizing an image means changing its dimensions on the server side per layout requirements before delivering it to the user. Many of us have inadvertently uploaded full-size images directly onto web pages. This is an easy mistake to make, especially when fast internet speeds make large images appear to load swiftly and display properly. However, in practical scenarios, this can significantly degrade performance as users are forced to download excessive data, impacting their experience negatively.

Use height (h) and width (w) parameters to resize images. Learn about basic image resizing parameters.

Check out the Responsive Image Guide for more information about correctly sizing images for different devices.

Lazy Loading Images is a set of techniques in web and application development that defer the loading of images on a page to a later time - when those images are needed, instead of loading them upfront. These techniques help improve performance, better utilize the device's resources, and reduce associated delivery costs.

By default, ImageKit removes all metadata as part of automatic image compression. You can control this using the md parameter.

It specifies whether the output image should contain all the metadata that is initially available with the original image. Image metadata is not relevant for rendering on the web and apps, so it is recommended not to use it while delivering images. The only situation to enable the metadata option is when you want additional data like camera information, lens information, and other image profiles attached to your original image.

Default value - false (from the dashboard).

Possible values - true and false.

Image metadata contains information about the color profile and orientation of the image. Here's how ImageKit handles color profile and orientation:

• Color profile: ImageKit removes all metadata, including the color profile, by default. You can globally control this behavior from the dashboard settings or use the color profile - (cp) parameter on URL-basis. Use cp-true to preserve the color profile.
• Orientation: ImageKit automatically rotates the image based on the EXIF orientation tag in image metadata. You can globally control this behavior from the dashboard settings or use rotate - (rt) parameter on URL-basis. Use rt-auto to auto-rotate based on metadata.
• Entire metadata: You can preserve all the metadata using the Image metadata - (md) parameter. Use md-true to preserve the metadata.

It specifies whether the output image should contain the color profile initially available with the original image. It is recommended that the color profile be removed before serving the images on the web and apps. However, if you feel that the output image looks faded or washed out after using ImageKit.io and want to preserve the colors of your original image, you should set this parameter to true.

Default value - false (from the dashboard).

Possible values - true and false.

Used to specify whether the output JPEG image must be rendered progressively. In progressive loading, the output image renders as a low-quality pixelated full image, which, over time, keeps on adding more pixels and information to the image.  This helps you maintain a fast perceived load time.

Possible values - true and false.

https://ik.imagekit.io/ikmedia/tr:h-300,w-400,f-jpg,pr-true/docs_images/examples/example_food_3.jpg

Used to specify whether the output image (if in JPEG or PNG) must be compressed losslessly. In lossless compression, the output file size is larger than the regular lossy compression. However, the perceived image quality can be higher in certain cases, especially for computer-generated graphics. Using lossless compression for photographs is not recommended.

Possible values - true and false.

https://ik.imagekit.io/ikmedia/tr:w-500,h-361,lo-true/docs_images/examples/example_food_3.jpg

Used to specify the quality of the output image for lossy formats like JPEG, WebP, and AVIF.  A large quality number indicates a larger output image size with high quality. A small quality number indicates a smaller output image size with lower quality.

Default value - 80 (can be managed from image settings in the dashboard)

Used to specify the format of the output image. If no output image format is specified then based on your image settings in the dashboard, ImageKit.io automatically picks the best format for that image request.

Possible values include auto ,jpg , jpeg , webp, avif and png.

Default value - auto (from dashboard settings).

Mobile browsers like Chrome Mobile and Opera Mobile allow users to activate a Data Saver mode. With this mode enabled, the browser sends a Save-data header within the request. By identifying this header, a web page can customize and deliver an optimized user experience to cost—and performance-constrained users.

ImageKit supports Data Saver mode to further optimize images for users on slow connections. You can turn on this setting within the Optimization section of the Image Settings.

Chroma Subsampling is an optimization technique that is used for JPEG encoding. This takes advantage of the lower sensitivity of the human eye towards color (chroma) than towards brightness (luma).

It is generally recommended to use 4:2:0 chroma subsampling on all images for a smaller output image. But in certain cases, especially ones with a bright object in the foreground over a completely white background, this optimization introduces unwanted artefacts, i.e., as your image size gets smaller, the visual quality goes down as well.

ImageKit.io keeps this setting turned OFF by default to avoid changing the image's visual quality. It is recommended to test this setting with your images before implementing it on your live site.

You can turn on Chroma Subsampling within the Optimization section of the Image Settings.

ImageKit.io performs lossy compression for all your images by default. Lossy compression helps deliver smaller-sized files with good perceived visual quality.

However, certain images like computer-generated graphics and logo designs aren't great with lossy compression. In such cases, lossless compression can result in better visual quality at the expense of image size.

Lossless compression is turned OFF by default. You can switch on lossless compression using the parameter lo-true in the URL. This transformation parameter applies to both, PNG as well as WebP images.

For example:

https://ik.imagekit.io/demo/img/tr:w-500,h-361,lo-true/default-image.jpg

The above URL delivers a losslessly compressed WebP image in Chrome. Adding the parameter f-png to the above URL results in a losslessly compressed PNG image.

Additionally, from the ImageKit.io dashboard, you can change the PNG compression mode from the Advanced Settings tab under Image Settings and set it to Minimum . This compression mode change from the dashboard is applicable only for PNG images.

You can completely turn off PNG image optimization by setting the PNG Compression mode to None from your dashboard. This is not recommended.