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

# Image format support



Images can be uploaded to Cloudinary in various formats (input formats), and you can easily convert these images to other formats for displaying in your web site or application (output formats). Examples of situations where you might want to change the delivered image format:

* Delivering JPEG images for photos that you want to load quickly (or AVIF or WebP if your users are on a browser that supports these).
* Delivering a PNG (24 bit) for high quality illustrations with a transparent background.
* Delivering an image where the original format is not supported for delivery by the browser. For example, you could deliver a Photoshop (.psd) image as a JPEG.

> **TIP**: For image format optimization guidelines, see [How to optimize image format](image_optimization#how_to_optimize_image_format).

## Delivering in a different format

You can convert and deliver images in any [supported image format](#supported_image_formats) by specifying the required format as the file extension of the delivery URL. 

**To convert an image to a different format:**

1. Specify the required format as the file extension in your delivery URL.
    When using an SDK, you can either append the extension of the new format to the asset's public ID or use the `format` parameter.

    For example, the following displays the uploaded `woman-business-suit` JPEG image as a PNG:

    ![Image converted to PNG](https://res.cloudinary.com/demo/image/upload/woman-business-suit.png "thumb: w_400")

```nodejs
cloudinary.image("woman-business-suit.png")
```

```react
new CloudinaryImage("woman-business-suit.png");
```

```vue
new CloudinaryImage("woman-business-suit.png");
```

```angular
new CloudinaryImage("woman-business-suit.png");
```

```js
new CloudinaryImage("woman-business-suit.png");
```

```python
CloudinaryImage("woman-business-suit.png").image()
```

```php
(new ImageTag('woman-business-suit.png'));
```

```java
cloudinary.url().transformation(new Transformation().imageTag("woman-business-suit.png");
```

```ruby
cl_image_tag("woman-business-suit.png")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("woman-business-suit.png")
```

```dart
cloudinary.image('woman-business-suit.png').transformation(Transformation());
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("woman-business-suit.png")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("woman-business-suit.png");
```

```flutter
cloudinary.image('woman-business-suit.png').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("woman-business-suit.png") 
}.generate()
```

```jquery
$.cloudinary.image("woman-business-suit.png")
```

```react_native
new CloudinaryImage("woman-business-suit.png");
```

2. Optionally, combine format conversion with other image transformations.
    For example, the following delivers the same image as a PNG, but this time removing the background and converting the image to grayscale:

    ![Image converted to PNG and removing the background](https://res.cloudinary.com/demo/image/upload/e_background_removal/e_grayscale/woman-business-suit.png "thumb: w_400")

```nodejs
cloudinary.image("woman-business-suit.png", {transformation: [
  {effect: "background_removal"},
  {effect: "grayscale"}
  ]})
```

```react
import { backgroundRemoval, grayscale } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("woman-business-suit.png")
  .effect(backgroundRemoval())
  .effect(grayscale());
```

```vue
import { backgroundRemoval, grayscale } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("woman-business-suit.png")
  .effect(backgroundRemoval())
  .effect(grayscale());
```

```angular
import { backgroundRemoval, grayscale } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("woman-business-suit.png")
  .effect(backgroundRemoval())
  .effect(grayscale());
```

```js
import { backgroundRemoval, grayscale } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("woman-business-suit.png")
  .effect(backgroundRemoval())
  .effect(grayscale());
```

```python
CloudinaryImage("woman-business-suit.png").image(transformation=[
  {'effect': "background_removal"},
  {'effect': "grayscale"}
  ])
```

```php
use Cloudinary\Transformation\Effect;

(new ImageTag('woman-business-suit.png'))
	->effect(Effect::backgroundRemoval())
	->effect(Effect::grayscale());
```

```java
cloudinary.url().transformation(new Transformation()
  .effect("background_removal").chain()
  .effect("grayscale")).imageTag("woman-business-suit.png");
```

```ruby
cl_image_tag("woman-business-suit.png", transformation: [
  {effect: "background_removal"},
  {effect: "grayscale"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("background_removal").Chain()
  .Effect("grayscale")).BuildImageTag("woman-business-suit.png")
```

```dart
cloudinary.image('woman-business-suit.png').transformation(Transformation()
	.effect(Effect.backgroundRemoval())
	.effect(Effect.grayscale()));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("background_removal").chain()
  .setEffect("grayscale")).generate("woman-business-suit.png")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .effect("background_removal").chain()
  .effect("grayscale")).generate("woman-business-suit.png");
```

```flutter
cloudinary.image('woman-business-suit.png').transformation(Transformation()
	.effect(Effect.backgroundRemoval())
	.effect(Effect.grayscale()));
```

```kotlin
cloudinary.image {
	publicId("woman-business-suit.png")
	 effect(Effect.backgroundRemoval())
	 effect(Effect.grayscale()) 
}.generate()
```

```jquery
$.cloudinary.image("woman-business-suit.png", {transformation: [
  {effect: "background_removal"},
  {effect: "grayscale"}
  ]})
```

```react_native
import { backgroundRemoval, grayscale } from "@cloudinary/url-gen/actions/effect";

new CloudinaryImage("woman-business-suit.png")
  .effect(backgroundRemoval())
  .effect(grayscale());
```

**To change format when you cannot modify the file extension:**

Use the `fetch_format` transformation parameter (`f` in URLs). This is useful when [fetching remote assets](fetch_remote_images) that already have a different file extension (format) as part of their URLs.

For example, the following fetches a remote image from Wikimedia in PNG format, and delivers the image in JPEG format (also scaled down to a width of 400 pixels):

![Benedict_Cumberbatch fetched from Wikimedia and delivered as a PNG](https://res.cloudinary.com/demo/image/fetch/c_scale,h_400/f_jpg/https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png)

```nodejs
cloudinary.image("https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png", {type: "fetch", transformation: [
  {height: 400, crop: "scale"},
  {fetch_format: "jpg"}
  ]})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { format } from "@cloudinary/url-gen/actions/delivery";
import { jpg } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage(
  "https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png"
)
  .resize(scale().height(400))
  .delivery(format(jpg()))
  .setDeliveryType("fetch");
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { format } from "@cloudinary/url-gen/actions/delivery";
import { jpg } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage(
  "https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png"
)
  .resize(scale().height(400))
  .delivery(format(jpg()))
  .setDeliveryType("fetch");
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { format } from "@cloudinary/url-gen/actions/delivery";
import { jpg } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage(
  "https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png"
)
  .resize(scale().height(400))
  .delivery(format(jpg()))
  .setDeliveryType("fetch");
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { format } from "@cloudinary/url-gen/actions/delivery";
import { jpg } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage(
  "https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png"
)
  .resize(scale().height(400))
  .delivery(format(jpg()))
  .setDeliveryType("fetch");
```

```python
CloudinaryImage("https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png").image(type="fetch", transformation=[
  {'height': 400, 'crop': "scale"},
  {'fetch_format': "jpg"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Delivery;
use Cloudinary\Transformation\Format;

(new ImageTag('https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png'))
	->resize(Resize::scale()->height(400))
	->delivery(Delivery::format(
	Format::jpg()))
	->deliveryType("fetch");
```

```java
cloudinary.url().transformation(new Transformation()
  .height(400).crop("scale").chain()
  .fetchFormat("jpg")).type("fetch").imageTag("https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png");
```

```ruby
cl_image_tag("https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png", type: "fetch", transformation: [
  {height: 400, crop: "scale"},
  {fetch_format: "jpg"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(400).Crop("scale").Chain()
  .FetchFormat("jpg")).Action("fetch").BuildImageTag("https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png")
```

```dart
cloudinary.image('https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png').transformation(Transformation()
	.resize(Resize.scale().height(400))
	.delivery(Delivery.format(
	Format.jpg()))
	.setDeliveryType("fetch"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation()
  .setHeight(400).setCrop("scale").chain()
  .setFetchFormat("jpg")).generate("https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .height(400).crop("scale").chain()
  .fetchFormat("jpg")).type("fetch").generate("https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png");
```

```flutter
cloudinary.image('https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png').transformation(Transformation()
	.resize(Resize.scale().height(400))
	.delivery(Delivery.format(
	Format.jpg()))
	.setDeliveryType("fetch"));
```

```kotlin
cloudinary.image {
	publicId("https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png")
	 resize(Resize.scale() { height(400) })
	 delivery(Delivery.format(
	Format.jpg()))
	 deliveryType("fetch") 
}.generate()
```

```jquery
$.cloudinary.image("https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png", {type: "fetch", transformation: [
  {height: 400, crop: "scale"},
  {fetch_format: "jpg"}
  ]})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { format } from "@cloudinary/url-gen/actions/delivery";
import { jpg } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage(
  "https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png"
)
  .resize(scale().height(400))
  .delivery(format(jpg()))
  .setDeliveryType("fetch");
```

> **NOTES**:
>
> * If the file extension is omitted in a delivery URL, the file is delivered in the originally uploaded format unless a specific format (or the [auto](image_optimization#automatic_format_selection_f_auto) format is requested using the `fetch_format` (`f_`) transformation parameter).

> * When converting from one multi-page or multi-layer image format (PDF, GIF, WebP, TIFF, PSD) to another, only the first 100 pages are included in the new file. 

> * SDK **major versions** with initial release later than January 2020 have a `format` transformation parameter, instead of the `fetch_format` parameter. See [f (format)](transformation_reference#f_supported_format) in the transformation reference.

## f_auto
You can take advantage of Cloudinary's automatic format selection (`f_auto`) transformation to automatically deliver images in the most optimized format that's supported by the requesting browser.

For example, if you deliver a JPEG image with `f_auto`, Cloudinary might generate and deliver the image as a WebP, AVIF or JPEG XL file, depending on the requesting browser and your account setup.  The `f_auto` algorithm will similarly deliver the best format when the original asset is a PNG (with or without transparency), an animated GIF, etc. 

For details, see [Automatic format selection (f_auto)](image_optimization#automatic_format_selection_f_auto) and [Tips and considerations for using f_auto](image_optimization#tips_and_considerations_for_using_f_auto).

## Supported image formats
The table below summarizes the supported image formats.

Format | Extensions | Supported for Upload 1 | Supported for Transformations 2
--- | --- | --- | --- 
**3DS** | .3ds | Yes | Yes
**AI** (Adobe Illustrator) | .ai | Yes | Yes
**animated AVIF** | .avif | No | Yes 6
**animated GIF** | .gif | Yes | Yes
**animated PNG** | .png | Yes | Yes
**animated WebP** | .webp | Yes | Yes
**AVIF** | .avif | Yes | Yes 6
**BMP**| .bmp | Yes | Yes
**BW** (Browzwear file) | .bw | Yes | Yes
**DjVu** | .djvu | Yes | No
**DNG** (Digital Negative) | .dng | Yes | No
**EPS** (Encapsulated PostScript) | .ps, .ept, .eps, .eps3 | Yes | Yes
**FBX** (Filmbox) | .fbx 7 | Yes 5 | Yes
**FLIF** (Free Lossless Image Format) | .flif | Yes | Yes
**GIF** | .gif | Yes | Yes
**GLB** (Binary glTF) | .glb | Yes | Yes 
**glTF** (GL Transmission Format) | .gltf | Yes 5 | Yes 
**HEIF** | .heif, .heic | Yes  | Yes
**ICO** | .ico | Yes | Yes
**InDesign** | .indd | Yes | Yes 3
**JPEG** | .jpg, .jpe, .jpeg | Yes | Yes
**JPEG 2000** | .jp2 | Yes | Yes
**JPEG XR** (JPEG eXtended Range) | .wdp, .jxr, .hdp | Yes | Yes
**JXL** (JPEG XL) | .jxl | Yes | Yes
**OBJ** | .obj 7| Yes | Yes
**PDF** | .pdf | Yes | Yes
**PLY** | .ply | Yes | Yes
**PNG**  | .png | Yes | Yes
**PSD** (Photoshop Document) | .psd | Yes | Yes 4
**Raw image files** | .arw, .cr2, .cr3 | Yes | No
**SVG** | .svg | Yes | Yes
**TARGA** (Truevision TGA) | .tga | Yes | Yes
**TIFF** | .tif, .tiff | Yes | Yes
**U3MA** (Fabric file) | .u3ma | Yes 5 | Yes
**USDZ** | .usdz | Yes | Yes
**WebP** | .webp | Yes | Yes
> **NOTES**: :title=Footnotes

1. If a format is supported only for upload, then the delivery URL enables a user to download the original file in its original format, but you cannot apply transformation parameters.
2. If a format is supported for transformations, but the browser doesn't support displaying that format, you can either provide the transformation URL with the original format to enable users to download the file, or you can provide the URL with a different delivery format specified. In that case, Cloudinary applies the transformation to the original format and then converts the image to the requested format for delivery. For example, you could provide a transformation URL for a Photoshop (.psd) image and specify `jpg` as the delivery format to display the resulting transformation in the browser.
3. You can transform an InDesign file if you deliver it as an image format, such as `jpg` or `png`, but you cannot deliver an `indd` file with transformations.
4. All layers are flattened into a single image if no `page` parameter is specified.
5. Certain 3D file formats are supported for [upload within a zip file](upload_parameters#uploading_3d_models) containing other required files for the model, such as textures etc. Some transformations, such as converting to a video or image, are supported on the bundle as a whole. No transformations are currently supported on its contained assets. For further information see [Transformations on 3D models](transformations_on_3d_models). 
6. Images converted to AVIF and animated AVIF from other formats use [additional quota](transformation_counts#avif_calculation). Images exceeding 30 megapixels cannot be encoded to AVIF - ensure you [scale them down](resizing_and_cropping#scale) first. You can [request to enable](https://support.cloudinary.com/hc/en-us/requests/new) AVIF and animated AVIF as possible formats to be delivered when [automatic format selection](image_optimization#automatic_format_selection_f_auto) (`f_auto`) is used. 
7. You cannot [convert a 3D model](transformations_on_3d_models#delivering_3d_models_in_different_3d_formats) of a different format to FBX or OBJ.