Optimization overview

Overview

Asset optimization involves delivering images and streaming videos with the smallest possible file size while maintaining visual quality. Optimizing 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.

Asset optimization also plays a big role in the three Core Web Vitals outlined by Google, a key component of SEO for your site. When looking at media optimization, research shows that site speed is directly related to visitor satisfaction and monetary conversions.

Cloudinary's built-in fast CDN delivery helps to get all resources to your users quickly but we also provide many features that enable you to further optimize your media to fit your needs. These features vary in complexity and suitability and can be combined together to achieve the greatest level of optimization:

Feature	Complexity	Description	Considerations
Image optimization best practices	Beginner	A short, prioritized set of the most impactful guidelines to follow, so you can quickly get the most out of Cloudinary's powerful automatic optimization capabilities. The sections that follow go into more detail and expose additional fine-tuning options.	✅ Quick wins that apply to most use cases ✅ A great starting point before fine-tuning
Auto optimizations	Beginner	Delivery URL parameters that instruct Cloudinary to automatically deliver the asset with the best quality and format for the browser and device viewport.	✅ Easily applied to all media assets, including PDFs ✅ Optional configurations for greater control 💡 Less suitable for longer videos where streaming is preferred
Asset Resizing	Beginner	Adjustments to the asset size that Cloudinary applies before delivering your images and videos, to minimize the overall file size of the delivered file and better match the size they'll be displayed at.	✅ Fastest way to resize and deliver ✅ Combines well with auto optimizations
Responsive images	Advanced	Configuration to ensure your images automatically adjust in size based on the user's viewport.	✅ Most optimal way to resize and deliver 💡 Requires additional setup 💡 Can result in many derived images per URL if configured incorrectly
Default optimizations	Beginner	Optimization settings in your console that apply quality, format and resize optimizations globally to your images and videos.	✅ Automatically applied to all assets ✅ Optional configurations for greater control 💡 Less suitable for longer videos where streaming is preferred 💡 Available only to Enterprise plans using the image impressions metric .

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 how long the largest element in the visible viewport takes to load. The element could be an image, video, or something else. For autoplaying videos and animated images, the time taken for the first frame to display is measured. 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.

• Interaction to Next Paint (INP): measures your page's overall responsiveness to user interactions. To provide a good user experience, pages should have an INP of less than 200 milliseconds. While INP 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 optimal size for each user's device display. This will ensure faster speeds and a reduced LCP.
• Deliver your videos at the right size. Using Cloudinary to resize videos on the server side means that they can be delivered at the size at which they're displayed, reducing the number of bytes to deliver. LCP measures either the first frame of the video or the poster image, whichever is faster, so remember to optimize your poster images too. Note that when you don't explicitly add a poster attribute, the first frame of the video is used as the poster.
• 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. Note that images with less than 0.05 bits of image data per pixel displayed are not counted towards the LCP metric.
• Make LCP media discoverable. Load delay is a contributing factor to the LCP score, and this can be reduced by helping the browser to find the element containing the LCP in the DOM as soon as possible, by:
  • not using lazy loading for the LCP
  • reducing the complexity of the DOM
  • using the fetchpriority="high" attribute (check browser support for this feature)
  • not using unload event listeners or the Cache-Control: no-store directive, as they disable the bfcache in the browser
  • using the Speculation Rules API if possible (check browser support for this feature).

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.

Optimization tips video tutorial

Tutorial contents