Fetch remote images

Overview

Cloudinary offers an easy solution for uploading all your static and dynamic resources to the cloud by means of our secure API (either directly via HTTPS or through our client libraries) and the Cloudinary Management Console. When it comes to existing remote images, Cloudinary offers a powerful feature for automatically fetching, manipulating and delivering the images, using dynamic URLs.

Auto-Upload and Fetch are two similar features for automatically fetching (retrieving) images from existing remote locations using dynamic URLs. The images are delivered through a powerful CDN network, greatly improving your users’ browsing experience, reduce load on your servers and lower hosting costs, while you also benefit from on-the-fly image manipulation and optimization, and all of this with minimum changes on your side.

The main difference between these two features is how the remote image is handled:

  • Fetch Enables on-the-fly manipulation of remote images and optimized delivery via a CDN. Fetched images are cached on your Cloudinary account for performance reasons. The remote images are checked on a regular basis (every 7 days by default) and if the remote image changes, the cached image is updated accordingly. This feature only supports image resource_types.

  • Auto-Upload also enables on-the-fly manipulation of existing remote images (and also videos or raw files) with optimized delivery via a CDN, while simultaneously uploading the fetched media asset to your Cloudinary account for further management, and thus benefiting from a variety of additional features (just like any other image uploaded to your Cloudinary account). After an image has been auto-uploaded from the remote location, all requests for the image will reference the image stored in your Cloudinary account. This feature supports all resource_types (image, video and raw).

Remote image Fetch URL

The Fetch feature is a quick way to deliver images from remote URLs. The image can be manipulated and optimized on-the-fly, before being cached and delivered through fast, localized CDNs and not via local web servers. To create a Fetch URL, simply prepend the following prefix to the URL of the image:

http://res.cloudinary.com/<your Cloudinary account's cloud name>/image/fetch/

For example: Assuming the following image of Scarlett Johansson from Wikipedia is also displayed on your website:

http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg

Access the following URL to fetch the image via Cloudinary:

Ruby:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg", :type=>"fetch")
PHP:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg", array("type"=>"fetch"))
Python:
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg").image(type="fetch")
Node.js:
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg", {type: "fetch"})
Java:
cloudinary.url().type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg")
JS:
cl.imageTag('http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg', {type: "fetch"}).toHtml();
jQuery:
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg", {type: "fetch"})
React:
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg" type="fetch">

</Image>
Angular:
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg" type="fetch">

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg")
Fetch image

Both URLs return the exact same image, only the second one is cached and delivered through fast, localized CDNs and not via the local web server.

Note: For customers with a Custom Domain Name (CNAME - available for Cloudinary's Advanced plan and above), prepend the following prefix to the URL of the image:

http://<your custom domain name>/image/fetch/

Fetch URL with on-the-fly image manipulation

You can also use the Fetch feature to apply any of Cloudinary’s image transformations to the delivered image. Simply add the transformation parameters to the URL directly after the Fetch prefix and before the URL of the image.

For example, the following Cloudinary URL delivers an image of Scarlett Johansson from Wikipedia that has been manipulated as follows: the width and height parameters are both set to 300 pixels, the image is cropped to fill in the new dimensions, retaining the original proportions and setting gravity to the detected face; the image is also made circular by setting the radius parameter to maximum, and finally, depending on the browser/device, the best image format (WebP or JPEG-XR) is automatically delivered optimized and cached via CDN:

Ruby:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg", :width=>300, :height=>300, :gravity=>"face", :radius=>"max", :crop=>"fill", :fetch_format=>:auto, :type=>"fetch")
PHP:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg", array("width"=>300, "height"=>300, "gravity"=>"face", "radius"=>"max", "crop"=>"fill", "fetch_format"=>"auto", "type"=>"fetch"))
Python:
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg").image(width=300, height=300, gravity="face", radius="max", crop="fill", fetch_format="auto", type="fetch")
Node.js:
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg", {width: 300, height: 300, gravity: "face", radius: "max", crop: "fill", fetch_format: "auto", type: "fetch"})
Java:
cloudinary.url().transformation(new Transformation().width(300).height(300).gravity("face").radius("max").crop("fill").fetchFormat("auto")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg")
JS:
cl.imageTag('http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg', {width: 300, height: 300, gravity: "face", radius: "max", crop: "fill", fetch_format: "auto", type: "fetch"}).toHtml();
jQuery:
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg", {width: 300, height: 300, gravity: "face", radius: "max", crop: "fill", fetch_format: "auto", type: "fetch"})
React:
<Image publicId="http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg" type="fetch">
  <Transformation width="300" height="300" gravity="face" radius="max" crop="fill" fetch_format="auto" />
</Image>
Angular:
<cl-image public-id="http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg" type="fetch">
  <cl-transformation width="300" height="300" gravity="face" radius="max" crop="fill" fetch_format="auto">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(300).Gravity("face").Radius("max").Crop("fill").FetchFormat("auto")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg")
Fetch image with manipulation

Note that if the image behind the original URL changes, Cloudinary will not automatically update the fetched image embedded in your site and all its transformed versions (if you need to update fetched images, contact Cloudinary).

Creating a Fetch URL via code

Cloudinary’s SDKs make it easy to build URLs and include methods for creating generic HTML image tags. To use the Fetch feature via code, set the type parameter of the image tag method to fetch. For example, the following code snippet creates an image tag to the same transformed image as shown above:

cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_Césars_2014.jpg"
  :type => :fetch, :width => 300, :height => 300, 
  :crop => :crop, :gravity => :north_west,
  :radius => :max, :effect => :sharpen, :fetch_format => :auto)

Creating a Fetch URL containing special characters

URLs containing special characters (particularly the ? character) need to be modified (or escaped) for use with the Fetch feature. This is relevant for any special characters that are not allowed “as is” in a valid URL path, as well as other special unicode characters. These URLs should be escaped using % based URL encoding to ensure the URL is valid. Either escape the individual special characters themselves within the URL (for example, replacing ? with %3F) or escape the whole URL.

Note that the methods within Cloudinary’s client libraries (e.g. the Ruby on Rails cl_image_tag method) automatically perform smart escaping, leaving the URL as simple as possible while escaping certain special characters. Manually escaping URLs as explained here is only relevant when simply adding the Fetch prefix to existing URLs.

For example, the original URL:

https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSVmwds9qedbHZ__uc1E40a-s70KtNiiLVKiaKymGszYdIDtzJfzw

Fully escaped becomes:

Ruby:
cl_image_tag("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSVmwds9qedbHZ__uc1E40a-s70KtNiiLVKiaKymGszYdIDtzJfzw", :type=>"fetch")
PHP:
cl_image_tag("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSVmwds9qedbHZ__uc1E40a-s70KtNiiLVKiaKymGszYdIDtzJfzw", array("type"=>"fetch"))
Python:
CloudinaryImage("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSVmwds9qedbHZ__uc1E40a-s70KtNiiLVKiaKymGszYdIDtzJfzw").image(type="fetch")
Node.js:
cloudinary.image("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSVmwds9qedbHZ__uc1E40a-s70KtNiiLVKiaKymGszYdIDtzJfzw", {type: "fetch"})
Java:
cloudinary.url().type("fetch").imageTag("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSVmwds9qedbHZ__uc1E40a-s70KtNiiLVKiaKymGszYdIDtzJfzw")
JS:
cl.imageTag('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSVmwds9qedbHZ__uc1E40a-s70KtNiiLVKiaKymGszYdIDtzJfzw', {type: "fetch"}).toHtml();
jQuery:
$.cloudinary.image("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSVmwds9qedbHZ__uc1E40a-s70KtNiiLVKiaKymGszYdIDtzJfzw", {type: "fetch"})
React:
<Image publicId="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSVmwds9qedbHZ__uc1E40a-s70KtNiiLVKiaKymGszYdIDtzJfzw" type="fetch">

</Image>
Angular:
<cl-image public-id="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSVmwds9qedbHZ__uc1E40a-s70KtNiiLVKiaKymGszYdIDtzJfzw" type="fetch">

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Type("fetch").BuildImageTag("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSVmwds9qedbHZ__uc1E40a-s70KtNiiLVKiaKymGszYdIDtzJfzw")
Escaped fetch URL

Fetch URL with minimal escaping:

Restricting the allowed Fetch domains

You can restrict the list of allowed domains that can be used with the Fetch feature in the Allowed fetch domains section on the Security tab of the Settings page in Cloudinary's Management Console.

Refreshing or deleting fetched images

When you fetch a remote image, a copy of that image as well as all transformations derived from the remote image, are cached on your Cloudinary account for performance reasons.

By default, Cloudinary checks every 7 days whether the remote image has changed (by comparing the etag value). If it has changed, the cached image is replaced with the new one, and the next time that image, or a transformation of that image, is requested, the updated version is delivered.

Cloudinary customers with a paid account can request to change this default expiration time to any desired interval.

Additionally, paid customers can request a time interval setting for full cleanups of all fetched images. When a cleanup interval is defined, all of your fetched images are completely deleted every X days. If one of these images is requested again after the cleanup, it is fetched again from the remote source. This option is useful for cleaning up your storage in cases where many of your fetched images become obsolete after a short time period, for example, banner ads.

You can request to set a custom fetch expiration and/or cleanup interval by submitting a support request.

Auto-upload remote resources

The auto-upload feature combines the advantages of dynamic image fetching from existing online locations, with the advantages of managing images directly in the cloud (listing, editing, browsing, tagging, transforming, moderating, dynamically manipulating, viewing reports, and more) via the Cloudinary Management Console. The auto-upload feature enables on-the-fly manipulation of existing remote images and optimized delivery via a CDN, while automatically uploading the image to your Cloudinary account for further management and manipulation. Auto-upload also supports the same functionality for videos and raw resource types.

The auto-upload feature is implemented by mapping a base remote URL to a specified folder in your Cloudinary account. Then, whenever accessing a Cloudinary delivery URL containing the folder prefix, the media assets are automatically retrieved from the mapped URL if they are not already uploaded to the folder, and are available for further manipulation, management and CDN delivery like any other image uploaded to Cloudinary.

Mapping a remote URL prefix also allows your Cloudinary delivery URLs to be shorter and more SEO friendly, gives you fine-grained control on which remote domains are allowed for automatic uploads, enables lazy migration of all your existing images to the cloud as well as other powerful origin pulling options. After an image has been auto-uploaded from the remote location, all requests for the image will reference the image stored in your Cloudinary account.

The auto-upload URL takes the following structure:

http://res.cloudinary.com/<your Cloudinary account's cloud name>/<resource_type>/upload/<mapped upload folder prefix>/<partial path of remote resource>

For example: Creating a folder called remote_media and then mapping it to the URL prefix http://upload.wikimedia.org/wikipedia/ allows you to generate a Cloudinary delivery URL that substitutes the remote_media folder prefix for the URL prefix. When the Cloudinary delivery URL is accessed for the first time, Cloudinary automatically retrieves the remote image from http://upload.wikimedia.org/wikipedia/ and stores it in your Cloudinary account.

To retrieve the following image from Wikimedia, and automatically upload it to your Cloudinary account:

http://upload.wikimedia.org/wikipedia/commons/2/29/Marcelo_Facini.jpg

Access the following Cloudinary URL:

Ruby:
cl_image_tag("remote_media/commons/2/29/Marcelo_Facini.jpg")
PHP:
cl_image_tag("remote_media/commons/2/29/Marcelo_Facini.jpg")
Python:
CloudinaryImage("remote_media/commons/2/29/Marcelo_Facini.jpg").image()
Node.js:
cloudinary.image("remote_media/commons/2/29/Marcelo_Facini.jpg")
Java:
cloudinary.url().imageTag("remote_media/commons/2/29/Marcelo_Facini.jpg")
JS:
cl.imageTag('remote_media/commons/2/29/Marcelo_Facini.jpg').toHtml();
jQuery:
$.cloudinary.image("remote_media/commons/2/29/Marcelo_Facini.jpg")
React:
<Image publicId="remote_media/commons/2/29/Marcelo_Facini.jpg" >

</Image>
Angular:
<cl-image public-id="remote_media/commons/2/29/Marcelo_Facini.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("remote_media/commons/2/29/Marcelo_Facini.jpg")
Auto-upload remote image

The image is dynamically retrieved the first time this URL is accessed and stored in your Cloudinary account with a public ID of remote_media/commons/2/29/Marcelo_Facini.

Configuring auto-upload URL mapping

The auto-upload feature is configured in the auto-upload mapping section on the Upload tab of the Settings page in Cloudinary's Management Console. In the auto-upload mapping section:

  1. Fill in a Folder name for the auto-upload mapping e.g. remote_media.

  2. Fill in a URL prefix that will be mapped to the specified folder e.g. http://upload.wikimedia.org/wikipedia/.

  3. Click the Save button at the bottom of the page.

Auto-upload URL mapping

You can map multiple folder names, each to a different remote URL prefix, by clicking the Add another mapping link. In addition, instead of using a sub-folder, you can map your root folder to a URL prefix by filling in a backslash for the folder name (/).

As can be seen in the screenshot above, the remote_media folder is now mapped to the http://upload.wikimedia.org/wikipedia/ URL prefix. Cloudinary delivery URLs including the remote_media folder prefix can now be accessed, and Cloudinary will automatically retrieve the remote image from the specified Wikimedia URL and store it in your Cloudinary account.  From that point on, the image is treated just like any other image that was uploaded to your Cloudinary account.

Auto-uploading with on-the-fly transformations

You can also use the auto-upload feature to apply any of Cloudinary’s image or video transformations on-the-fly to the delivered media asset. Simply add the transformation parameters to the URL directly before the mapped folder name.

For example, the following Cloudinary delivery URL retrieves an image from Wikimedia and stores it in Cloudinary’s demo account, then crops a thumbnail of the original image to a width of 200 pixels and a height of 200 pixels, centers the image on the detected face, makes it circular, applies a sharpen effect - and then delivers that modified image optimized and cached via CDN:

Ruby:
cl_image_tag("remote_media/commons/2/29/Marcelo_Facini.jpg", :width=>200, :height=>200, :gravity=>"face", :radius=>"max", :effect=>"sharpen", :crop=>"thumb")
PHP:
cl_image_tag("remote_media/commons/2/29/Marcelo_Facini.jpg", array("width"=>200, "height"=>200, "gravity"=>"face", "radius"=>"max", "effect"=>"sharpen", "crop"=>"thumb"))
Python:
CloudinaryImage("remote_media/commons/2/29/Marcelo_Facini.jpg").image(width=200, height=200, gravity="face", radius="max", effect="sharpen", crop="thumb")
Node.js:
cloudinary.image("remote_media/commons/2/29/Marcelo_Facini.jpg", {width: 200, height: 200, gravity: "face", radius: "max", effect: "sharpen", crop: "thumb"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(200).gravity("face").radius("max").effect("sharpen").crop("thumb")).imageTag("remote_media/commons/2/29/Marcelo_Facini.jpg")
JS:
cl.imageTag('remote_media/commons/2/29/Marcelo_Facini.jpg', {width: 200, height: 200, gravity: "face", radius: "max", effect: "sharpen", crop: "thumb"}).toHtml();
jQuery:
$.cloudinary.image("remote_media/commons/2/29/Marcelo_Facini.jpg", {width: 200, height: 200, gravity: "face", radius: "max", effect: "sharpen", crop: "thumb"})
React:
<Image publicId="remote_media/commons/2/29/Marcelo_Facini.jpg" >
  <Transformation width="200" height="200" gravity="face" radius="max" effect="sharpen" crop="thumb" />
</Image>
Angular:
<cl-image public-id="remote_media/commons/2/29/Marcelo_Facini.jpg" >
  <cl-transformation width="200" height="200" gravity="face" radius="max" effect="sharpen" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Gravity("face").Radius("max").Effect("sharpen").Crop("thumb")).BuildImageTag("remote_media/commons/2/29/Marcelo_Facini.jpg")
Manipulated auto-upload image

Creating auto-upload URLs via code

Auto-uploading from within your code can be easily accomplished using Cloudinary's client libraries for all popular development frameworks: Ruby on Rails, PHP, Django, Node.js, Java, .NET, and jQuery. The principle is exactly the same as with any URL/tag building of an uploaded resource, except in this case the public ID does not have to match an existing resource, but can match a mapped folder name of a remote existing asset that will be implicitly fetched on first access. For example, the following code snippet retrieves the same transformed image as shown above:

Ruby:
cl_image_tag("remote_media/commons/2/29/Marcelo_Facini.jpg", :width=>200, :height=>200, :gravity=>"face", :radius=>"max", :effect=>"sharpen", :crop=>"thumb")
PHP:
cl_image_tag("remote_media/commons/2/29/Marcelo_Facini.jpg", array("width"=>200, "height"=>200, "gravity"=>"face", "radius"=>"max", "effect"=>"sharpen", "crop"=>"thumb"))
Python:
CloudinaryImage("remote_media/commons/2/29/Marcelo_Facini.jpg").image(width=200, height=200, gravity="face", radius="max", effect="sharpen", crop="thumb")
Node.js:
cloudinary.image("remote_media/commons/2/29/Marcelo_Facini.jpg", {width: 200, height: 200, gravity: "face", radius: "max", effect: "sharpen", crop: "thumb"})
Java:
cloudinary.url().transformation(new Transformation().width(200).height(200).gravity("face").radius("max").effect("sharpen").crop("thumb")).imageTag("remote_media/commons/2/29/Marcelo_Facini.jpg")
JS:
cl.imageTag('remote_media/commons/2/29/Marcelo_Facini.jpg', {width: 200, height: 200, gravity: "face", radius: "max", effect: "sharpen", crop: "thumb"}).toHtml();
jQuery:
$.cloudinary.image("remote_media/commons/2/29/Marcelo_Facini.jpg", {width: 200, height: 200, gravity: "face", radius: "max", effect: "sharpen", crop: "thumb"})
React:
<Image publicId="remote_media/commons/2/29/Marcelo_Facini.jpg" >
  <Transformation width="200" height="200" gravity="face" radius="max" effect="sharpen" crop="thumb" />
</Image>
Angular:
<cl-image public-id="remote_media/commons/2/29/Marcelo_Facini.jpg" >
  <cl-transformation width="200" height="200" gravity="face" radius="max" effect="sharpen" crop="thumb">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(200).Gravity("face").Radius("max").Effect("sharpen").Crop("thumb")).BuildImageTag("remote_media/commons/2/29/Marcelo_Facini.jpg")
Manipulated auto-upload image

Lazily migrate existing resources with auto-upload

Generally, when migrating to Cloudinary, the simplest method of migration is to upload all your resources via Cloudinary's upload API and then update your web application to upload new resources to Cloudinary.

The auto-upload feature offers a powerful alternative method to migrate resources within your own existing web application to your Cloudinary account, by dynamically uploading them when first accessed, and without the need to pre-upload them. This “lazy migration” is especially useful if your site has lots of media assets, some of which may be very rarely accessed - if ever.

Auto-uploaded URLs share the exact same URL convention as Cloudinary’s regular uploaded image URLs, which means that for each resource accessed, Cloudinary first checks whether a resource with the given public ID exists in your Cloudinary account, and if it doesn't (and it matches a given auto-upload folder mapping), it is retrieved on-the-fly from the remote host.

Restricting access to auto-uploaded resources

The auto-upload examples given so far allow public access to the original image as well as all its derived versions. As an alternative, you can auto-upload remote images as type private to restrict access to the original image, and/or restrict auto-uploading images unless they are created explicitly using the authenticated API or signed URLs.

To auto-upload an image as private, simply set the type as private instead of upload. This setting prevents access to the original image while allowing access to derived (transformed) versions of the image. For example, the following Java code snippet uploads new images as private:

Map result = cloudinary.uploader().upload(new File("remote_media/commons/2/29/Marcelo_Facini.jpg"), 
  Cloudinary.asMap("type", "private"));

To restrict images from use with dynamic URLs so that auto-uploaded images can only be created explicitly using the authenticated API or signed URLs, select the Uploaded option in the Restricted image types section on the Security tab of the Settings page in Cloudinary's Management Console. For example, the following code snippet allows auto-uploading by signing the URL:

cl_image_tag("remote_media/commons/2/29/Marcelo_Facini.jpg", :sign_url => true)

Auto-uploading with Upload presets

When you use Cloudinary's upload API you can leverage many powerful features (eagerly created derived/transformed resources, notifications on upload, adding tags and context, requesting moderation and more). To be able to benefit from the same features together with auto-upload, you can use Cloudinary's Upload Presets for defining the automatic upload actions. Upload Presets include one or more upload parameters, and any of Cloudinary's upload parameters can be defined and included in a preset. Specifying an Upload Preset with the same name as an auto-upload mapped folder applies all actions and manipulations specified in that Upload Preset to all resources uploaded to the mapped auto-upload folder - even though they are not specified in the simple URL.

For example, naming an auto-upload mapped folder as remote_media and also naming an Upload Preset as remote_media will automatically apply all the actions specified in the Upload Preset when auto-uploading images to the remote_media folder.

Auto-upload vs. Fetch

  • Management - images retrieved with Fetch are managed on your side and just manipulated and delivered by Cloudinary; auto-uploaded resources are managed by Cloudinary like any uploaded resource (thus benefiting from additional features).

  • Resource types - Fetch supports images only. Auto-upload supports any resource type; just make sure the resource_type value matches the type of asset you are retrieving.

  • Eager transformations - the option to create multiple variations of the same resource during auto-upload rather than on-the-fly. Also important for manipulating large files and complex transformations (e.g. manipulating animated GIFs).

  • Upload Presets - automatically apply actions specified in an Upload Preset with the same name as an auto-upload mapped folder (eagerly creating derived/transformed resources, notifications, tagging, moderation and more).

  • SEO-friendly short URLs - auto-uploaded URLs do not contain the lengthy URL of the original resource.

  • Access permissions - define auto-uploaded resources as private, allow access only to a fixed set of transformations (e.g. keep originals but add a watermark to all viewed versions of it).

  • Availability management - with auto-upload, Cloudinary stores your resources (optionally on your own S3), including backups, historical revisions, etc. Fetch URLs are stored on Cloudinary for cache purposes only, which means that you need to continue to support your existing image hosting solution.

  • Consistency - auto-uploaded resources are treated the same way as any other uploaded resource ("newly" uploaded resources and "old" resources of existing remote URLs are managed identically).