Cloudinary Blog

Delivering all your websites’ images through a CDN

Delivering all your website images through a CDN
If you take a look at the top 100 blogs you will notice that almost all of them deliver their assets (images, JS, CSS, etc.) through state-of-the-art CDNs and utilize online resizing technologies. With faster, off-site access, they greatly improve their users’ browsing experience, while reducing load on their servers.
 
Using Cloudinary you can use these same technologies today, in your website or blog, without any hassle. Simply direct all your images to Cloudinary and they would be delivered to your visitors through Amazon’s powerful CDN network. You can even add alternative dimensions to your images’ URL and get your pictures in any desired size or perspective. All of this with minimum changes on your side.
 
UPDATE - March 2013: All images are delivered via the leading worldwide CDN of Akamai. 
 
How it’s done? Simply prefix all your images with:
 
http://res.cloudinary.com/<your cloudinary cloud name>/image/fetch/

 
Here's a quick example:
Jennifer Lawrence

Both URLs return the exact same image, only the second one is cached and delivered through fast, localized CDNs and not via your local web server. Better experience to your users. Lower load on your server. Lower hosting costs.
 
Note: that 'demo' in all the URLs should be replaced with your Cloudinary’s cloud name. Click here to set up one in seconds.
 
You can use this method to create different sized thumbnails for the same photo. For example, creating a 150x150 crop focused on Jennifer’s face ('g_face') and with rounded corners of 20 pixels ('r_20') generates the following beautiful image:
 

150x150 Jennifer Lawrence
 
Nice, isn’t it :) see our docs of image transformations for plenty more options.
 
If you are a developer, you can do the same from code. For example, in Ruby on Rails:
 
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/4/46/" +
                       "Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg",
                       :type => :fetch, :width => 150, :height => 150,
                       :crop => :thumb, :gravity => :face, :radius => 20)
 
Note that if the image behind the original URL changes, Cloudinary will automatically update the images embedded in your site and all its resized versions.
 
To summarize, any blogger and any website owner can now deliver its website’s images through a CDN and seamlessly create smartly resized and cropped images in any dimension. All that by just adding the Cloudinary resource URL as a prefix to all images.

Recent Blog Posts

Improve user experience with responsive websites and applications
This article originally appeared on Inc. Magazine and is reprinted with permission.

Back in the day, responsive website design wasn't the business imperative that it is now. In fact, just having a functioning website was all that it took to set you apart, and if it had images that loaded correctly within a few minutes, then that was a nice bonus. Needless to say, but I'll say it anyway, those days are long gone.
Read more
What to consider when developing media rich websites and apps
Websites have evolved greatly over the past few years. Once text-heavy websites have become more eye-catching with prominent images and video. But the addition of richer media isn’t the only change impacting websites. Consumer behavior also factors into this evolution, as web access has moved from the desktop realm to a variety of different devices – smartphones, tablets, laptops, smartwatches and TVs – with different dimensions and resolutions. And consumers want to be able to access web content anytime and from any location.
 
To ensure that website performance is optimized, bandwidth usage is minimized and users have a top-notch experience, we will need to address many challenges.

High resolution images and videos

If a picture is worth 1,000 words, it’s no surprise that website owners are using images and videos as powerful tools on their websites to engage visitors. High-resolution images look best, but these files are so big that they cause websites to load slowly and use excessive bandwidth. These problems frustrate visitors, and potentially decrease their incentive to  engage further on the website.
Read more
Plugin for automatic responsive images in Jekyll-generated sites

This is a guest post by Nicolas Hoizey, co-founder of Clever Age and creator of the Jekyll Cloudinary plugin. Nicolas’ plugin leverages Cloudinary’s image storage, optimization, resizing, and delivery infrastructures to automate responsive images in Jekyll-generated static sites. We think it’s the bee’s knees, and invited Nicolas to write a bit about the process and motivation behind it. Without further ado, here’s Nicolas.

Read more
Cloudinary now delivers images and videos over HTTP/2

Even though websites have changed dramatically over the years – from simple text-based pages to advanced in-browser apps full of images and videos – the underlying HTTP protocol really hasn’t changed - until recently, with the approval of the HTTP/2 protocol by the IETF. Today Cloudinary is proud to announce, as part of a CDN infrastructure upgrade, general availability of HTTP/2 support in our image and video management solution. This will help you optimize the user experience on your app or website even more.

Read more