Small rob parvin

Rob Parvin

Lead Ruby Developer

Image Optimisation Using Carrierwave

Here in the development department at Rawnet we’ve seen an increase in the number of clients wishing to manage image assets through the backend of their website. So we’re faced with a challenge of how to ensure our back end systems allow the flexibility for our clients to upload high quality images, whilst ensuring the website remains responsive in terms of page load times.

Without going into too much technical detail about actual image optimisation techniques, what I’d like to do is take a high level look at the processes and methodologies that we use to handle uploads within one of our custom CMS platforms which is built in Ruby on Rails.

In the development team, we’re constantly exploring new tools to help optimise this process for the end user. In terms of our Rails CMS, we use gems to extend functionality and in the case of file uploads we use the CarrierWave gem self described as “a simple and extremely flexible way to upload files from Ruby applications”. The fact that CarrierWave is modular, flexible, and extendable is the reason for it’s popularity within the Rails community.

Thanks to Fog (a Ruby cloud services library) we are able to hook in to cloud storage providers such as Amazon S3, Rackspace Cloud Files, and Google Storage, to easily store image files whilst image processing remains supported through the likes of RMagick, ImageScience and MiniMagick which are all libraries needed to generate image thumbnails and crop images.

The CarrierWave ImageOptimizer gem provides an efficient way of utilising jpegoptim and optipng to optimise images uploaded through CarrierWave. These utilities optimise images in a lossless manner, meaning that the tools rewrite the data of the image file in a more efficient way, without the loss of quality from the original file.

We’re all about ensuring that we work towards improving user experience from all angles, so this includes the backend experience for our clients as well as the frontend user experience for their customer facing websites. So, by taking the in-memory processing away from the end user by hooking up CarrierWaveDirect into our upload forms means that we can optimise image processing effortlessly in the background. CarrierWaveDirect handles the uploading of files direct to our cloud storage provider, and provides the means for processing and saving the image in a background task.

By uploading straight to Amazon S3 and using the CloudFront Content Delivery Network (CDN) as a means for serving the image files, we can ensure that the optimised image gets cached on a network of edge locations close to the end user, resulting in less latency due to physically closer servers and faster transfers. Again, a process that ensures the end user doesn’t suffer from slow image load times, providing a slicker experience online.

We don’t rely on the client to have image optimisation knowledge, we see that as part of our role as experienced web developers so we assume this to be a task that we should take care of. By hooking in the gems and processes outlined, we can take the task of producing web optimised images that conform to Google’s Page Speed policy away from the client and take responsibility of this through the CMS.

Whilst reading around this subject I came across Ruby VIPs, a “fast image processing extension for Ruby”. The speed and memory usage benefits in which it offers are considerably better than that of RMagick, ImageScience and MiniMagick. This library is certainly something that myself and the development team will be looking to utilize in our upcoming projects. We continue in our search for the most efficient ways to always improve the core technology of our CMS to deliver the very best results to our clients.