Rails responsive images

A Rails image_tag() extension to generate HTML5 <img> tag using srcset. To resize images use the rake task "rake rails_responsive_images".

The following image_tag

= image_tag 'awesome/picture.jpeg', alt: 'awesome', responsive: true

will generate this output:

<img src="/assets/picture.png"
     srcset="/assets/responsive_images_360/picture.png 360w,
             /assets/responsive_images_576/picture.png 576w,
             /assets/responsive_images_768/picture.png 768w,
             /assets/responsive_images_992/picture.png 992w,
             /assets/responsive_images_1200/picture.png 1200w,
             /assets/responsive_images_1600/picture.png 1600w"
>

Installation

Add this line to your application's Gemfile:

gem 'rails_responsive_images'

And then execute:

$ bundle

Or install it yourself as:

$ gem install rails_responsive_images

Usage

Configure the size steps you want to create:

RailsResponsiveImages.configure do |c|
  c.image_sizes  = [767, 991, 1999]
end

Default is:

image_sizes  = [360, 576, 768, 992, 1200, 1600]

Add the responsive flag on image_tag helper

= image_tag 'awesome/picture.jpeg', alt: 'awesome', responsive: true

Capistrano - Integration

before 'deploy:assets:precompile', 'build_responsive_images'
task :build_responsive_images, roles: :app do
  run "cd #{release_path} && RAILS_ENV=#{rails_env} bundle exec rake rails_responsive_images"
end

TODO's & issues

https://github.com/chilian/rails_responsive_images/issues

Contributing