Last updated: Apr-25-2023
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:
|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 assets
✅ 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
|Adaptive bitrate streaming||Advanced||Configuration to stream longer videos in chunks that adapt to the network conditions of the user.||✅ Works best with longer videos with large file sizes|
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.
e_vectorizein 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.
TipYou can apply the compression techniques listed above to your poster images too.
Improve your CLS score
- Take a look at Akshay's blog post on Understanding and using Core Web Vitals
- Watch the MX Matters video podcast on How Google's Core Web Vitals Affect SEO and Visitor Traffic
Consider the following best practices for optimization when looking to improve your Resize, Format and Quality optimization metrics.
Downscale or crop your images and videos to match the size at which they'll be displayed in the browser. Delivering a larger size asset is a waste of bandwidth.
Action: Add a resize action to your delivery URLs. The mode you use depends on your use case. For example, to limit the width of images and videos to 400 pixels, use
Make images responsive
Responsive images change size depending on the viewport. Use Cloudinary's ability to resize images on the fly to deliver the best size of image at all times.
Action: Take a look at the Responsive images documentation and decide which method of implementation best suits your environment.
Use automatic format
Use automatic format selection to deliver your assets in the most optimal format for the user's device and browser.
f_auto to your delivery URLs.
Add AVIF to automatic format selection
The AVIF image format has the potential to save more bandwidth than any other format. Not all browsers support AVIF, though, so rather than delivering all your images as AVIF, you should enable it for automatic format selection (
f_auto). That way, an AVIF will be delivered to any browser that supports it.
f_auto to your delivery URLs and contact support to enable AVIF for
Remove WDP from automatic format selection
The WDP (JPEG XR) image file type used to be a significant format, but this is no longer the case. Therefore, you can safely remove this from your list of automatic formats to save transformations.
Action: Contact support to disable WDP for
Use the correct format for mobile apps
Ensure you're using the right format for the version and device when loading images in your mobile apps.
Action: Add the right format for loading images in your mobile app, for example adding
f_heic to your iOS delivery URLs.
Use automatic quality
Use automatic quality selection to reduce the size of your delivered assets with minimal perceptual quality loss.
q_auto to your delivery URLs.
Make default quality automatic
Your default quality setting is applied to every asset that's delivered with any transformation but without any quality transformations applied. If your default quality setting is a numeric value, change it to an automatic one.
- Log into your Cloudinary Console.
- Click the Settings button.
- Click Optimization under Product environment settings to see Default video quality and Default image quality.
- For each, select one of the Automatic options - good quality and economy mode are the most recommended - economy mode gives better performance but may have more perceptual quality loss.
Optimization tips video tutorial