How to reduce video size without losing quality?

We get some marketing videos that are at 1080p resolution and can be over 200MB in size. A big challenge for us is to load these videos quickly, so I want to reduce the size of the video, but we cannot compromise on the quality of the video. It should still look decent after compression.

Also, many of our users come from mobile devices to view these videos, so maybe even 1080p resolution can be resized to something lower. Can ImageKit’s video product help in optimizing the size of the video (at 1080p resolution), and if needed, reduce the resolution of the video in order to bring the size down and make the video stream quickly,

Yes, ImageKit can help reduce video size without losing visible quality. You can use the features mentioned below which are great for mobile.

1. Automatic format conversion (WebM and MP4)

ImageKit Video API automatically converts videos to WebM format on supported devices and falls back to MP4 format on other devices. This can be done with the video optimization dashboard setting or you can use f-auto to automatically serve the best format supported by the browser.

WebM format is smaller than MP4 at similar quality which will help you reduce video size. And it works on most devices including Android mobile.

For example: The original video below is 26MB in MP4, but gets delivered in ~5MB in WebM after compression.

https://ik.imagekit.io/ikmedia/sample-video.mp4

2. Video compression without visual degradation

ImageKit applies automatic compression to reduce video file size while preserving visual quality as much as possible. You just need to set the default video quality level in your video optimization setting dashboard or apply it with q quality parameter in the URL.

This compression is important to reduce the file size. ImageKit keeps the default quality setting at 50 which is good for most cases. At max you should take it up to 70 for a better visual quality while still maintaining a good compression. Higher than that, it will lead to much bigger video sizes whereas changes in visual quality may not be visible to naked eye. Even if the video is not converted to WebM, compression helps reduce size of even MP4 format.

3. Resize videos for mobile devices

If most of your users are coming to mobile, you can resize 1080p videos to lower resolutions like 720p or 480p depending on the device or context. 480p for example is nothing but resizing the video to height 480px. This can be done using the h height transformation parameter in the URL.

For example:

https://ik.imagekit.io/ikmedia/sample-video.mp4?tr=h-480

While doing this automatic format conversion and compression are also done resulting in a very small size of video.


4. Adaptive Bitrate Streaming (ABS)

For the best playback experience across all network conditions and device types (if this varies in your case), you can use Adaptive Bitrate Streaming (ABS) with ImageKit.

It automatically serves lower bitrate versions on slower connections and higher quality on fast connections, and can also adapt to device resolution resulting in good visual quality and smooth playback, specially for mobile viewers that experience poor network speeds.

For example, you can create a HLS manifest for ABS using ImageKit’s URL-based transforms as shown below:

https://ik.imagekit.io/ikmedia/sample-video.mp4/ik-master.m3u8?tr=sr-360_480_720