Fetch and Transform Remote Images with Cloudinary

By  on  

Many of my dives into Cloudinary's amazing API like Instagram-like Filters, Image Security, Custom eCommerce, have started with uploading media (images, video, audio) to Cloudinary and then manipulating from there.  As social media and user generated content has taken the web by storm, however, we as web developers can't always count on the ability to upload all media we'd like to use as it may live on social media websites, video sites, and so on.

Oftentimes we want to use and manipulate images from other sites:  non-specific images, user avatars, video screenshots, and more.  Cloudinary provides the ability to perform all of its awesome transformation functionality on remote images with its remote fetch API.  Let's check out how easy it is to customize remote images, as well as get social media images, using Cloudinary!

Basic Remote Image Fetching

Cloudinary provides APIs for all major languages (Python, PHP, Node.js, Ruby, etc.), each providing helper methods to generate a URL to accomplish the image transformation.  To fetch and display a remote image, simply add a /fetch/ URL modifier followed by the URL to the remote image:



That's all that you need to do to pull a remote image using Cloudinary!

Transforming Remote Images

With the image wrapped in a Cloudinary fetch URL, you can easily perform any number of transformations.  A simple transformation could be resizing an image to give dimensions:



A more advanced look at transforming remote images could be seen in Instagram-like image filters:

<-- "Audrey" Filter -->

<-- "Oil Paint" Filter -->



You can look at the long list of amazing Cloudinary transformations.  Cropping, zooming, gravity, filters, facial detection -- the list of transformations is as impressive as I've ever seen.

Retrieving Remote Social Media Avatars

Integrating social media avatars (from sources like Facebook and Twitter) is commonplace on many sites but there are a few annoyances:  needing an API key and no ability to specify image size.  Cloudinary removes the need for the API dance with a simple URL modifier:

<-- Gets any avatar image from Twitter -->

<-- Gets a user or page avatar -->


As you probably can guess, avatars from remote fetches can be transformed:


I love that you only need to provide a social media vendor name and account handle -- no fussing with API keys or rate limit issues -- Cloudinary takes care of all of that!

Retrieving Remote Video Screenshots

A common practice when embedding video is displaying a screenshot as the <video> poster attribute, and in some cases, only the screenshot is loaded initially and the video is only loaded upon interaction with the screenshot.  Cloudinary allows developers to fetch video screenshots from many popular video websites including YouTube, Hulu, Vimeo, and more.

To create a screenshot from a remote video, provide the desired video host with video identifier.  For example, a screenshot fetch to a remote YouTube video follows a youtube/{id} pattern:

  Source URL: https://www.youtube.com/watch?v=2HCgLXEpVKA
  Pattern: http://res.cloudinary.com/<cloudinary_id>/image/youtube/<video_id>.jpg


Generated Thumbnail

As you've probably already guessed, you can easily transform these screenshots by slightly modifying the URL of the image:


As with any image Cloudinary manages or fetches, you can perform any number of awesome transformations.  The fact that you can make these transformations on remote images and videos is an incredible bonus.


Remote fetching of any resource can leave you open to abuse because you cannot verify what's on the remote end. Even if it really is an image on the other side, would you want others using your Cloudinary account to do remote image fetching for your site? Check out the Cloudinary admin panel's security settings:

Cloudinary allows you to toggle which social sites you allow remote fetching for, as well as white-listed fetch domains and referral domains.


Modern web and native apps don't always control all of the media they use, especially when the app has an aspect of social media, whether it be social media accounts or videos on social media websites; these cases make it difficult to upload media to Cloudinary.  Cloudinary, however, thought ahead of time and provide features to easily fetch remote images, avatars, screenshots, and more.  Best yet, the API for doing so is as simple as their other APIs.  Give Cloudinary a look -- you'll be amazed at their media transformation and delivery capabilities!

Recent Features

Incredible Demos

  • By
    Do / Undo Functionality with MooTools

    We all know that do/undo functionality is a God send for word processing apps. I've used those terms so often that I think of JavaScript actions in terms of "do" an "undo." I've put together a proof of concept Do/Undo class with MooTools. The MooTools...

  • By
    Send Email Notifications for Broken Images Using MooTools AJAX

    One of the little known JavaScript events is the image onError event. This event is triggered when an image 404's out because it doesn't exist. Broken images can make your website look unprofessional and it's important to fix broken images as soon as possible.


    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!