{"id":21124,"date":"2012-04-27T08:28:25","date_gmt":"2012-04-27T08:28:25","guid":{"rendered":"http:\/\/delivering_all_your_websites_images_through_a_cdn"},"modified":"2025-09-26T13:23:55","modified_gmt":"2025-09-26T20:23:55","slug":"delivering_all_your_websites_images_through_a_cdn","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/delivering_all_your_websites_images_through_a_cdn","title":{"rendered":"CDN for Images: Optimize and Deliver Images Faster"},"content":{"rendered":"\n

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<\/a> their users\u2019 browsing experience, while reducing load on their servers.<\/p>\n\n\n\n

Using Cloudinary you can use these same technologies today, in your website or blog, without any hassle. Simply direct all your media assets to Cloudinary and they would be delivered to your visitors. You can even add alternative dimensions to your images\u2019 URL and get your pictures in any desired size or perspective. All of this with minimum changes on your side.<\/p>\n\n\n\n

UPDATE – March 2013<\/strong>: All Cloudinary media assets are delivered via the leading worldwide CDN of Akamai.<\/p>\n\n\n\n

UPDATE – November 2016<\/strong>: Customers of the higher Cloudinary plans can choose between Akamai, CloudFront, or Fastly, or even take advantage of smart CDN selection <\/strong>or dynamic multi-CDN switching<\/strong>. For more details, see the multi-CDN<\/a> blog post.<\/p>\n\n\n\n

How it\u2019s done? Simply prefix all your images with:<\/p>\n\n\n

<em<\/span>><\/span><strong<\/span>><\/span>https:\/\/res.cloudinary.com\/<your<\/span> cloudinary<\/span> cloud<\/span> name<\/span>><\/span>\/image\/fetch\/<\/strong<\/span>><\/span><\/em<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Here’s a quick example:<\/p>\n\n\n\n
Let’s assume that you\u2019re hosting the following a photo of Jennifer Lawrence on your web server, and show it on your website: <\/p>\n\n\n
<em<\/span>><\/span><strong<\/span>><\/span><a<\/span> href<\/span>=\"http:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/46\/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg\"<\/span> target<\/span>=\"_blank\"<\/span> rel<\/span>=\"noreferrer noopener\"<\/span>><\/span>http:\/\/upload.wikimedia.org\/wikipedia\/\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0commons\/4\/46\/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg<\/a<\/span>><\/span><\/strong<\/span>><\/span><\/em<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Now, simply replace this image\u2019s URL with a URL with Cloudinary as a prefix:  <\/p>\n\n\n
<a<\/span> href<\/span>=\"https:\/\/res.cloudinary.com\/demo\/image\/fetch\/http:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/46\/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg\"<\/span> target<\/span>=\"_blank\"<\/span> rel<\/span>=\"noreferrer noopener\"<\/span>><\/span><em<\/span>><\/span><strong<\/span>><\/span>https:\/\/res.cloudinary.com\/demo\/image\/fetch\/http:\/\/upload.wikimedia.org\/\n\u00a0 \u00a0 \u00a0wikipedia\/commons\/4\/46\/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg<\/strong<\/span>><\/span><\/em<\/span>><\/span><\/a<\/span>><\/span>\u00a0<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"Jennifer<\/figure>\n\n\n\n
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.<\/p>\n\n\n\n
Note:<\/strong> that ‘demo’ in all the URLs should be replaced with your Cloudinary\u2019s cloud name. Click here to set up one in seconds<\/a>.<\/em><\/p>\n\n\n\n
You can use this method to create different sized thumbnails for the same photo. For example, creating a 150×150 crop focused on Jennifer\u2019s face (‘g_face’) and with rounded corners of 20 pixels (‘r_20’) generates the following beautiful image:<\/p>\n\n\n\n
https:\/\/res.cloudinary.com\/demo\/image\/fetch\/w_150,h_150<\/a><\/strong><\/em>,r_20<\/a><\/strong><\/em>,c_thumb,g_face\/
     http:\/\/upload.wikimedia.org\/wikipedia\/commons\/
          4\/46\/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg<\/strong><\/em><\/a><\/p>\n\n\n\n
\"150x150<\/figure>\n\n\n\n
Nice, isn\u2019t it \ud83d\ude42 see our docs of image transformations<\/a> for plenty more options.<\/p>\n\n\n\n
If you are a developer, you can do the same from code. For example, in Ruby on Rails:<\/p>\n\n\n\n
cl_image_tag(“http:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/46\/” +<\/strong><\/em><\/p>\n\n\n\n
                       “Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg”,
<\/strong><\/em>                       :type => :fetch, :width => 150, :height => 150,
                       :crop => :thumb, :gravity => :face, :radius => 20)<\/strong><\/em><\/p>\n\n\n\n
Note that if the image behind the original URL changes, Cloudinary will automatically update the images and videos embedded in your site and all its resized versions.<\/p>\n\n\n\n
To summarize, any blogger and any website owner can now optimize and deliver images faster through a CDN for images 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 and videos.<\/p>\n\n\n\n
You can also refer to this Visual Web resource for Image Delivery and CDN.<\/p>\n\n\n\n
Want to Learn More About Image Optimization?<\/h2>\n\n\n\n
https:\/\/res.cloudinary.com\/demo\/image\/fetch\/http:\/\/upload.wikimedia.org\/
     wikipedia\/commons\/4\/46\/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg<\/strong><\/em><\/a> <\/p>\n\n\n\n