ImageKit automates many aspects of image and video optimization for web delivery and provides a range of features that allow you to tweak the optimization settings to suit your specific requirements.
ImageKit automatically converts images & videos to the most optimal format and quality based on the user's device, input format, and account settings. Learn more about:
Content Negotiation in Browser & Mobile App
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. You can refer to mobile app-specific optimizations to ensure the correct format is delivered to mobile apps.
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
There are two steps to building this:
Step 1: Determine the user's network speed
If a user is connected to 4G mobile data, they may not get the download speed expected on 4G. The actual download speed can vary. There are different ways of determining this on apps and websites.
On any browser, web or mobile, that supports the NetworkInformation API, you can get the approximate category of the user's download speeds using the value of navigator.connection.effectiveType.
On mobile devices, external libraries such as Meta's Network Connection Class evaluate connection quality by monitoring network traffic and categorizing it accordingly.
Both methods above categorize the user into a class that gives an approximate representation of their download speed.
Step 2: Adjust the file compression and resolution based on the network speed
Once you have determined whether the user has a fast or slow download speed, you can decide the compression level for that user. You can adjust the quality of images and videos using the quality (q) parameter. To serve in lower resolution, apply height (h) and width (w) transformations.
Where to make this quality parameter change in your app or website
- For apps, since the layout is rendered on the client side, you can change the media URLs you receive from your backend APIs and add the quality parameter to them before adding them to the layout.
- For web and mobile web, if you use a client-side rendering framework like React or Vue, you can use the same technique as point 1—add the quality parameter to the file URL you receive from the backend and use it on your website.
- If you use a server-side rendered website, the server won't know the user's effective connection type. In such cases, you will need to intercept the file requests in a service worker, modify their URL with the quality parameter, and get the response from the modified URL.
You may only want to optimize some files based on the user's network. For example, your logo or a sale banner should always appear in high quality on the app or website. Take this into account when implementing network-based media optimization.
Find the quality thresholds that work for your business for different network types. Some businesses may be unable to increase compression because it reduces visual quality.
See if you can eliminate network-based optimization by performing other format, quality, and responsive image optimizations or by reducing the default compression level. This will save you a lot of development time while giving all your users a good user experience. Refer to the docs here to fix all media optimization issues pointed out by standard tools such as Google Lighthouse or PageSpeed.