Build Status Gem Version Coverage Status

Rails helper for <picture> tag integrated with Picturefill.


Add this to your application's Gemfile:

  gem 'picture_tag'

And then execute:

$ bundle

Or install it yourself as:

$ gem install picture_tag

In case you would like to add a picture polyfill:

  source 'https://rails-assets.org' do
    gem 'rails-assets-picturefill'

And add to your application.js:

//= require picture_tag


= picture_tag '/images/fallback.jpg', image: { alt: 'Your smart alt attribute' } do
  = source_tag srcset: '/images/large.jpg', media: '(min-width: 2000px)', sizes: '100vw'
  = source_tag srcset: '/images/large_retina.jpg 2x', media: '(min-width: 2000px)', sizes: '100vw'
  = source_tag srcset: '/images/medium.jpg', media: '(min-width: 1000px)', sizes: '100vw'
  = source_tag srcset: '/images/medium_retina.jpg 2x', media: '(min-width: 1000px)', sizes: '100vw'
  = source_tag srcset: '/images/small.jpg', sizes: '100vw'
  = source_tag srcset: '/images/small_retina.jpg 2x', sizes: '100vw'


  <source srcset="/images/large.jpg" media="(min-width: 2000px)" sizes="100vw">
  <source srcset="/images/large_retina.jpg 2x" media="(min-width: 2000px)" sizes="100vw">
  <source srcset="/images/medium.jpg" media="(min-width: 1000px)" sizes="100vw" >
  <source srcset="/images/medium_retina.jpg 2x" media="(min-width: 1000px)" sizes="100vw" >
  <source srcset="/images/small.jpg" sizes="100vw">
  <source srcset="/images/small_retina.jpg 2x" sizes="100vw">
  <img alt="Your smart alt attribute" srcset="/images/fallback.jpg">

Note that the mandatory img tag is automatically generated based on the arguments passed to the picture_tag.

More information


  1. Fork it ( https://github.com/tomasc/picture_tag/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request