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, performing image optimization to ensure files are have the optimal quality and parameters, 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 Rails CDN, offloading their delivery from your servers and improvixng 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 Rails 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 Rails 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:

Copy to clipboard 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’:

Copy to clipboard 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:

Copy to clipboard <%= image_tag(“logo.png”, :width => 100 , :height => 100 ) %>

May generate the following HTML code:

Copy to clipboard <img src = " https://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’.

Copy to clipboard 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.