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:

<-- 
  Format:
  http://res.cloudinary.com/<cloudinary_id>/image/fetch/<remote_url> 
-->
http://res.cloudinary.com/david-wash-blog/image/fetch/https://davidwalsh.name/demo/slideshow/cricci1.jpg

Logo

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:

http://res.cloudinary.com/david-wash-blog/image/fetch/w_400,h_300,g_face,c_fill/https://davidwalsh.name/demo/slideshow/cricci1.jpg

Logo

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

<-- "Audrey" Filter -->
http://res.cloudinary.com/david-wash-blog/image/fetch/e_art:audrey/https://davidwalsh.name/demo/slideshow/cricci1.jpg

<-- "Oil Paint" Filter -->
http://res.cloudinary.com/david-wash-blog/image/fetch/e_oil_paint/https://davidwalsh.name/demo/slideshow/cricci1.jpg

Logo

Logo

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 -->
http://res.cloudinary.com/david-wash-blog/image/twitter_name/arsenal.jpg

<-- Gets a user or page avatar -->
http://res.cloudinary.com/david-wash-blog/image/facebook/davidwalshblog.jpg

Logo

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

http://res.cloudinary.com/david-wash-blog/image/facebook/w_300,h_300,c_fill/arsenal.jpg

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
-->
http://res.cloudinary.com/david-wash-blog/image/youtube/2HCgLXEpVKA.jpg

Video

Generated Thumbnail

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

http://res.cloudinary.com/david-wash-blog/image/youtube/w_300/2HCgLXEpVKA.jpg

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.

Security

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.

Closing

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
    I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

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

Incredible Demos

  • By
    Create Snook-Style Navigation Using MooTools

    Jonathan Snook debuted a great tutorial last September detailing how you can use an image and a few jQuery techniques to create a slick mouseover effect. I revisited his article and ported its two most impressive effects to MooTools. The Images These are the same...

  • By
    jQuery Wookmark

    The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should."  Basic web users probably think nothing of it but as a developer, I can appreciate the...

Discussion

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