Cloudinary Blog

How to deliver your static images through a CDN in Ruby on Rails

If you heard of Cloudinary before, you probably already know how useful Cloudinary is with managing all your dynamically uploaded images, transforming these to their required dimensions and delivering them through a fast CDN.
 
But what about all the static images you have in your web application? background images, buttons, icons - they too should be delivered through a CDN, offloading their delivery from your servers and improving your website's performance.
 
You can always do it yourself - setup your cloud environment, upload all these static images to your cloud storage, access them through a CDN and make sure to update these images when they change. 
 
Or - you can let Cloudinary do it. Automatically.
 
In this post we wanted to introduce a new Cloudinary feature. This feature simplifies and streamlines the process of uploading your static images to the cloud and delivering them through a CDN.
 
If you haven't done so already - upgrade to our latest Ruby GEM and you will enjoy this new feature with zero code change.
 
How is this done? First, upload all your Ruby-on-Rails applications' static images to Cloudinary, using a single Rake command:
rake cloudinary:sync_static
 
images/logo.png - logo-5740ed843b23d0b86e48081f43a45b9c - Uploading
images/icon_rails.png - icon_rails-74dca949999d8f5960aedfed429711ab - Uploading
images/spinner.gif - spinner-3a0ae382485ddcfc5b57e638baa6005f - Uploading
images/background.png - background-339f8567f25075150cca85d711e94b0c - Uploading
 
Completed syncing static resources to Cloudinary
4 Uploaded
This Rake task finds all the images in all common public folders and in Rails Asset Pipeline’s image asset folders. Afterwards, it uploads all new and modified images to Cloudinary. Uploaded images and their versions are maintained using a local .cloudinary.static file. Make sure you commit this file to your source control.
 
Now that you’ve uploaded all your static images to Cloudinary, all you’ve left to do in order to deliver these through a CDN is to edit your cloudinary.yml file and set the following configuration parameters to ‘true’: 
enhance_image_tag: true
static_image_support: true
That's it. No other code changes required. From now on, every image_tag call in your views would automatically check if the image was uploaded to the cloud (using .cloudinary.static) and if so, would generate a remote Cloudinary CDN URL.
 
For example:
<%= image_tag(“logo.png”, :width => 100, :height => 100) %>
May generate the following HTML code:
<img src="http://res.cloudinary.com/demo/image/asset/
      logo-5740ed843b23d0b86e48081f43a45b9c" width="100" height="100"/>
Keep in mind that you can activate CDN static image support in your production environment while keeping to local files in your development environment.
 
When you add new static images or change existing ones, all you need to do is re-run ‘rake cloudinary:sync_static’.
rake cloudinary:sync_static
 
images/logo.png - logo-5740ed843b23d0b86e48081f43a45b9c - Not changed
images/icon_rails.png - icon-74dca949999d8f5960aedfed429711ab - Not changed
images/spinner.gif - spinner-3a0ae382485ddcfc5b57e638baa6005f - Not changed
images/background.png - background-339f8567f25075150cca85d711e94b0c - Not changed
images/new_icon.gif - new_icon-50f7c240f43256e3f2bfaa3519dab1e8 - Uploading
 
Completed syncing static resources to Cloudinary
4 Not changed, 1 Uploaded
If your website has many static images, you can optimize your site’s load time further by using multiple CDN subdomains. See this blog post for more details on how to activate this feature.
 

CSS & Sass

The method described above is a powerful way for uploading all static images embedded in your Rails view to the cloud and delivering them through a CDN with no change to your code.
But what about images defined in your CSS or Sass files?
 
If you use the new Asset Pipeline (Rails 3.1+), this would work out-of-the-box. All image-path and image-url in your Sass files would automatically change to remote Cloudinary CDN URLs. For example:
Sass:
.logo
    background-image: image-url("logo.png")
Generated CSS:
.logo { background-image: url(http://res.cloudinary.com/demo/image/asset/logo-5740ed843b23d0b86e48081f43a45b9c) }
So if you already use Asset Pipeline and Sass files, your images will automatically be delivered through a CDN.
 

Transforming static images

One of Cloudinary's major strengths is in its powerful image transformations. In most cases, you'll want your static images displayed as-is. But occasionally, applying transformations on your static images can be very useful. For example, displaying a set of icons in multiple dimensions. Another example is when you want to support Responsive Layout and Images. In this case, adjusting the size of all static images according to your visitors' device resolution might greatly improve your visitors' experience (e.g., resize all images to 50% their original size). 
 
With Cloudinary you can apply many transformations on your static images, with ease.
 
In the following example, we take a 100x100 static logo.png image and resize it on-the-fly to a 50x50 image with rounded corners of 10 pixels radius. The following image_tag:
<%= image_tag("icon_rails.png", :width => 50, :height => 50,
              :crop => :scale, :radius => 10) %>
 
Will generate the following URL:
<img width="50" height="50"
  src="http://res.cloudinary.com/cloudinary/image/asset/
  c_scale,h_50,r_10,w_50/icon_rails-74dca949999d8f5960aedfed429711ab.png"/>
Changing the look & feel and dimensions of images in your site based on the user’s device can be done using CSS instead of changing your code. This can be be made even simpler if you are using Sass in your Rails project. Simply use the 'cloudinary-url' template method. It will convert image references to remote Cloudinary CDN URLs and can also receive all supported transformation parameters.
 
For example, the following Sass line would generate the same 50x50 scaled logo with rounded corners, via Sass:
background-image: cloudinary-url("rails.png", $width: 50, $height: 50,
                                 $crop: "scale", $radius: 10);
To summarize - if you are using Cloudinary for managing and transforming your uploaded images, you should definitely follow the simple instructions above to immediately experience the performance boost gained by delivering all your static assets through Cloudinary. Don’t have a Cloudinary account yet? Click here to setup a free account in seconds.

Recent Blog Posts

Find images & videos with a robust new search engine

Great content is hard to come by. You can invest a lot of time and effort in building a great media library, but if content managers and editors can't quickly find what they need at the right time, it's almost useless (and frustrating). Good search capabilities allow you to provide them with a better experience: present relevant content or a well-organized catalog by a variety of criteria such as tags, folders, size, resolution, aspect ratio, faces, colors and many more.

Read more
Video at Large Scale - Contributions from the Developer Community

Video is an increasingly important component for websites - whether it’s to inform visitors, enhance user experience or support sales and marketing efforts. But delivering high-quality video at large scale can be quite a challenge. You need to consider encoding, format, bandwidth usage, delivery and the devices on which visitors may be watching the video, to name just a few concerns.

Read more

Image Optimization in WordPress

By Prosper Otemuyiwa
Image Optimization in WordPress

WordPress is the number one content management system (CMS) in use today, running approximately 27 percent of the entire internet. Several high-traffic websites run on WordPress, and many utilize media, such as images and videos, to attract users and meet their needs.

 

Read more

Build a Vue Watermarking App for your Image Gallery

By Christian Nwamba
Build a Vue Watermarking App for your Image Gallery

If you intend to build a photo gallery online, you have to seriously consider how to protect the images from users who are not buying them. While visitors need to see the picture before purchasing, there needs to be a way to ensure that even serious buyers are not tempted to use the images without agreeing to your license terms.

Read more

Should You Transform Images On Upload or On Demand?

By Christian Nwamba
Should You Transform Images On Upload or On Demand?

As a developer, you hope and anticipate that your website or mobile application will be accessed by different users on various devices. To improve the user-experience, irrespective of the viewing device, you need to make sure that each image adapts to different graphic layouts, device resolutions and other viewing requirements. For example, for an E-Commerce site, one image will be displayed on different pages — home page, product page, shopping cart and more — and will be viewed on a desktop, cellphone or a tablet. This means that you need to create numerous versions of every image and for a website with hundreds of images, manual manipulation is not scalable.

Read more
Introducing Website Speed Test: An Image Analysis Tool Integrated with WebPagetest

Because images dominate page weight, methodical image optimization can have a significant effect on conversions and user experience. And the performance tools you choose to use can have a powerful impact on how websites are built and maintained. One such popular open source tool is WebPagetest. It is designed to measure and analyze webpage performance, which is why Cloudinary chose to partner with our friends over there to launch Website Speed Test.

Read more