Responsive images made easy

When redesigning the Cook Smarts meal planning app, we knew we had to handle images in a smarter way. Pictures of food are very important to the site. They make it easier for people to navigate to familiar dishes, and give an idea of what to expect when cooking them.

We have hundreds of high-res images stored on Amazon S3. We were missing two things: thumbnail-sized images, and a way to determine which size image to serve based upon the user’s screen size.

reSRC took care of both of these needs for us. It is a service that sits between your high-res images and your users, scaling down your images to fit the users’ screens. We simply inserted the reSRC JavaScript, and that was about it.

I’ve prepared a screencast to show you how easy it is to implement reSRC.

Note: Here we are using Chrome’s JavaScript console to bring in reSRC. In the real world, you would place reSRC’s JavaScript into your code directly.

Plug-and-play solutions like this make it easy for any web site to use responsive images, without coding. We may eventually generate our own thumbnails and serve the proper sized images through media queries, but reSRC allowed us to go responsive with our images in less than an hour, for about $30/month. That is pretty remarkable.

For more possible solutions, check out Smashing Magazine’s article, Choosing a Responsive Image Solution. brings Rails job offers to you. Free for candidates. Salaries from $75,000 to $250,000. Sign up now!

Leave a Reply