Video Optimization

Videos are becoming an essential part of modern web applications. However, they can be large in file size, and slow loading times can degrade the playback experience.

ImageKit automates many aspects of video optimization for web delivery and provides a range of features that allow you to tweak the optimization settings further to suit your specific requirements.

Video optimization is the process of compressing and converting videos to reduce their file size while maintaining the best possible quality. This process ensures that videos load quickly and play smoothly on all devices.

• Video compression - Reducing the video file size while maintaining visual quality using lossy compression techniques. Learn how automatic video compression works in ImageKit.
• Video format selection - Choosing the right output video format based on the video content and device. Learn how automatic format conversion works in ImageKit.
• Video resizing - Changing the dimensions of a video on the server side to fit the application layout on the front end. Learn how to correctly resize videos.
• Adaptive bitrate streaming - Delivering videos at different quality levels based on the user's network speed. Learn how to implement adaptive bitrate streaming with ImageKit.
• Lazy loading - Loading videos only when the user plays them. Learn how to lazy load videos.

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

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

Since our eyes are better at seeing differences in brightness than color, the video encoder stores more detail for brightness and less for color. This helps reduce the file size without losing much quality.

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

See the difference in file size and quality between a video at quality 90 and quality 50.

Format Optimization is the process of delivering the best video format to the end-user while considering various factors such as requesting device capabilities, browser support for certain video formats, and your preferences. Ensuring the right format helps you reduce the size of the video and, subsequently, the playback time.

ImageKit chooses between H.264, VP9, and AV1 codecs and automatically delivers the video in the appropriate format based on browser support. You can control the output format using the format parameter or from the dashboard settings.

• H.264—This is a widely supported video codec that provides good quality and compression. It is supported by most browsers and devices. Use H. 264 to ensure compatibility with older devices.
• VP9 is a high-quality video codec with better compression than H.264. Modern browsers and devices support it. For better compression and quality, use VP9.
• AV1—It is the predecessor to VP9 and provides better compression and quality. It is supported by modern browsers and devices. Use AV1 for the highest quality at the lowest file size.

Resizing videos means resizing the dimensions of videos on the server side to fit the application's layout on the front end. The lower the resolution of the video, the smaller the file size and the faster the loading time.

You can resize videos using the height (h) and width (w) parameters. Learn more about basic video resizing and cropping.

Lazy loading videos means preventing browser requests for videos until the user explicitly plays them or scrolls near them. This technique can improve the initial loading time of the web page and reduce bandwidth usage.

You can leverage preload="none" attribute in the video tag to lazy load videos. This attribute tells the browser not to download the video until the user hits the play button.

<video controls preload="none">
  <source src="https://ik.imagekit.io/demo/sample-video.mp4" type="video/mp4">
 Your browser does not support the video tag.
</video>

You can also check the following libraries for lazy-loading videos:

• vanilla-lazyload and lozad.js are highly efficient options that rely on the Intersection Observer. They require polyfills for compatibility with older browsers.
• yall.js incorporates both Intersection Observer and event handlers, offering a robust solution. It can also handle the lazy loading of video poster images via a data-poster attribute.
• If you're developing with React, consider react-lazyload. Although it doesn't utilize Intersection Observer, it provides a method for lazy loading that is familiar to those accustomed to React development.

ImageKit.io allows you to choose a quality level between 1 and 100. 1 results in the lowest perceptual quality and smallest file size. 100 results in the highest perceptual quality and biggest file size.

Default value - 50. You can change the default quality setting from the dashboard.

URL - https://ik.imagekit.io/demo/sample-video.mp4?tr=h-300,w-300,q-90

The video size is 3.3MB, which is larger than the original 1.1MB video.

URL - https://ik.imagekit.io/demo/sample-video.mp4?tr=h-300,w-300,q-50

The video size is 406KB, which is less than half of the original 1.1MB video. The file size is reduced by 60%, and there is no perceptual change in the output video.

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

Possible values include auto ,mp4 , webm.

Default value - auto. You can disable automatic video format conversion from the dashboard settings.

Used to specify the audio codec for encoding the output.

Possible values include aac, opus, and none.

Use none to remove audio from the source video. So, the output will have no audio.

Used to specify the video codec for encoding the output.

Possible values include h264, vp9, av1 and none

Use none to extract audio from the source video. The output will be an audio file.