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

# Optimize images


Optimizing your images is important for improving performance for your website or application.

This page provides an overview of considerations that can impact image optimization and covers the various Cloudinary optimization features and options you can use to make sure your images are delivered to your users in the quickest and best way possible, a key component in improving Core Web Vitals metrics.

> **See also**:
>
> * [Core Web Vitals](media_optimization#core_web_vitals)

> * [Video optimization](video_optimization)

> * [Audio optimization](audio_optimization)

## What is image optimization?

Optimizing an image involves delivering images in the format, dimensions, resolution, and quality that will yield the smallest possible file size while ensuring that the resulting image is appropriate for the specific content, the overall page design, the requesting device, and the expectations of your site visitors.

The following table summarizes the main elements that impact image file size and potential solutions for addressing those issues. However, in many cases, implementing the solutions on your own can be very time or labor intensive. Click the link on each issue to learn how to use Cloudinary functionality to implement these solutions with minimal or no coding.

|Issue | Problem | Possible Solutions |
|---|---|---|
|[Image quality](#how_to_optimize_image_quality) | Often photographs are delivered at their original extra-high resolution, for fear of losing too much visual quality or to make sure users with high-res (retina display and DPR 2+) devices will get the quality they expect. The result is a huge file and slow delivery speeds. | In most cases, you can significantly **lower quality without a significant visual impact**. Consider your image purpose and audience, and use the lowest possible quality that is acceptable for the image content, audience, and purpose.  When it's important to deliver top-quality images for high-res devices, use the `<picture>` element and its `srcset` attribute to deliver different resolutions for different devices.
|[Image format](#how_to_optimize_image_format)|All image formats use some form of image compression. Some image formats are also lossy, meaning they discard some pixel data. Lossy formats work quite well for some image content, but not for others. Different browsers support a variety of formats that may be more efficient than the standard JPG, PNG, and GIF formats. Delivering the standard formats for all browsers misses out on valuable savings from newer formats like AVIF and WebP.Small images, like buttons and logos are often a larger percentage of site images than designers realize and many appear on every page. These types of images don't look good in lossy formats, but delivering them as PNGs results in a large cumulative size for these images, which can slow your page load time.	 |Make sure **each image is delivered in the right format** for its image content.Take advantage of CDN services or other tools/logic to check which browser is making the request and **deliver different formats for different browsers** using the `<picture>` element and its `srcset` attribute.**Instead of large animated GIFs**, deliver animated WebP or use JPEG XR (with CSS Animations using the step property) to supported browsers, or convert to an MP4. You can also consider delivering lossy animated GIFs to get a smaller file when image quality is not a top priority.**Vector graphics (SVG)** are based on line, point, and shape markup, rather than pixels. Using vectors for geometric graphics, enables sharp results at every resolution and zoom, with a minimal file size.**CSS3 effects and animations** along with **web fonts** can sometimes be used to produce resolution-independent resources at a fraction of the size of the corresponding image.|
|[Image metadata](#default_optimizations)|By default, images contain a lot of metadata stored by cameras and graphics applications, but this data is completely unnecessary in delivered images.|As a best practice, keep the metadata in your original copy of the graphics, but remove it in delivered images.|
|[Image sizing and resizing](#how_to_optimize_image_sizing)|If you need to display an image at a size smaller than the original, and you rely on the browser to resize images, then you are delivering unnecessarily large files. This applies both to a standard image resize, and responsive design, which requires multiple different images sizes.|The required dimensions can be determined on the server side (before it is delivered to the browser). For responsive design, use the `<picture>` element and its srcset attribute to deliver different size images at different breakpoints.Even when resizing on the server side, keep in mind that you can crop to focus on important content, and not just scale down your images.|

## Default optimizations

Cloudinary performs various default optimizations when delivering media assets. You can control these for your product environment in the [Optimization Settings](https://console.cloudinary.com/app/settings/optimization) and override them through transformation parameters.

Certain plans include the ability to optimize format and size by default (see [Optimize by default](optimize_by_default_settings)). All plans let you optimize [image quality](#default_image_quality) by default and [strip metadata](#metadata_stripping).

> **NOTE**:
>
> Each of the default optimizations affect only the **delivered** image. The original image file remains unchanged.

### Default image quality

The **Default image quality** setting is applied to all images, except PNGs and PDFs, delivered from your product environment, but only if other transformations are also applied.

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

This applies a certain amount of compression to your images in order to reduce the weight of the image.

We recommend choosing an [automatic quality setting](#automatic_quality_selection_q_auto) to apply to all your transformed images rather than a [specific quality level](#set_the_quality_when_delivering_an_image). 

You can also choose to apply [chroma subsampling](#toggle_chroma_subsampling) by default to all your transformed images.

To override the default settings, set the [quality parameter](transformation_reference#q_quality) in your transformation (`q_` in URLs).

### Metadata stripping

When you deliver an image from Cloudinary with any transformation applied, Cloudinary strips all associated metadata from the transformed image file, except the following:

* JFIFVersion
* ResolutionUnit
* XResolution
* YResolution
* Colorspace
* DPI

To override this behavior and deliver a transformed image with all of its metadata intact, add the [fl_keep_iptc flag](transformation_reference#fl_keep_iptc). Alternatively, you can use the [fl_keep_attribution flag](transformation_reference#fl_keep_attribution) to keep the copyright-related metadata in the transformed image, but still strip the other metadata content that gets stripped by default.

> **NOTE**: When [automatic quality](#automatic_quality_selection_q_auto) (`q_auto` in URLs) is applied to the delivered image, either due to the [default image quality](#default_image_quality) setting or as a URL transformation parameter, the DPI and resolution metadata are also effectively stripped (the fields exist but you shouldn't rely on the values). To prevent this behavior, provide a quality value in the delivery URL, such as `q_80`.

## How to optimize image quality

The image quality setting defines the compression level to apply to an image. 

The setting you choose entails a trade-off between visual quality and file size: the lower the quality value, the more the file is compressed to a smaller file size, and the more data is lost in the process, the result of which is a loss of visual quality. At the higher quality levels, the loss of visual quality is barely noticeable to the human eye. The ultimate visual quality result also depends on other factors such as the size of the original image and the resolution of the user's monitor or mobile screen.

Adjusting the quality of your images to a level that still provides good visual output, is one of the most powerful tools in image optimization. You can often deliver images at less than half of the original file size with little to no visually noticeable difference. Optimizing image quality can also help improve your [Core Web Vitals](media_optimization#core_web_vitals) score.

There are a few ways to control the quality of images delivered from Cloudinary: 

* [Set the default quality for your product environment](#default_image_quality)
* [Use automatic quality selection (q_auto)](#automatic_quality_selection_q_auto)
* [Set the quality when delivering an image](#set_the_quality_when_delivering_an_image)

### Automatic quality selection (q_auto)

Cloudinary's intelligent quality and encoding algorithm analyzes an image to find the best quality compression level and optimal encoding settings based on the image content and the viewing browser, in order to produce an image with good visual quality while minimizing the file size. Cloudinary automates the file size versus quality trade-off decision, on the fly using perceptual metrics and heuristics that tune the quality settings based on the specific image content and format. Analyzing every image individually to find the optimal compression level and image encoding settings allows for precise adjustment of the compression level complemented by fine tuning of the encoding settings, and can significantly reduce the file size without any degradation noticeable to the human eye. 

To perform automatic quality selection and image encoding adjustments, set the `quality` transformation parameter to `auto` (`q_auto` in URLs) or apply one of the **Automatic** options as the [default image quality setting](#set_the_default_quality_for_your_product_environment) for your product environment. 

You can further fine-tune the automatic quality selection as follows:

* `q_auto`: The optimal balance between file size and visual quality. By default, this is the same as `q_auto:good`, while it can automatically switch to the more aggressive `q_auto:eco` mode (see the note on Save-data support below).
* `q_auto:best`: Less aggressive algorithm. Generates bigger files with potentially better visual quality. Example of a target audience: photography sites that display images with a high visual quality.
* `q_auto:good`: Ensuring a relatively small file size with good visual quality.
* `q_auto:eco`: More aggressive algorithm, which results in smaller files of slightly lower visual quality. Example of a target audience: popular sites and social networks with a huge amount of traffic.
* `q_auto:low`: Most aggressive algorithm, which results in the smallest files of low visual quality. Example of a target audience: sites using thumbnail images that link to higher quality images.

> **TIP**: For extra granularity, you can append `:sensitive` to the quality selection, which raises the quality above that level but below the level above. For example, `q_auto:good:sensitive` gives a quality level above `good`, but not as good as the `best` level. (`q_auto:sensitive` is the same as `q_auto:good:sensitive`.)

Here is an example of a photograph encoded using various automatic quality parameter values and the resulting file sizes:

Original (569KB)

q_auto:best (65.9KB)

q_auto:good (56.9KB)

q_auto:eco (45.0KB)

q_auto:low:sensitive (39.6KB)

q_auto:low (35.0KB)

![q_auto:eco](https://res.cloudinary.com/demo/image/upload/q_auto/woman.jpg "with_image: false")

```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()));
```

#### Save-Data support
Save-Data support is a feature included in the [Client-Hints](https://developer.mozilla.org/en-US/docs/Glossary/Client_hints) standard, which is already supported by Chrome and Opera browsers. The browsers send a special request header named `Save-Data` if the user has enabled data saving mode. When `q_auto` is specified and the `Save-Data: on` header reaches the CDN layer of Cloudinary, image compression and encoding will automatically switch to the `eco` mode (`q_auto:eco`) instead of the default `good` quality mode (`q_auto:good`). This feature has implications for using `q_auto` in [named transformations](image_transformations#automatic_quality_in_named_transformations).

#### Interactive demo: automatic image quality
The interactive image example below shows the effect that the various `auto` quality settings have on the visual quality of the beach image. The image is initially displayed with a quality setting of 100, and clicking on one of the buttons below the image will display the image using that particular quality setting. 

 

 https://res.cloudinary.com/demo/image/upload/w_600/q_100/beach_huts.jpg

 Quality: 
 100
 Size: 
 228KB

 auto:low
 auto:eco            
 auto:good
 auto:best
 100

> **NOTE**: You can set an override quality for a specific image in the [Media Library Edit Asset](dam_editing_and_transformations#editing_asset_details) page of that asset. When set, that quality will always override any `q_auto` setting specified in a URL for that asset. This can be useful to control the quality of an important image if you apply a `q_auto` default setting for your product environment, or if all images delivered through a particular process are delivered with a transformation that includes `q_auto`. Cloudinary also uses your overrides as input that can help it improve the `q_auto` algorithm.

**See also**: [q_auto for video](video_optimization#automatic_quality_q_auto)

### Set the quality when delivering an image 

If you want more control over the quality of an image, then you can set a specific level for the `quality` parameter (`q` in URLs). Specify a value between 1 (smallest file size possible) and 100 (best visual quality). Reducing the quality is a trade-off between visual quality and file size: the lower the quality value, the more the file is compressed to a smaller file size, the more data is lost in the process, and the result is a loss of visual quality. The loss of visual quality is barely noticeable to the human eye at the higher quality levels, and final visual quality also depends on other factors such as the size of the image and the resolution of the user's monitor or mobile screen.

For example, reducing the quality of the following image to 70 results in a file size of 69 KB compared to the original file size of 195 KB with a barely noticeable reduction in visual quality (the lower quality image is on the right of the slider):

![Image with quality set to 70](https://res.cloudinary.com/demo/image/upload/q_70/docs/quality-suit.jpg "with_image:false")

```nodejs
cloudinary.image("docs/quality-suit.jpg", {quality: 70})
```

```react
new CloudinaryImage("docs/quality-suit.jpg").delivery(quality(70));
```

```vue
new CloudinaryImage("docs/quality-suit.jpg").delivery(quality(70));
```

```angular
new CloudinaryImage("docs/quality-suit.jpg").delivery(quality(70));
```

```js
new CloudinaryImage("docs/quality-suit.jpg").delivery(quality(70));
```

```python
CloudinaryImage("docs/quality-suit.jpg").image(quality=70)
```

```php
(new ImageTag('docs/quality-suit.jpg'))
	->delivery(Delivery::quality(70));
```

```java
cloudinary.url().transformation(new Transformation().quality(70)).imageTag("docs/quality-suit.jpg");
```

```ruby
cl_image_tag("docs/quality-suit.jpg", quality: 70)
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(70)).BuildImageTag("docs/quality-suit.jpg")
```

```dart
cloudinary.image('docs/quality-suit.jpg').transformation(Transformation()
	.delivery(Delivery.quality(70)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(70)).generate("docs/quality-suit.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().quality(70)).generate("docs/quality-suit.jpg");
```

```flutter
cloudinary.image('docs/quality-suit.jpg').transformation(Transformation()
	.delivery(Delivery.quality(70)));
```

```kotlin
cloudinary.image {
	publicId("docs/quality-suit.jpg")
	 delivery(Delivery.quality(70)) 
}.generate()
```

```jquery
$.cloudinary.image("docs/quality-suit.jpg", {quality: 70})
```

```react_native
new CloudinaryImage("docs/quality-suit.jpg").delivery(quality(70));
```

  
    
  
  
    
  

#### Interactive demo: image quality levels

The interactive image example below shows the effect that the various quality settings have on an image's visual quality. The image is scaled down to a width of 600 pixels and initially displayed with a quality setting of 100. Click on the quality buttons below the image to see how different quality settings impact the image quality.

 

 https://res.cloudinary.com/demo/image/upload/w_600/q_100/beach_huts.jpg

 Quality: 
 100
 Size: 
 228KB

 10
 20
 30
 40
 50            
 60
 70
 80
 90           
 100

> **NOTES**:
>
> * Images in the WebP format are lossless when specifying a quality of 100, and lossy when specifying a quality less than 100. See the [How to support WebP images, save bandwidth and improve user experience](https://cloudinary.com/blog/how_to_support_webp_images_save_bandwidth_and_improve_user_performance) blog post for more information on the WebP format.

> * Images in the WebP format are lossless if the quality isn't specified and the original image's format is lossless (e.g., PNG).

> * Animated GIFs ignore the quality setting unless the `lossy` flag is added. See the [Lossy compression for optimizing animated GIFs](/blog/lossy_compression_for_optimizing_animated_gifs) article for more information.

#### Toggle chroma subsampling

Chroma subsampling is a method of encoding images by implementing less resolution for chroma information (colors) than for luma information (luminance), taking advantage of the human visual system's lower acuity for color differences than for luminance. To override the default behavior of whether to perform chroma subsampling, a separate value can be added to the quality parameter as follows:

* `444` can be added to prevent subsampling. For example: `q_80:444`
* `420` can be added to force subsampling. For example: `q_95:420`.

> **NOTE**: Chroma subsampling is not performed on images that include a text overlay unless specifically requested.

## How to optimize image format

Image formats can be lossy or lossless, each with its own compression algorithm. Each type gives better results on some types of image content, and poorer results on other types. Furthermore, some of the newer formats are only supported on some browsers. Optimizing image format can also help improve your [Core Web Vitals](media_optimization#core_web_vitals) score.

Choosing the right format to deliver each image can result in significant file size savings without sacrificing quality.

There are a couple of Cloudinary options you can use to address these issues:

* [Use automatic format selection (f_auto)](#automatic_format_selection_f_auto)
* [Set the format when delivering an image](#set_the_format_when_delivering_an_image)

### Automatic format selection (f_auto)

There are many formats for encoding images, with some formats better than others at compression and reducing the file size without impairing visual quality. Since different browsers support different image formats, the best solution to optimize delivery time and save bandwidth is to deliver the best format according to the browser used by each of your visitors.

The `fetch_format` parameter can be set to auto (`f_auto` in URLs) in order to perform automatic format selection based on the requesting browser. Depending on the browser and which [formats are enabled](#fauto_format_availability) for `f_auto` on your product environment, the image could be delivered as, for example, AVIF, JPEG XL, or WebP (or animated AVIF or animated WebP, if it is an animated image). If a browser does not support any of the optimized formats that `f_auto` is enabled to return, then the image is delivered in the format specified by the file extension.

For example, rather than the source format of JPEG (33.5 KB) being delivered for this scaled down image, depending on the browser, an AVIF (14.6 KB), WebP (16.1 KB) or JPEG XL (21.4 KB) could be delivered. The table shows other formats for comparison:

![Image delivered with f_auto](https://res.cloudinary.com/demo/image/upload/c_scale,w_500/f_auto/docs/shoes.jpg "with_image:false")

```nodejs
cloudinary.image("docs/shoes.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {fetch_format: "auto"}
  ]})
```

```react
new CloudinaryImage("docs/shoes.jpg")
  .resize(scale().width(500))
  .delivery(format(auto()));
```

```vue
new CloudinaryImage("docs/shoes.jpg")
  .resize(scale().width(500))
  .delivery(format(auto()));
```

```angular
new CloudinaryImage("docs/shoes.jpg")
  .resize(scale().width(500))
  .delivery(format(auto()));
```

```js
new CloudinaryImage("docs/shoes.jpg")
  .resize(scale().width(500))
  .delivery(format(auto()));
```

```python
CloudinaryImage("docs/shoes.jpg").image(transformation=[
  {'width': 500, 'crop': "scale"},
  {'fetch_format': "auto"}
  ])
```

```php
(new ImageTag('docs/shoes.jpg'))
	->resize(Resize::scale()->width(500))
	->delivery(Delivery::format(
	Format::auto()));
```

```java
cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .fetchFormat("auto")).imageTag("docs/shoes.jpg");
```

```ruby
cl_image_tag("docs/shoes.jpg", transformation: [
  {width: 500, crop: "scale"},
  {fetch_format: "auto"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .FetchFormat("auto")).BuildImageTag("docs/shoes.jpg")
```

```dart
cloudinary.image('docs/shoes.jpg').transformation(Transformation()
	.resize(Resize.scale().width(500))
	.delivery(Delivery.format(
	Format.auto())));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setFetchFormat("auto")).generate("docs/shoes.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .fetchFormat("auto")).generate("docs/shoes.jpg");
```

```flutter
cloudinary.image('docs/shoes.jpg').transformation(Transformation()
	.resize(Resize.scale().width(500))
	.delivery(Delivery.format(
	Format.auto())));
```

```kotlin
cloudinary.image {
	publicId("docs/shoes.jpg")
	 resize(Resize.scale() { width(500) })
	 delivery(Delivery.format(
	Format.auto())) 
}.generate()
```

```jquery
$.cloudinary.image("docs/shoes.jpg", {transformation: [
  {width: 500, crop: "scale"},
  {fetch_format: "auto"}
  ]})
```

```react_native
new CloudinaryImage("docs/shoes.jpg")
  .resize(scale().width(500))
  .delivery(format(auto()));
```

Format | Size
---|---
AVIF | 14.6 KB
GIF | 98.0 KB
JPEG | 33.5 KB
JPEG XL | 21.4 KB
JPEG XR | 17.3 KB
PNG | 190.0 KB
WebP | 16.1 KB

> **NOTES**:
>
> * You can also [specify a media type](video_optimization#specifying_media_type_with_f_auto) when using `f_auto`. If no file extension is provided, automatic format selection will deliver an image by default. Therefore, using the media type option is more beneficial for other media types.

> * If you're on a plan that includes [optimization by default settings](optimize_by_default_settings), you can select the **Automatic format** setting instead of including `f_auto` in your URLs.

#### Tips and considerations for using f_auto

* **Transformation counts**: Using `f_auto` may increase your [transformation counts](transformation_counts#auto_transformations) and storage usage, due to the different formats being derived for a single transformation URL. You can limit the number of potential delivery formats by [contacting support](https://support.cloudinary.com/hc/en-us/requests/new).
* **Bandwidth usage**: Generally, total bandwidth usage should decrease with use of `f_auto` due to the delivery of more optimized (smaller file size) media files. However, in some cases, you may experience increased bandwidth usage, particularly with email campaigns, due to the use of the "private" cache-control directive, which prevents intermediate caches from delivering potentially unsupported formats to requesting browsers.
* **AVIF and JPEG XL formats**: 
  * If your account plan uses the [image impressions metric](developer_onboarding_faq_image_impressions), AVIF and JPEG XL formats are automatically supported as possible `f_auto` formats. 
  * If your account plan uses the **image bandwidth metric**, AVIF, animated AVIF and JPEG XL are not supported for `f_auto` by default.  To discuss options for getting `f_auto` support for these formats,  [contact support](https://support.cloudinary.com/hc/en-us/requests/new).
  > **NOTE**: Small images (under 5000 pixels) are not automatically delivered as AVIF because the overhead of the file format outweighs the byte-savings of the optimized image. Instead, they are delivered as WebP.
* **Using f_auto with q_auto**: When automatic format (`f_auto`) is used in the same URL as [automatic quality](#automatic_quality_selection_q_auto) (`q_auto`): 
  * The PNG format may be selected when the automatic quality algorithm decides that it better fits the specific image. This allows delivering better looking and economical image files.
  * For JPEG images, if the automatic quality algorithm decides that no [chroma subsampling](#toggle_chroma_subsampling) should be performed, the WebP format is not selected because this lossy format always performs chroma subsampling, which might result in a lower visual quality for some images. The AVIF format could still be selected if this is supported by the requesting browser and enabled in your product environment.
* **Using developer tools for f_auto testing**: Be aware that if using developer tools to emulate different browsers, Cloudinary may return a format that is unsupported by the main browser, so images may not display as expected. 
* **Using f_auto for transparent images**: If `f_auto` is used to deliver an image that contains transparency, and the requesting browser does not support WebP or AVIF, then the image is delivered in PNG format instead of the JPEG format.
* **Using f_auto with fl_any_format**: Setting the `any_format` flag together with automatic quality (`q_auto,fl_any_format`) but without setting `f_auto`, will also allow switching to PNG8 encoding if the quality algorithm decides that it's more efficient.
* **JPEG XR**: JPEG XR is supported as a possible returned format for `f_auto` only for Cloudinary product environments created before April 2021 and is no longer supported by default. To add or remove this option, [contact support](https://support.cloudinary.com/hc/en-us/requests/new).
* **Using f_auto in named transformations**: `f_auto` is not effective if used in named transformations. [Learn more](image_transformations#limitations_of_named_transformations).
* **Browser support**: If you access an image by entering the Cloudinary delivery URL directly into a browser, `f_auto` may not return the expected format because the browser may not advertise its image support in the `Accept` header.

**See also**: [f_auto for video](video_optimization#automatic_format_selection_f_auto)

### Set the format when delivering an image

If your users upload images in a format that isn't ideal for the content, you can easily deliver in them a different type, just by changing the file extension in the delivery URL.

Alternatively, you can set the `format` parameter (`f_` in URLs) to the desired format.  For details, see [Delivering images in a different format](image_transformations#delivering_in_a_different_format).

You can also deliver animated GIFs as lossy GIFs, for significant file size savings while maintaining acceptable quality. To do this, use the `lossy` flag (`fl_lossy` in URLs).

This lossy animated GIF is only **2.5 MB**, compared to the **6.3 MB** original:

![A lossy animated GIF](https://res.cloudinary.com/demo/image/upload/fl_lossy/kitten_fighting.gif)

```nodejs
cloudinary.image("kitten_fighting", {flags: "lossy"})
```

```react
new CloudinaryImage("kitten_fighting.gif").delivery(format(gif()).lossy());
```

```vue
new CloudinaryImage("kitten_fighting.gif").delivery(format(gif()).lossy());
```

```angular
new CloudinaryImage("kitten_fighting.gif").delivery(format(gif()).lossy());
```

```js
new CloudinaryImage("kitten_fighting.gif").delivery(format(gif()).lossy());
```

```python
CloudinaryImage("kitten_fighting").image(flags="lossy")
```

```php
(new ImageTag('kitten_fighting.gif'))
	->delivery(Delivery::format(
	Format::gif())
	->lossy()
	);
```

```java
cloudinary.url().transformation(new Transformation().flags("lossy")).imageTag("kitten_fighting");
```

```ruby
cl_image_tag("kitten_fighting", flags: "lossy")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags("lossy")).BuildImageTag("kitten_fighting")
```

```dart
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.delivery(Delivery.format(
	Format.gif())
	.lossy()
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags("lossy")).generate("kitten_fighting")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().flags("lossy")).generate("kitten_fighting");
```

```flutter
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.delivery(Delivery.format(
	Format.gif())
	.lossy()
	));
```

```kotlin
cloudinary.image {
	publicId("kitten_fighting.gif")
	 delivery(Delivery.format(
	Format.gif()) {
	 lossy()
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("kitten_fighting", {flags: "lossy"})
```

```react_native
new CloudinaryImage("kitten_fighting.gif").delivery(format(gif()).lossy());
```

In general, the time for resizing an image on the fly (the first time it is delivered via the CDN) is negligible, but if you are resizing a very large image or video, and every millisecond counts even for those first users, consider doing an [eager](eager_and_incoming_transformations#eager_transformations) or [explicit](managing_assets#updating_already_uploaded_assets) transformation to pre-generate the transformed image.

Another way to lower the cost of animated graphics is to deliver animated GIFs as videos. You can do this by simply changing the file type extension to `.mp4` (or `.webm` for Chrome, Android, and Opera) in the delivery URL. 

For example, this `mp4` is 95% smaller than the original animated GIF (**319 KB** instead of **6.3 MB**):
![An animated GIF delivered as an MP4](https://res.cloudinary.com/demo/image/upload/kitten_fighting.mp4)

```nodejs
cloudinary.video("kitten_fighting", {resource_type: "image"})
```

```react
new CloudinaryVideo("kitten_fighting.mp4").setAssetType("image");
```

```vue
new CloudinaryVideo("kitten_fighting.mp4").setAssetType("image");
```

```angular
new CloudinaryVideo("kitten_fighting.mp4").setAssetType("image");
```

```js
new CloudinaryVideo("kitten_fighting.mp4").setAssetType("image");
```

```python
CloudinaryImage("kitten_fighting").video()
```

```php
(new VideoTag('kitten_fighting.mp4'))
	->assetType("image");
```

```java
cloudinary.url().transformation(new Transformation().resourceType("image").videoTag("kitten_fighting");
```

```ruby
cl_video_tag("kitten_fighting", resource_type: "image")
```

```csharp
cloudinary.Api.UrlImgUp.BuildVideoTag("kitten_fighting")
```

```dart
cloudinary.video('kitten_fighting.mp4').transformation(Transformation()
	.setAssetType("image"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("kitten_fighting.mp4")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("kitten_fighting.mp4");
```

```flutter
cloudinary.video('kitten_fighting.mp4').transformation(Transformation()
	.setAssetType("image"));
```

```kotlin
cloudinary.video {
	publicId("kitten_fighting.mp4")
	 assetType("image") 
}.generate()
```

```jquery
$.cloudinary.video("kitten_fighting", {resource_type: "image"})
```

```react_native
new CloudinaryVideo("kitten_fighting.mp4").setAssetType("image");
```

For more information on working with animated GIFs, see [Animated images](animated_images).

## How to optimize image sizing

Web site art-design generally requires displaying images at a variety of sizes, often much smaller than the original.

If you deliver full size images and rely on browser-side resizing (using CSS or HTML width and height attributes), users are forced to unnecessarily download large images. Therefore, images should always be delivered from the server at their final size, or at least, something close to that.

When you use any of the Cloudinary resizing transformations, the sizing (scaling/cropping) is performed on the server side, and the image is always delivered to the browser at the requested size.

There are several Cloudinary options that you can use for resizing:

* [Use responsive image sizing](#responsive_image_sizing)
* [Resize and crop each of your images according to your requirements](resizing_and_cropping)

### Responsive image sizing 

Server-side resizing becomes that much more important if your website is responsive and needs to select an image size based on the current size of your browser or the resolution of your device.

Cloudinary offers several solutions for responsive resizing. The best solution for you depends on your environment and application. You can learn about them all in [Responsive images](responsive_images).

> **NOTE**:
>
> If you're on a plan that includes [optimization by default settings](optimize_by_default_settings), you can select the **Limit maximum image width** setting, which applies resizing to any image that's not otherwise resized via URL parameters.

## Additional tips for optimizing images

### Sprites (deprecated)
A sprite is a single image made up of many smaller images, historically used to reduce the number of HTTP requests on web pages. While this strategy was once frequently used, it’s no longer commonly recommended.> **INFO**:
>
> The **Sprite** feature will be deprecated as of **September 16, 2025**, and will no longer function after that date. Be sure to remove it from any production code.

### Analytics

Even after employing as many automated optimization solutions as possible, you may find that some images and formats are still especially big bandwidth eaters.

Take a look at the **[Delivery Reports](programmable_media_asset_usage_data#reports)** page of the Cloudinary console. From here, you can view detailed information on a variety of data points that can help you understand where to make improvements.

For example, check the **Top Assets** and **Top Delivered Assets** sections, you can employ file-specific optimizations on these assets. Alternatively, scroll down to the **Top Browsers** to get an idea of how important each browser is to your users. This can give you insights on the relative value of using newer formats that are only supported on some browsers.

![Top browsers graph](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/reports_browsers.png "thumb: w_600,dpr_2, width:600, with_code:false, with_url:false")

> **READING**:
>
> For additional reading on image optimization and ways that Cloudinary functionality can help you best optimize your images, you can also review these blog posts: 
> &nbsp;

> * [Time for Next-Gen Codecs to Dethrone JPEG](https://cloudinary.com/blog/time_for_next_gen_codecs_to_dethrone_jpeg)

> * [How to Adopt AVIF for Images With Cloudinary](https://cloudinary.com/blog/how_to_adopt_avif_for_images_with_cloudinary)

> * [Rules for Rich-Media Optimization](https://cloudinary.com/blog/rules_for_rich_media_optimization)

> * [The holy grail of image optimization OR balancing visual quality and file size](https://cloudinary.com/blog/the_holy_grail_of_image_optimization_or_balancing_visual_quality_and_file_size)

> * [How Quality and Quantity can go Hand in Hand](https://cloudinary.com/blog/how_quality_and_quantity_can_go_hand_in_hand)

> * [Top 10 mistakes in handling website images and how to solve them](https://cloudinary.com/blog/top_10_mistakes_in_handling_website_images_and_how_to_solve_them)

> * [Image Optimization for Websites: Beautiful Pages That Load Quickly](https://cloudinary.com/blog/image_optimization_for_websites_beautiful_pages_that_load_quickly)

> * [Reduce size of animated GIFs, automatically convert to WebM and MP4](https://cloudinary.com/blog/reduce_size_of_animated_gifs_automatically_convert_to_webm_and_mp4)

> * [Lossy compression for optimizing animated GIFs](https://cloudinary.com/blog/lossy_compression_for_optimizing_animated_gifs)

> * [Low Quality Image Placeholders (LQIP) Explained](https://cloudinary.com/blog/low_quality_image_placeholders_lqip_explained)