Media optimization

Last updated: Oct-07-2022


Media optimization involves delivering images and videos with the smallest possible file size while maintaining visual quality. Optimizing media means saving bytes and improving performance for your website: the fewer bytes per asset, the faster the browser can download and render the content on your users' screens. Media optimization also plays a big role in the three Core Web Vitals outlined by Google, a key component of SEO for your site. When loking at media optimization, research shows that site speed is directly related to visitor satisfaction and even monetary conversions.

For example, surveys performed by and Gomez reported statistics including:

  • Half of web users expect a website to load within two seconds.
  • A 1-second delay in page load time can decrease visitor satisfaction by 16% and can also lead to a drop in conversion of 7% or more.
  • Load time is a major contributing factor to page abandonment, and the abandonment increases as a percentage with every second of load time, with nearly 40% of users abandoning a page after 3 seconds.
  • 73% of mobile internet users report that they've experienced problems with page load times on their devices.

These statistics are from 2009 and 2010, and it's reasonable to assume that visitors' expectations have only increased over time.

Most of the time, it is media that has the most impact on slow load time.

Cloudinary's built-in fast CDN delivery helps to get all resources to your users quickly. Additionally, Cloudinary automatically performs certain optimizations on all transformed images and videos by default. But beyond this, Cloudinary also provides many features that enable you to further optimize your media to fit your needs.

Learn about:

  • Image optimization: How to optimize the delivery of your images by resizing, adjusting the quality, and using the most optimal formats.
  • Video optimization: How to optimize the delivery of your videos, including how to use optimal formats, codecs and bitrates as well as resizing and adjusting the visual quality.

See also: Responsive images

Core Web Vitals

One of the best ways to optimize your website and boost your SEO is to adhere to the Core Web Vitals outlined by Google. The Core Web Vitals are a subset of the broader Web Vitals initiative and media optimization plays a big role in this.

The three Core Web Vitals, as documented by Google are:

  • Largest Contentful Paint (LCP): measures the loading performance of your page. The LCP metric reports the render time of the largest image or text block visible within the viewport. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

    Optimizing your media is an important component in improving the LCP time.

  • Cumulative Layout Shift (CLS): measures the visual stability of your page when it loads. To provide a good user experience, pages should maintain a CLS of less than 0.1.

    Loading your media assets in the right way can be key to ensuring the CLS is below 0.1.

  • First Input Delay (FID): measures the interactivity of your page. To provide a good user experience, pages should have a FID of less than 100 milliseconds. While FID is an important metric to try and improve, your media is not directly related. We recommend reviewing the linked documentation to help you with this one.

Improve LCP time

Optimizing your media plays a big role in reducing the time it takes for your largest contentful paint. Here are a few techniques you can use to speed things up:

  • Compress your media. Applying Cloudinary's q_auto and f_auto transformations to all of your delivered media ensures that it will be delivered to your users with the best visual quality and file format for their browser and device at the smallest possible size. Compressing your media using Cloudinary will easily and quickly improve LCP time.
  • Make your images responsive. Delivering images responsively means ensuring they are the most optimal size for each user's device display. This will ensure faster speeds and a reduced LCP.
  • Use lazy loading. Loading your media lazily is a great way to optimize your page load times and can also benefit LCP while still ensuring your users see relevant media as expected. Due to the way LCP is calculated, avoid lazy loading any images that are shown above the fold on your pages. Our JavaScript frameworks provide an out-of-the-box solution for lazy loading with Cloudinary that gives you complete control over the images to apply lazy loading to. Take a look at the video tutorial on advanced image components for how to add this to your website or application.
  • Use low quality image placeholders. Replacing your images with low quality placeholders until the full images have loaded is another technique that provides similar benefits to lazy loading. You could even use both together, so that images above the fold use low quality placeholders and the rest of your images are loaded lazily. Low quality image placeholders can be displayed in a variety of ways; Cloudinary's JavaScript frameworks have dedicated components to make this simple, as this video tutorial demonstrates. You can find other techniques outlined in this blog post and more specifically, you can see how to use the vectorize effect(e_vectorize in URLs) here.
  • Replace GIFs with videos. Animated GIFs are notoriously heavy components of a page and can cause your LCP time to be larger than it should be. Replacing your animated GIFs with looping videos means they load faster and only the poster image is included in the LCP measurement.
    You can apply the compression techniques listed above to your poster images too.

Improve your CLS score

Cumulative layout shift is all about ensuring your page doesn't jump about when it's loading. The way your page is structured and loaded is important in reducing any jumpiness. Correctly setting boundaries for your media using CSS and combining these with low quality image placeholders helps ensure that your page doesn't shift and you have media in position quickly. You can also combine placeholders with responsive images for an even more enhanced experience and greater improvement to your CLS score. See the advanced image components tutorial for how to use image placeholders with JavaScript, or read more about it in this blog post.

Learn more

Optimization tips video tutorial

✔️ Feedback sent!

Rate this page: