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.
Enable 2FA for your account
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.
Review optimization settings
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.
Do not set the image quality to over 90 or the video quality to over 70 in ImageKit's dashboard. It will increase the file size without any visual improvement. Instead, you should always start with a high-quality master image or video and leverage ImageKit's optimization and transformation capabilities during delivery.
For example, the largest resolution needed for desktop usage for images is typically around 1920px wide and under 5MB. Starting with high-resolution assets and letting ImageKit take care of the compression, helps you tweak compression settings in a single step without losing the original image quality because of multiple layers of compression.
Loading the right image and video resolution on different screens and placeholders is also essential for excellent visual quality, especially on retina or high-density displays.
Fix issues in PageSpeed or Lighthouse Report
Core Web Vitals are the most crucial user-centric performance metrics to measure and improve continuously. If your page is publicly accessible, use PageSpeed Insights. If it is on your local machine, you can use Lighthouse in Chrome DevTools.
If you see any media-related issues, ensure the following
- Ensure all images and videos are loaded via ImageKit and that the compression settings mentioned above are configured correctly.
- To fix "Properly size images" issues, use ImageKit's URL-based transformation parameters for height, width, aspect ratio, DPR, and other crop modes to get the right fit you need for your media files. Also check out responsive images guide.
- To fix "Defer off-screen images" issues, implement lazy loading.
- To fix "Efficiently encode images" and "Serve images in next-gen formats", ensure format & compression settings are correctly configured as explained above.
- To fix "Use video formats for animated content", convert animated GIFs to videos using ImageKit.
Mobile app-specific optimizations
Loading the right format
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.
Network-based optimization
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.
Combining DPR with resizing on mobile apps
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
Capping the DPR value to 2 can provide sufficiently high visual quality, even on higher display densities. This means using dpr-2 on a 3x device might still work. Do give it a try.
When loading high-resolution images on high-density displays, you might be able to compress them more and still retain the same visual quality. For example, you can compress the 2x image to quality 60 and still get the same output visual quality. You can do this with the quality transformation parameter q.
Adaptive Bitrate Streaming for videos
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.
Set maximum image dimension limits
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
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.
Set up the custom domain name
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.
Billing Alerts and monitor analytics
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.
Useful resources
Explore helpful tutorials and comprehensive guides.