# Resize an image to 2048×1536 pixels

[🤖/image/resize](/docs/robots/image-resize.md) allows you to quickly generate thumbnails from uploaded images. In this demo, it resizes the uploaded image files and creates 2048×1536 pixels versions of them.

We have many different [resize strategies](/docs/topics/resize-strategies.md) such as: `fit`,`min_fit`, `stretch`, `pad`, `crop`, and `fillcrop`. We'll show all of them in this demo.

A common strategy is `fit`, which makes the image fit inside an imaginary frame while keeping aspect ratio.

Step 1:

### ![Handle uploads](/_next/static/immutable/media/handling-uploads.36rsz9f-z39wy.svg)Handle uploads

We can handle uploads of your users directly.[Learn more ›](/services/handling-uploads.md)

![desert.jpg](https://demos.transloadit.com/98/1a76ade3e049b0b7d227e29a66bb32/desert.jpg)

[desert.jpg](https://demos.transloadit.com/98/1a76ade3e049b0b7d227e29a66bb32/desert.jpg)

Image – 1.5 MB

2560 × 2048

```
":original": {
  "robot": "/upload/handle"
}
```

🤖 [/upload/handle](/docs/robots/upload-handle.md)

This bot receives uploads that your users throw at you from browser or apps, or that you throw at us programmatically

Step 2:

### ![Convert, resize, or watermark images](/_next/static/immutable/media/image-processing.01ifhto-sjz1y.svg)Convert, resize, or watermark images

We can resize, crop, and (auto-)rotate images, or apply watermarks and other effects, and much more.[Learn more ›](/services/image-processing.md)

![desert.jpg](https://demos.transloadit.com/4c/b5469244f543f193b5330d7c51df50/desert.jpg)

[desert.jpg](https://demos.transloadit.com/4c/b5469244f543f193b5330d7c51df50/desert.jpg)

Image – 1.1 MB

1920 × 1536

```
"fitted": {
  "use": ":original",
  "robot": "/image/resize",
  "result": true,
  "height": 1536,
  "resize_strategy": "fit",
  "width": 2048
}
```

🤖 [/image/resize](/docs/robots/image-resize.md)

This bot resizes, crops, changes colorization, rotation, and applies text and watermarks to images

Step 3:

### ![Convert, resize, or watermark images](/_next/static/immutable/media/image-processing.01ifhto-sjz1y.svg)Convert, resize, or watermark images

We can resize, crop, and (auto-)rotate images, or apply watermarks and other effects, and much more.[Learn more ›](/services/image-processing.md)

![desert.jpg](https://demos.transloadit.com/c2/038eb74c7041298033a1fe8c56aa73/desert.jpg)

[desert.jpg](https://demos.transloadit.com/c2/038eb74c7041298033a1fe8c56aa73/desert.jpg)

Image – 1.3 MB

2048 × 1638

```
"min_fitted": {
  "use": ":original",
  "robot": "/image/resize",
  "result": true,
  "height": 1536,
  "resize_strategy": "min_fit",
  "width": 2048
}
```

🤖 [/image/resize](/docs/robots/image-resize.md)

This bot resizes, crops, changes colorization, rotation, and applies text and watermarks to images

Step 4:

### ![Convert, resize, or watermark images](/_next/static/immutable/media/image-processing.01ifhto-sjz1y.svg)Convert, resize, or watermark images

We can resize, crop, and (auto-)rotate images, or apply watermarks and other effects, and much more.[Learn more ›](/services/image-processing.md)

![desert.jpg](https://demos.transloadit.com/c0/c97e14aecb4204a4f973763098ebca/desert.jpg)

[desert.jpg](https://demos.transloadit.com/c0/c97e14aecb4204a4f973763098ebca/desert.jpg)

Image – 1.2 MB

2048 × 1536

```
"stretched": {
  "use": ":original",
  "robot": "/image/resize",
  "result": true,
  "height": 1536,
  "resize_strategy": "stretch",
  "width": 2048
}
```

🤖 [/image/resize](/docs/robots/image-resize.md)

This bot resizes, crops, changes colorization, rotation, and applies text and watermarks to images

Step 5:

### ![Convert, resize, or watermark images](/_next/static/immutable/media/image-processing.01ifhto-sjz1y.svg)Convert, resize, or watermark images

We can resize, crop, and (auto-)rotate images, or apply watermarks and other effects, and much more.[Learn more ›](/services/image-processing.md)

![desert.jpg](https://demos.transloadit.com/3a/ad0600a36845fca67eddc678741d5b/desert.jpg)

[desert.jpg](https://demos.transloadit.com/3a/ad0600a36845fca67eddc678741d5b/desert.jpg)

Image – 1.1 MB

2048 × 1536

```
"padded": {
  "use": ":original",
  "robot": "/image/resize",
  "result": true,
  "background": "${file.meta.average_color}",
  "height": 1536,
  "resize_strategy": "pad",
  "width": 2048
}
```

🤖 [/image/resize](/docs/robots/image-resize.md)

This bot resizes, crops, changes colorization, rotation, and applies text and watermarks to images

Step 6:

### ![Convert, resize, or watermark images](/_next/static/immutable/media/image-processing.01ifhto-sjz1y.svg)Convert, resize, or watermark images

We can resize, crop, and (auto-)rotate images, or apply watermarks and other effects, and much more.[Learn more ›](/services/image-processing.md)

![desert.jpg](https://demos.transloadit.com/8a/dec34e139541acb46ab3b8e0719302/desert.jpg)

[desert.jpg](https://demos.transloadit.com/8a/dec34e139541acb46ab3b8e0719302/desert.jpg)

Image – 1.3 MB

2048 × 1536

```
"cropped": {
  "use": ":original",
  "robot": "/image/resize",
  "result": true,
  "crop": {
    "x1": 150,
    "y1": 100,
    "x2": 2198,
    "y2": 1636
  },
  "gravity": "center",
  "resize_strategy": "crop"
}
```

🤖 [/image/resize](/docs/robots/image-resize.md)

This bot resizes, crops, changes colorization, rotation, and applies text and watermarks to images

Step 7:

### ![Convert, resize, or watermark images](/_next/static/immutable/media/image-processing.01ifhto-sjz1y.svg)Convert, resize, or watermark images

We can resize, crop, and (auto-)rotate images, or apply watermarks and other effects, and much more.[Learn more ›](/services/image-processing.md)

![desert.jpg](https://demos.transloadit.com/96/0af80d3343418c874234a40aea22ba/desert.jpg)

[desert.jpg](https://demos.transloadit.com/96/0af80d3343418c874234a40aea22ba/desert.jpg)

Image – 1.2 MB

2048 × 1536

```
"fillcropped": {
  "use": ":original",
  "robot": "/image/resize",
  "result": true,
  "gravity": "center",
  "height": 1536,
  "resize_strategy": "fillcrop",
  "width": 2048
}
```

🤖 [/image/resize](/docs/robots/image-resize.md)

This bot resizes, crops, changes colorization, rotation, and applies text and watermarks to images

Step 8:

### ![Export files to Amazon S3](/_next/static/immutable/media/file-exporting.1zp-mu826z4vh.svg)Export files to Amazon S3

We export to the storage platform of your choice.[Learn more ›](/services/file-exporting.md)

`:original`

* [https://demos.transloadit.com/98/1a76ade3e049b0b7d227e29a66bb32/desert.jpg⁠](https://demos.transloadit.com/98/1a76ade3e049b0b7d227e29a66bb32/desert.jpg)

`fitted`

* [https://demos.transloadit.com/4c/b5469244f543f193b5330d7c51df50/desert.jpg⁠](https://demos.transloadit.com/4c/b5469244f543f193b5330d7c51df50/desert.jpg)

`min_fitted`

* [https://demos.transloadit.com/c2/038eb74c7041298033a1fe8c56aa73/desert.jpg⁠](https://demos.transloadit.com/c2/038eb74c7041298033a1fe8c56aa73/desert.jpg)

`stretched`

* [https://demos.transloadit.com/c0/c97e14aecb4204a4f973763098ebca/desert.jpg⁠](https://demos.transloadit.com/c0/c97e14aecb4204a4f973763098ebca/desert.jpg)

`padded`

* [https://demos.transloadit.com/3a/ad0600a36845fca67eddc678741d5b/desert.jpg⁠](https://demos.transloadit.com/3a/ad0600a36845fca67eddc678741d5b/desert.jpg)

`cropped`

* [https://demos.transloadit.com/8a/dec34e139541acb46ab3b8e0719302/desert.jpg⁠](https://demos.transloadit.com/8a/dec34e139541acb46ab3b8e0719302/desert.jpg)

`fillcropped`

* [https://demos.transloadit.com/96/0af80d3343418c874234a40aea22ba/desert.jpg⁠](https://demos.transloadit.com/96/0af80d3343418c874234a40aea22ba/desert.jpg)

```
"exported": {
  "use": [
    "fitted",
    "min_fitted",
    "stretched",
    "padded",
    "cropped",
    "fillcropped",
    ":original"
  ],
  "robot": "/s3/store",
  "credentials": "demo_s3_credentials",
  "url_prefix": "https://demos.transloadit.com/"
}
```

🤖 [/s3/store](/docs/robots/s3-store.md)

This bot exports encoding results to Amazon S3

## Live Demo. See for yourself

Loading Uppy demo…

This live demo is powered by [Uppy⁠](https://uppy.io), our open source file uploader that you can also use without Transloadit, and [tus⁠](https://tus.io), our open protocol for resumable file uploads that is making uploading more reliable across the world.

## Build this in your own language

```
<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i --save @uppy/core @uppy/dashboard @uppy/remote-sources @uppy/transloadit ... -->
<link
  href="https://releases.transloadit.com/uppy/v3.10.0/uppy.min.css"
  rel="stylesheet"
/>
<button id="browse">Select Files</button>
<script type="module">
  import {
    Uppy,
    Dashboard,
    ImageEditor,
    RemoteSources,
    Transloadit,
  } from 'https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs'
  const uppy = new Uppy()
    .use(Transloadit, {
      waitForEncoding: true,
      alwaysRunAssembly: true,
      assemblyOptions: {
        params: {
          // It's often better store encoding instructions in your account
          // and use a `template_id` instead of adding these steps inline
          steps: {
            ':original': {
              robot: '/upload/handle',
            },
            fitted: {
              use: ':original',
              robot: '/image/resize',
              result: true,
              height: 1536,
              resize_strategy: 'fit',
              width: 2048,
            },
            min_fitted: {
              use: ':original',
              robot: '/image/resize',
              result: true,
              height: 1536,
              resize_strategy: 'min_fit',
              width: 2048,
            },
            stretched: {
              use: ':original',
              robot: '/image/resize',
              result: true,
              height: 1536,
              resize_strategy: 'stretch',
              width: 2048,
            },
            padded: {
              use: ':original',
              robot: '/image/resize',
              result: true,
              background: '${file.meta.average_color}',
              height: 1536,
              resize_strategy: 'pad',
              width: 2048,
            },
            cropped: {
              use: ':original',
              robot: '/image/resize',
              result: true,
              crop: {
                x1: 150,
                y1: 100,
                x2: 2198,
                y2: 1636,
              },
              gravity: 'center',
              resize_strategy: 'crop',
            },
            fillcropped: {
              use: ':original',
              robot: '/image/resize',
              result: true,
              gravity: 'center',
              height: 1536,
              resize_strategy: 'fillcrop',
              width: 2048,
            },
            exported: {
              use: ['fitted', 'min_fitted', 'stretched', 'padded', 'cropped', 'fillcropped', ':original'],
              robot: '/s3/store',
              credentials: 'demo_s3_credentials',
              url_prefix: 'https://demos.transloadit.com/',
            },
          },
        },
      },
    })
    .use(Dashboard, { trigger: '#browse' })
    .use(ImageEditor, { target: Dashboard })
    .use(RemoteSources, {
      companionUrl: 'https://api2.transloadit.com/companion',
    })
    .on('complete', ({ transloadit }) => {
      // Due to `waitForEncoding:true` this is fired after encoding is done.
      // Alternatively, set `waitForEncoding` to `false` and provide a `notify_url`
      console.log(transloadit) // Array of Assembly Statuses
      for (const assembly of transloadit) {
        console.log(assembly.results) // Array of all encoding results
      }
    })
    .on('error', (error) => {
      console.error(error)
    })
</script>

```

[Read docs: Browsers](/docs/sdks/uppy.md)

## So many ways to integrate

Transloadit is a service for companies with developers. And there are many ways developers can put Transloadit to good use inside your company to automate media processing.

#### Bulk imports

Add one of our [import Robots](/services/file-importing.md) to acquire and transcode massive media libraries.

#### Handling uploads

We are *the* experts at reliably [handling uploads](/services/handling-uploads.md). We wrote the [protocol⁠](https://tus.io/) for it.

#### Front-end integration

We integrate with web browsers via our next-gen file uploader [Uppy⁠](https://uppy.io/) and SDKs for Android and iOS.

#### Back-end integration

Send us batch jobs in any server language using one of our [SDKs](/docs/sdks.md) or directly interfacing with our [REST API](/docs/api.md).

#### Pingbacks

Configure a [notify\_url](/services/content-delivery.md) to let your server receive transcoding results JSON in the `transloadit` POST field.

#### On-demand

Use our [Smart CDN](/services/file-importing.md) to adapt files on-demand and stream them directly to your users.

[Browsers](/docs/sdks/uppy.md)[TransloaditKit](/docs/sdks/transloaditkit.md)[Ruby SDK](/docs/sdks/ruby-sdk.md)[HTTP REST API](/docs/api.md)[Python SDK](/docs/sdks/python-sdk.md)[PHP SDK](/docs/sdks/php-sdk.md)[Node.js SDK](/docs/sdks/node-sdk.md)[Java SDK](/docs/sdks/java-sdk.md)[Go SDK](/docs/sdks/go-sdk.md)[cURL](/docs/sdks/curl.md)[Convex](/docs/sdks/convex.md)

[Browsers](/docs/sdks/uppy.md)[TransloaditKit](/docs/sdks/transloaditkit.md)[Ruby SDK](/docs/sdks/ruby-sdk.md)[HTTP REST API](/docs/api.md)[Python SDK](/docs/sdks/python-sdk.md)[PHP SDK](/docs/sdks/php-sdk.md)[Node.js SDK](/docs/sdks/node-sdk.md)[Java SDK](/docs/sdks/java-sdk.md)[Go SDK](/docs/sdks/go-sdk.md)[cURL](/docs/sdks/curl.md)[Convex](/docs/sdks/convex.md)

[Browsers](/docs/sdks/uppy.md)[TransloaditKit](/docs/sdks/transloaditkit.md)[Ruby SDK](/docs/sdks/ruby-sdk.md)[HTTP REST API](/docs/api.md)[Python SDK](/docs/sdks/python-sdk.md)[PHP SDK](/docs/sdks/php-sdk.md)[Node.js SDK](/docs/sdks/node-sdk.md)[Java SDK](/docs/sdks/java-sdk.md)[Go SDK](/docs/sdks/go-sdk.md)[cURL](/docs/sdks/curl.md)[Convex](/docs/sdks/convex.md)

## Other cool demos

[![Image processing](/assets/images/services/image-processing.svg?dpl=dpl_2va3YBn22HhLsqATrmvGRCEgnYNE)Image processingAdd a sepia effect to an image](/demos/image-processing/add-sepia-effect-to-an-image.md)[![Image processing](/assets/images/services/image-processing.svg?dpl=dpl_2va3YBn22HhLsqATrmvGRCEgnYNE)Image processingApply a text watermark to images](/demos/image-processing/text-watermarking.md)[![Document processing](/assets/images/services/document-processing.svg?dpl=dpl_2va3YBn22HhLsqATrmvGRCEgnYNE)Document processingAdd a header of footer to a PDF](/demos/document-processing/add-header-or-footer-to-pdf.md)

Try Transloadit

## Ready to get started?

Join thousands of developers who trust Transloadit for their file processing needs.

Building file processing from scratch

Ready-to-use API & SDKs

Scaling infrastructure headaches

Auto-scaling global infrastructure

Managing codec updates

Always up-to-date processing

Handling file security

Enterprise-grade security

Supporting all file formats

1000+ formats & codecs supported

Unpredictable costs

Transparent pricing

GDPR

GDPR

HIPAA

HIPAA

ISO 27001ISO27001

ISO 27001

AES-256

AES-256

SOC 2 Type II

SOC 2 Type II

[Try Transloadit for Free](/c/signup/)

[Try Transloadit for Free](/c/signup/)

No credit card needed · 5 GB included in the free plan · Cancel anytime