Cloudinary Blog

Use Ruby on Rails to Deliver Static Images Via CDN

Use Ruby on Rails to Deliver Static Images Via CDN
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.
 
page load speed
 
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.
 

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:
Copy to clipboard
.logo
    background-image: image-url("logo.png")
Generated CSS:
Copy to clipboard
.logo { background-image: url(https://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.
 

Manipulating 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 various manipulations 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:
Copy to clipboard
<%= image_tag("icon_rails.png", :width => 50, :height => 50,
              :crop => :scale, :radius => 10) %>
 
Will generate the following URL:
Copy to clipboard
<img width="50" height="50"
  src="https://res.cloudinary.com/cloudinary/image/asset/
  c_scale,h_50,r_10,w_50/icon_rails-74dca949999d8f5960aedfed429711ab.png"/>
 
Cloudinary offers many more automatic image manipulations including image and text overlays, face-detection based cropping and resizing, image format conversion, and even smart categorization, moderation and tagging of images via our partner add ons. All of these can be accessed via the Rails SDK.
 
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:
Copy to clipboard
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

A New, Simple Tool for Creating Text Overlays for Images

Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.

Read more
Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more