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

  • By
    6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Detect Vendor Prefix with JavaScript

    Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work.  These prefixes can be used in two formats:  the CSS format (-moz-, as in -moz-element) and the JS format (navigator.mozApps).  The awesome X-Tag project has...

  • By
    Create Twitter-Style Dropdowns Using MooTools

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...


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