> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# 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]:resizing_and_cropping#automatic_cropping_g_auto

## 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 |
--|--|--|--|--|
[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 to certain plans only  |

## 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_effects_and_enhancements#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](effects_and_artistic_enhancements#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)

## Best practices

Consider the following best practices for optimization when looking to improve your [Resize](#resize), [Format](#format) and [Quality](#quality) optimization metrics.

### Resize

#### Reduce dimensions

[Downscale or crop](resizing_and_cropping) 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](resizing_and_cropping#resize_and_crop_modes) you use depends on your use case. For example, to limit the width of images and videos to 400 pixels, use `c_limit,w_400`:

![Woman with image width limited to 400 pixels](https://res.cloudinary.com/demo/image/upload/c_limit,w_400/woman.jpg)

```nodejs
cloudinary.image("woman.jpg", {width: 400, crop: "limit"})
```

```react
new CloudinaryImage("woman.jpg").resize(limitFit().width(400));
```

```vue
new CloudinaryImage("woman.jpg").resize(limitFit().width(400));
```

```angular
new CloudinaryImage("woman.jpg").resize(limitFit().width(400));
```

```js
new CloudinaryImage("woman.jpg").resize(limitFit().width(400));
```

```python
CloudinaryImage("woman.jpg").image(width=400, crop="limit")
```

```php
(new ImageTag('woman.jpg'))
	->resize(Resize::limitFit()->width(400));
```

```java
cloudinary.url().transformation(new Transformation().width(400).crop("limit")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", width: 400, crop: "limit")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Crop("limit")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.limitFit().width(400)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setCrop("limit")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().width(400).crop("limit")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.resize(Resize.limitFit().width(400)));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 resize(Resize.limitFit() { width(400) }) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {width: 400, crop: "limit"})
```

```react_native
new CloudinaryImage("woman.jpg").resize(limitFit().width(400));
```

#### 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](responsive_images) documentation and decide which method of implementation best suits your environment. 

#### Limit the width of delivered images by default

> **NOTE**: The [Optimize by default](optimize_by_default_settings) settings are available to certain plans only.

Deliver images limited to a specific width depending on the viewing device. See [Default image width](optimize_by_default_settings#default_image_width) for details.

**Action:** 

1. Log into your [Cloudinary Console](https://console.cloudinary.com/console).
1. Click the **Settings** button. 
1. Click **Optimization** under **Product environment settings** to see **Optimize by default**. 
1. Select **Limit maximum image width** and optionally change the widths for mobile and desktop.

![Default image width setting](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1683798132/docs/optimization/limit_image_width.png "thumb: c_scale,w_500,dpr_2.0, width: 500, popup: true")

### Format

#### Use automatic format

Use [automatic format selection](image_optimization#automatic_format_selection_f_auto) to deliver your assets in the optimal format for the user's device and browser.

**Action:** Add `f_auto` to your delivery URLs.

![Woman with f_auto](https://res.cloudinary.com/demo/image/upload/f_auto/woman.jpg "thumb: w_200")

```nodejs
cloudinary.image("woman.jpg", {fetch_format: "auto"})
```

```react
new CloudinaryImage("woman.jpg").delivery(format(auto()));
```

```vue
new CloudinaryImage("woman.jpg").delivery(format(auto()));
```

```angular
new CloudinaryImage("woman.jpg").delivery(format(auto()));
```

```js
new CloudinaryImage("woman.jpg").delivery(format(auto()));
```

```python
CloudinaryImage("woman.jpg").image(fetch_format="auto")
```

```php
(new ImageTag('woman.jpg'))
	->delivery(Delivery::format(
	Format::auto()));
```

```java
cloudinary.url().transformation(new Transformation().fetchFormat("auto")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", fetch_format: "auto")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat("auto")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.delivery(Delivery.format(
	Format.auto())));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat("auto")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().fetchFormat("auto")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.delivery(Delivery.format(
	Format.auto())));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 delivery(Delivery.format(
	Format.auto())) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {fetch_format: "auto"})
```

```react_native
new CloudinaryImage("woman.jpg").delivery(format(auto()));
```

```nodejs
cloudinary.image("woman.jpg", {fetch_format: "auto"})
```

```react
new CloudinaryImage("woman.jpg").delivery(format(auto()));
```

```vue
new CloudinaryImage("woman.jpg").delivery(format(auto()));
```

```angular
new CloudinaryImage("woman.jpg").delivery(format(auto()));
```

```js
new CloudinaryImage("woman.jpg").delivery(format(auto()));
```

```python
CloudinaryImage("woman.jpg").image(fetch_format="auto")
```

```php
(new ImageTag('woman.jpg'))
	->delivery(Delivery::format(
	Format::auto()));
```

```java
cloudinary.url().transformation(new Transformation().fetchFormat("auto")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", fetch_format: "auto")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat("auto")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.delivery(Delivery.format(
	Format.auto())));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat("auto")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().fetchFormat("auto")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.delivery(Delivery.format(
	Format.auto())));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 delivery(Delivery.format(
	Format.auto())) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {fetch_format: "auto"})
```

```react_native
new CloudinaryImage("woman.jpg").delivery(format(auto()));
```

#### Use automatic format by default

> **NOTE**: The [Optimize by default](optimize_by_default_settings) settings are available to certain plans only.

Apply automatic format to all the assets that are delivered from your product environment. 

**Action:** 

1. Log into your [Cloudinary Console](https://console.cloudinary.com/console).
1. Click the **Settings** button. 
1. Click **Optimization** under **Product environment settings** to see **Optimize by default**. 
1. Select **Automatic format** and apply it to both images and videos.

![Default image format setting](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1683798132/docs/optimization/automatic_format.png "thumb: c_scale,w_500,dpr_2.0, width: 500, popup: true")

##### 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](image_optimization#automatic_format_selection_f_auto) (`f_auto`). That way, an AVIF will be delivered to any browser that supports it. 

**Action:** Add `f_auto` to your delivery URLs and [contact support](https://support.cloudinary.com/hc/en-us/requests/new) to enable AVIF for `f_auto`.

![Woman with f_auto](https://res.cloudinary.com/demo/image/upload/f_auto/woman.jpg "thumb: w_200")

##### 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](https://support.cloudinary.com/hc/en-us/requests/new) to disable WDP for `f_auto`.

##### 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](native_mobile_development#format) for loading images in your mobile app, for example adding  `f_heic` to your iOS delivery URLs.

![Woman with HEIC format](https://res.cloudinary.com/demo/image/upload/f_heic/woman.jpg "thumb: w_200, with_image: false")

```nodejs
cloudinary.image("woman.jpg", {fetch_format: "heic"})
```

```react
new CloudinaryImage("woman.jpg").delivery(format(heic()));
```

```vue
new CloudinaryImage("woman.jpg").delivery(format(heic()));
```

```angular
new CloudinaryImage("woman.jpg").delivery(format(heic()));
```

```js
new CloudinaryImage("woman.jpg").delivery(format(heic()));
```

```python
CloudinaryImage("woman.jpg").image(fetch_format="heic")
```

```php
(new ImageTag('woman.jpg'))
	->delivery(Delivery::format(
	Format::heic()));
```

```java
cloudinary.url().transformation(new Transformation().fetchFormat("heic")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", fetch_format: "heic")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat("heic")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.delivery(Delivery.format(
	Format.heic())));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat("heic")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().fetchFormat("heic")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.delivery(Delivery.format(
	Format.heic())));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 delivery(Delivery.format(
	Format.heic())) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {fetch_format: "heic"})
```

```react_native
new CloudinaryImage("woman.jpg").delivery(format(heic()));
```

### Quality

#### Use automatic quality

Use [automatic quality selection](image_optimization#automatic_quality_selection_q_auto) to reduce the size of your delivered assets with minimal perceptual quality loss.

**Action:** Add `q_auto` to your delivery URLs.

![Woman with q_auto](https://res.cloudinary.com/demo/image/upload/q_auto/woman.jpg "thumb: w_200")

```nodejs
cloudinary.image("woman.jpg", {quality: "auto"})
```

```react
new CloudinaryImage("woman.jpg").delivery(quality(auto()));
```

```vue
new CloudinaryImage("woman.jpg").delivery(quality(auto()));
```

```angular
new CloudinaryImage("woman.jpg").delivery(quality(auto()));
```

```js
new CloudinaryImage("woman.jpg").delivery(quality(auto()));
```

```python
CloudinaryImage("woman.jpg").image(quality="auto")
```

```php
(new ImageTag('woman.jpg'))
	->delivery(Delivery::quality(
	Quality::auto()));
```

```java
cloudinary.url().transformation(new Transformation().quality("auto")).imageTag("woman.jpg");
```

```ruby
cl_image_tag("woman.jpg", quality: "auto")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto")).BuildImageTag("woman.jpg")
```

```dart
cloudinary.image('woman.jpg').transformation(Transformation()
	.delivery(Delivery.quality(
	Quality.auto())));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto")).generate("woman.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().quality("auto")).generate("woman.jpg");
```

```flutter
cloudinary.image('woman.jpg').transformation(Transformation()
	.delivery(Delivery.quality(
	Quality.auto())));
```

```kotlin
cloudinary.image {
	publicId("woman.jpg")
	 delivery(Delivery.quality(
	Quality.auto())) 
}.generate()
```

```jquery
$.cloudinary.image("woman.jpg", {quality: "auto"})
```

```react_native
new CloudinaryImage("woman.jpg").delivery(quality(auto()));
```

#### 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.

**Action:** 

1. Log into your [Cloudinary Console](https://console.cloudinary.com/console).
1. Click the **Settings** button. 
1. Click **Optimization** under **Product environment settings** to see **Default video quality** and **Default image quality**. 
1. 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.  

![Default quality settings](https://cloudinary-res.cloudinary.com/image/upload/q_auto/f_auto/bo_1px_solid_gray/v1671707494/docs/optimization/default_quality_settings.png "thumb: w_700,dpr_2, width:700, popup:true")

## Analyze media to improve optimization

Use the [Cloudinary Media Inspector](media_inspector_browser_extension) browser extension to analyze all media assets on your site and identify optimization opportunities. The Media Inspector helps you find unoptimized assets, oversized files, and other performance issues that may be impacting your site's speed and user experience.

### Find unoptimized assets

To identify assets that aren't using Cloudinary's automatic optimizations:

1. Click the **Cloudinary Media Inspector** button in your browser's extensions toolbar.
2. In the **Media Overview** page, enter `!f_auto AND !q_auto` in the **URL** search field to filter for assets that aren't using automatic format and quality optimizations.
3. Optionally, add additional filters like `Image` or `Video` in the **Content Type** field to narrow your search.

![Media Inspector view filtered results](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/inspector_chrome_extension/filtered-image-unoptimized.png "thumb: w_700,dpr_2, width:700, popup:true, caption: Media Inspector: filter results")

The results show all assets on the page that could benefit from adding [f_auto][f_auto_link] and [q_auto][q_auto_link] to their delivery URLs.

### Find oversized assets

To identify assets that are larger than necessary:

1. Click the **Cloudinary Media Inspector** button in your browser's extensions toolbar.
2. In the **Media Overview** page, enter a size threshold in the **Size** field, such as `>500000` to find assets over 500 KB.
3. Sort the results by clicking the **Size** heading to see the largest files first.

![Media Inspector view filtered results](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/inspector_chrome_extension/filtered-sorted-over-500k.png "thumb: w_700,dpr_2, width:700, popup:true, caption: Media Inspector: filter results")

The information at the bottom of the screen updates based on your filtered results, showing you stats for minimum, maximum, average, and total delivered bytes, in addition to bytes saved.

### Find incorrectly sized assets

The **Scale Ratio** column in the Media Inspector indicates whether your images and videos are being upscaled, downscaled, or displayed with modified aspect ratios. This helps you identify assets that aren't sized appropriately for their display dimensions.

`scale ratio = served resolution / display resolution`

* **A scale ratio of 1.00** means the asset is served at exactly the right resolution for the display, either because it's stored at the correct resolution, or because it's served with Cloudinary resize transformations applied.

* **A scale ratio less than 1.00** means the asset is being upscaled, which may cause quality issues. Consider applying an image enhancement transformation to the delivered image.

* **A scale ratio greater than 1.00** means the asset is being downscaled. The served asset is larger than required, so delivering this asset uses more bandwidth than required. Consider [resizing][resize_link] these assets in the delivery URL so that they're served at the display size.

![Media Inspector scale ratio greater than 1.00](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/inspector_chrome_extension/downscale_proportionally.png "thumb: w_300,dpr_2, width:300, popup:true, caption: Media Inspector: scale ratios")

#### Mismatched width and height scaling

Hovering over the **Scale Ratio** shows you the **Width Ratio** and **Height Ratio** separately, where:

* `width ratio = served width / display width`
* `height ratio = served height / display height`

If the width and height ratios are different, the displayed asset may appear squashed or stretched because the display aspect ratio differs from the source aspect ratio. Consider using a [smart cropping][smart_cropping_link] method to make your image fit the available space without losing important details.

![Media Inspector scale ratio less than 1.00 and mismatched width and height](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/inspector_chrome_extension/upscaled_stretched.png "thumb: w_300,dpr_2, width:300, popup:true, caption: Media Inspector: scale ratio elements showing stretching")

For more information on using the Media Inspector, see the [Media Inspector browser extension](media_inspector_browser_extension) documentation.

## 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.

### 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}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=24 :player=cld} | [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}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=56 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=39 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=07 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=47 :player=cld} | 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).|