Responsive images helper using srcset in Rails

images_helper.rb

module ImagesHelper
  # Acts as a thin wrapper for image_tag and generates an srcset attribute for regular image tags
  # for usage with responsive images polyfills like picturefill.js, supports asset pipeline path helpers.
  #
  # image_set_tag 'pic_1980.jpg', { 'pic_640.jpg' => '640w', 'pic_1024.jpg' => '1024w', 'pic_1980.jpg' => '1980w' }, sizes: '100vw', class: 'my-image'
  # 
  # => <img src="/assets/ants_1980.jpg" srcset="/assets/pic_640.jpg 640w, /assets/pic_1024.jpg 1024w, /assets/pic_1980.jpg 1980w" sizes="100vw" class="my-image">
  #
  def image_set_tag(source, srcset = {}, options = {})
    srcset = srcset.map { |src, size| "#{path_to_image(src)} #{size}" }.join(', ')
    image_tag(source, options.merge(srcset: srcset))
  end
end

Does not work in production (at least for me).

Solution: use asset_path() instead of path_to_image()

Nice, thanks for this.

I wrote this version which assumes you always have 2x and 3x, so you only need to provide 1x: https://gist.github.com/henrik/2ddcc6ab8c66e7c49305

Anyone using this with Middleman (v3) can swap path_to_image with image_path

I've taken this a little further https://gist.github.com/moxie/5e99743fbb6e517b1ccf. Still allows specifying srcset as a hash, but does a little checking to determine if the given image path is a local asset path or perhaps a URL. Also adds a little sizes DSL to work with Bootstrap's default breakpoints. Hope it might help someone.

Thanks!

I keep getting Asset was not declared to be precompiled in production.
I changed path_to_image to image_path and also tried asset_path but I keep getting the same results.

Any suggestions??

Thanx

Nice code snippet. Thanks.

I prefer using naming convention for 2x retina images (ex. image.png -> [email protected]), so you don't need to supply srcset for your helper every time. Just use it like this: retina_image 'image.png'. Simple. Here is the gist of the helper method.

This is still a useful snippet. Thanks 👍

Rails' image_tag supports srcset now: https://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-image_tag

@murdoch 🥇