> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# Optimization overview


[f_auto_link]:image_optimization#automatic_format_selection_f_auto
[q_auto_link]:image_optimization#automatic_quality_selection_q_auto
[resize_link]:resizing_and_cropping
[smart_cropping_link]:image_automatic_gravity

## Overview

Asset optimization involves delivering [images](image_optimization) and streaming [videos](video_optimization) 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](#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:

{table:class=no-borders overview} Feature  | Complexity | Description | Considerations |
--|--|--|--|--|
[Image optimization best practices](image_optimization#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](image_optimization#how_to_optimize_image_quality)  | Beginner | Delivery URL parameters that instruct Cloudinary to automatically deliver the asset with the best [quality](transformation_reference#q_quality) and [format](transformation_reference#f_format) for the browser and device viewport. | ✅ Easily applied to all media assets, including [PDFs](pdf_optimization)  ✅ Optional configurations for greater control  💡 Less suitable for longer videos where streaming is preferred |
[Asset Resizing](image_optimization#how_to_optimize_image_sizing) | 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](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](optimize_by_default_settings) | Beginner | Optimization settings in your console that apply quality, format and resize optimizations globally to your [images](image_optimization#default_optimizations) and [videos](video_optimization#default_optimizations). |  ✅ Automatically applied to all assets ✅ Optional configurations for greater control   💡 Less suitable for longer videos where streaming is preferred💡 **Available only to [Enterprise](https://cloudinary.com/pricing) plans using the [image impressions](developer_onboarding_faq_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](https://web.dev/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)](https://web.dev/lcp/): measures how long the largest element in the visible viewport takes to load. The element could be an image, video, or [something else](https://web.dev/articles/lcp#what_elements_are_considered). 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)](https://web.dev/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)](https://web.dev/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](image_optimization#how_to_optimize_image_quality) and [f_auto](image_optimization#how_to_optimize_image_format) 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](responsive_images) 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](video_resizing_and_cropping) 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](video_previews_and_posters#video_thumbnails), 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](advanced_image_components_tutorial) demonstrates. You can find other techniques outlined in this [blog post](https://cloudinary.com/blog/low_quality_image_placeholders_lqip_explained) and more specifically, you can see how to use the vectorize effect(`e_vectorize` in URLs) [here](artistic_effects#creating_a_low_quality_image_placeholder_svg). 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](https://caniuse.com/?search=fetchpriority) for this feature)
    * not using `unload` event listeners or the `Cache-Control: no-store` directive, as they disable the [bfcache](https://web.dev/articles/bfcache) in the browser
    * using the [Speculation Rules API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) if possible (check [browser support](https://caniuse.com/?search=spec%20rules) for this feature).

> **TIP**:
>
> :title=Optimizing page load times
> There are other ways to optimize your page load times, though these do not benefit LCP directly:

> * **Lazy loading**: Loading your media lazily is a great way to optimize your page load times. However, for LCP specifically, you should 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. See, for example, the section on  [lazy loading using the React SDK](react_image_transformations#lazy_loading) for how to add this to specific images.

> * **Replace animated images with videos**: Animated images are notoriously heavy components of a page and can cause your page load times to be larger than they should be. [Replacing your animated images](animated_images#converting_an_animated_gif_to_video) with looping videos means they load faster, though this may have little impact on the LCP measurement, as it's just the time for the first frame to load that's counted for both animated images and videos.

### 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](responsive_images) for an even more enhanced experience and greater improvement to your CLS score. See the [advanced image components](advanced_image_components_tutorial#image_placeholders) tutorial for how to use image placeholders with JavaScript, or read more about it in this [blog post](https://cloudinary.com/blog/low_quality_image_placeholders_lqip_explained).

> **Learn more**:
>
> * Take a look at Akshay's blog post on [Understanding and using Core Web Vitals](https://akshayranganath.github.io/Understanding-And-Using-Core-Web-Vitals/)

> * Watch the MX Matters video podcast on [How Google's Core Web Vitals Affect SEO and Visitor Traffic](https://cloudinary.com/podcasts/how-googles-core-web-vitals-affect-seo-and-visitor-traffic)


## Optimization tips video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.
{videoTranscript:publicId=training/m-tutorial-optimizaton-tips-o}

### Tutorial contents This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Optimization tip #1 - scale images to their display size
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | [Resizing images](resizing_and_cropping) to their display size can reduce the bandwidth required to deliver them. Use Cloudinary's `c_scale` parameter, together with a width or height, to scale an image to its display size. You can also automate resizing by taking advantage of Cloudinary's support for [responsive](responsive_images) design.|

### Optimization tip #2 - automate quality
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Use Cloudinary's quality parameter with a value of auto `q_auto`, a smart algorithm that reduces the size of your images while retaining their visual quality. If a quality parameter is not applied in your URL, Cloudinary uses a default setting, **Default image quality**, which can be modified in Cloudinary Console under **Settings > Optimization**.|

### Optimization tip #3 - auto select file format
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Use Cloudinary's fetch format parameter with a value of auto  `f_auto` to automatically detect which browser is requesting the image so that it may select and deliver the image in its most efficient format. |

### Optimization tip #4 - change format to reduce file size
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | You can use the lossy flag `fl_lossy` to convert images from PNG to JPEG if the alpha channel is not being used, to reduce the file size.|

### More optimizations
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | You can get more optimizations and insights based on your usage patterns by going to the **Reports** page in your Cloudinary [Console](https://console.cloudinary.com/console).|