Cloudinary Blog

Delivering all your websites’ images through a CDN

Delivering all your website images through a CDN
Most leading blogs 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 Cloudinary images are delivered via the leading worldwide CDN of Akamai.

UPDATE - November 2016: Customers of the higher Cloudinary plans can choose between Akamai, CloudFront, or Fastly, or even take advantage of smart CDN selection or dynamic multi-CDN switching. For more details, see the multi-CDN blog post.
 
How it’s done? Simply prefix all your images with:
 
https://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

Offline First Masonry Grid Showcase with Vue

To keep your product revelant in the market, you should be building Progressive Web Apps (PWA). Consider these testimonies on conversion rates, provided by leading companies, such as Twitter, Forbes, AliExpress, Booking.com and others. This article doesn't go into background, history or principles surrounding PWA. Instead we want to show a practical approach to building a progressive web app using the Vue.js library.

Read more
Optimize Images: Novactive eZ Platform Cloudinary Plugin

At Novactive, we are always excited to use new technologies and/or to improve our favorite technologies with other ones when it makes sense for us, for our clients and for the community.

Our business is web technologies, and the most professional content management system (CMS) for us is eZ Platform (previously eZ Publish). That's why we love creating connectors to this CMS. Our most recent eZ project is an image management plugin using Cloudinary.

Read more
Are your website images ready to embrace the iPhone X notch?

The announcement of the iPhone 8, 8 plus and the iPhone X at the iPhone 10th anniversary Apple event on 12th September 2017, came with a massive buzz.

The iPhone X (pronounced "iPhone 10") has a 5.8-inch super retina screen, which stands out amongst other Apples, giving the machine the tagline “it is all screen”. A resolution of 2436 x 1125 is also featured, making it the highest resolution iPhone to date.

Read more

Image Optimization: Expert Roundup

By Gilad Maayan
Image Optimization: Expert Roundup

Unoptimized images can be incredible bottlenecks that turn an otherwise well-built web page into a slow loading, bloated one. With the ever-increasing percentage of users on mobile devices, properly sizing and optimizing images to provide a good mobile experience is even more important.

Read more