Production Checklist

Before you go live on production, review this checklist. It is based on the best practices and techniques our customers use to get the most out of ImageKit.

A few of them are related to your ImageKit account settings, while others are related to how you integrate ImageKit with your website or app.

To secure your account, enable two-factor authentication (2FA) for your ImageKit account. This adds an extra layer of security by requiring a second form of verification in addition to your password.

By default, your ImageKit account is configured to deliver optimized images and videos while maintaining visual quality. However, you can customize these settings for images and videos separately based on your requirements.

• Ensure format optimization is turned on. This feature automatically converts images and videos to next-gen formats like WebP or AVIF for images and VP9 or AV1 for videos to reduce file size and improve performance.
• Review compression settings. By default, images & videos are compressed to a level that maintains visual quality while reducing file size.

For publicly accessible pages, use the ImageKit website performance analyzer. For pages on your local machine, you can use Lighthouse in Chrome DevTools.

If you identify any media-related issues, ensure the following:

• All images and videos are loaded via ImageKit, with the compression settings configured as recommended above.
• To address "Properly size images" issues, use ImageKit's URL-based transformation parameters to set height, width, aspect ratio, DPR, and crop modes to match your media requirements. Also, review our responsive images guide.
• For "Defer off-screen images" issues, implement lazy loading.
• For "Efficiently encode images" and "Serve images in next-gen formats," ensure format and compression settings are correctly configured as outlined above.
• For "Serve videos in modern formats," verify that video format and compression settings are properly configured as detailed above.
• To fix "Use video formats for animated content," convert animated GIFs to videos using ImageKit.

With paid plans, ImageKit can monitor specific pages on your website and provide weekly reports on image and video performance. You can configure these performance monitoring alerts in the ImageKit dashboard. Learn more about the performance center.

ImageKit uses the standard content negotiation approach to identify the image formats supported by a device or browser. This content negotiation technique depends on the request's Accept header value. We use User-Agent headers to determine the supported formats for videos. However, mobile apps do not always send these headers or the actual value for the headers can get overridden by libraries such as OkHttp.

To load the right format on mobile, you can do the following:

• You can force the output format using URL transformation parameters.
• On the enterprise plan, you can specify a list of user agents for which ImageKit should serve images in next-gen formats.

You should load a lower-resolution image on mobile apps on slower network speeds. Network Connection Class is a library developed by Meta that helps identify connection quality by listening to network traffic and categorizing it. Check out how Swiggy adapts image delivery based on network conditions here.

Different image placeholders on your app will need images in different sizes. Mobile phones additionally have high-density or retina displays, so you need to load an image larger in dimensions on such displays. You would have seen this with @1x, @2x, xhdpi, xxhdpi, etc., on apps where you provide the same image in different dimensions.

Similarly, when loading images with ImageKit, you must add the appropriate DPR value and the resize parameters. This can be done using the dpr transformation parameter.

For example, if you need a 300px wide image, you can use the following URLs with varying dpr transform values on each display density.

1x - https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,dpr-1 2x - https://ik.imagekit.io/demo/default-image.jpg?tr=w-300,dpr-2

If your website or app loads videos over 30 seconds in length, it is recommended that you use Adaptive Bitrate Streaming to adjust the video stream quality to the user’s network bandwidth. This is similar to the experience you get on YouTube, where, under poorer network conditions, you see a low-quality video that automatically improves as your network speed improves.

We often miss out on using suitable transformation parameters in our image URLs. In such cases, if the original image is high-resolution, it will be delivered at that same resolution and consume a lot of bandwidth.

To avoid this, enable the "Device-based" > "Restrict image size based on user's device" setting in the ImageKit dashboard here. Specify the maximum resolution your layout needs on desktop and mobile devices if you don't specify anything in the URL. 2000x2000px is a good safe limit for desktop devices, and 1000x1000 is a good safe limit to set on mobile. ImageKit will use this as a size limit for your images only when the URL does not contain any height or width resizing parameters.

Consider using named transformations to simplify your URL structure and facilitate transformation management across your application. It can also help secure your URLs as mentioned here.

On paid plans, you can deliver files from your domain name, such as https://media.yourdomain.com/image.jpg.

Learn more about custom domain name setup here.

On paid plans, ImageKit offers certain inclusions in the base plan, with usage-based pricing after that. As your usage increases, so does your billing.

To monitor your billing in case of high usage, you can set a billing alert. It is also advisable to track your usage analytics from the dashboard or use the API to set alerts on your usage.

Explore helpful tutorials and comprehensive guides.