It’s quite common today for web sites to be viewed on a wide range of devices, from powerful desktop workstations with huge screen resolutions and plenty of bandwidth, to tiny resource-constrained mobile devices. Serving images to this wide range of clients becomes an issue: if you make your images large, you’ll severely degrade performance on mobile phones, but if you make your images small, they’ll look terrible to desktop users.
Wouldn’t it be nice if you could serve small images to mobile clients, and large images to desktop clients? The HTML spec doesn’t really allow for device-specific asset serving, but it can be done with a little dash of cleverness. The technique used here allows you to serve device-specific images, and not make two server requests (saving bandwidth and server load).
We’ve packaged it up as a rubygem.
responsive_image_tag is a Rails helper which selects an image depending on the width of the current device. The screen.width is detected by javascript and then an image element is inserted in the page with a dynamically created src attribute.
It works with Rails 2 and Rails 3, and there are javascript adapters for both jQuery and Prototype. Pick your poison.
You can find out what problems we’re trying to solve with this code by reading the blog post about it here.
Although this is packaged as a ruby gem, the approach is generally valid across platforms, and as a bonus, it is accessible - screenreaders and web crawlers will see the content of the <noscript> tag, and parse the content quite happily.
Here’s the HTML which the helper inserts into the page:
<span class="img-placeholder"></span> <noscript data-mobilesrc="small.jpg" data-fullsrc="big.jpg" data-alttext="your alt text" class="responsivize"> <img src="big.jpg"> </noscript>
The responsive images have to appear for non-javascript users as well as those with javascript turned on.
To achieve this the helper places the default image inside a <noscript> tag which is then deleted by the javascript library. The image attributes such as full size, mobile size and alt text are also stored as HTML5 data attributes on the <noscript> tag so they are available in the DOM for the javascript to access.
The library relies on a trick which has all the elegance of a greasy late-night kebab: child elements of the <noscript> tag are not added to the DOM, so deleting the <noscript> prevents an HTTP request being made to the server. This way only the image being requested by the dynamically inserted image tag is making a request.
To insert the dynamically created image element into the page you need a parent element in the DOM to append to. The rails helper also creates a <span> tag with a class of “img-placeholder” to house the new image.
When the DOM is ready the javascript object responsiveImageTag detects all <noscript> elements on the page with a class of “responsivize”.
It retrieves the HTML5 data attributes (data-mobilesrc, data-fullsrc, and data-alttext) and then creates an image tag with the correct source depending on the available screen width of the users device. Any device smaller than 768px is considered to be a mobile device. The library inserts the new element into the page and the <noscript> tags are then hidden from view.
Put it in your Gemfile:
gem 'responsive_image_tag'
Then install it:
bundle install
There’s a generator which copies a JavaScript file into place in public/javascripts.
You can run it like this:
rails g responsive_image_tag:jquery
or
rails g responsive_image_tag:prototype
script/generate jquery_responsive_image_tag
or
script/generate prototype_responsive_image_tag
You need to do two things. First, make sure that you include a reference to the JavaScript file in your layout:
<%= javascript_include_tag "responsive-image-tag-jquery" %>
or
<%= javascript_include_tag "responsive-image-tag-prototype" %>
After that, you can use the new tag like so, in a view:
<%= responsive_image_tag("small.jpg", "big.jpg") %>
-
Check out the latest master to make sure the feature hasn’t been implemented or the bug hasn’t been fixed yet
-
Check out the issue tracker to make sure someone already hasn’t requested it and/or contributed it
-
Fork the project
-
Start a feature/bugfix branch
-
Commit and push until you are happy with your contribution
-
Make sure to add tests for it. This is important so I don’t break it in a future version unintentionally.
-
Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
Copyright © 2011 Headlondon, www.headlondon.com
Authors: Dave Hrycyszyn, Mairead Buchan
See LICENSE.txt for further details.