ribs

Responsive Images Baked Server-side, yummy!

^{Photo borrowed from talented Kevin Racape.}

***RIBS is still at an early development stage and is not ready for production yet!***.

Motivations

Responsive images is the next big challenge!

Some client-side patterns already exist along with build tasks in order to produce, optimize, manage and pick the right image for the right screen size.

But they have several pitfalls. The biggest one is that you often load more that you are going to show, wasting bandwidth, load time, device memory and CPU.

In the wild, this is not used as much as it should be. AFAIK this is probably because it asks a certain amount of time to choose and implement a solution. It often involves too much tools and management in the process. The fact is, developers don't take enough time for this and tend to neglect this part of a modern Web application.

I believe in the on-the-fly way of thinking that the Web can offer. So, you just ask the image you want, and you receive it already processed, end of story. This also guaranties that you:

• do not load more than your are going to show.
• do not scale the image in CSS.
• do not load important images with javascript.
• do not handle each image sizes manually.
• do simply your workflow.

From RESS slides.

Some great commercial services already exist to tackle this problem. But none of them is open source. This needs to be available in the wild, with a good level of customization, so that Web developers can leverage their images responsiveness.

Goals

RIBS will:

• Provide on-the-fly processed images (no build phase required).
• Be blazing fast!
• Be super easy to use and deploy.
• Proxy existing servers so you can offload image processing.
• Optimize and transcode images.
• Support SPDY.
• Fit web apps but also native apps needs.
• Offer plugins to various existing platforms such as WordPress or Joomla.
• Allow to extensively customize it so you can achieve precisely what you want.
• Support art direction, automatically perhaps?.

Roadmap

• ✓ Basic Node module.
  
• ✓ Command line interface.
  
• ✕ Plugins for Grunt, Gulp, ...
  
• ✕ Express middleware with an effecient caching system.
  
• ✕ Client-side library.
  
• ✕ New awesome features...

Architecture

RIBS will offer several independent layers, that work well together:

• A native Node module that processes images:
  • Fast using OpenCV as backend.
  • Extensible via custom operations, hooks and events.
  • Smart ensuring always valid images are produced.
• An Express middleware that:
  • Expose a REST API.
  • Proxy existing servers.
  • Cache processed images smartly.
  • Support clustering.
• A client-side library to:
  • Detect device capabilities.
  • Automatically build URLs.

Documentation

• CLI
• API REST
• Middleware
• Node module
• C++

Contact

• Twitter: https://twitter.com/getribs
• Mailing list: http://groups.google.com/group/getribs
• Issues: https://github.com/ngryman/ribs/issues