1

What is the best method for implementing responsive images in Rails when using asset pipeline and the image_path helper?

Doing it purely through CSS is sadly a no-go for me, since that causes issues in IE with scaling.

bogjerlow
  • 55
  • 4
  • What are your issues with IE ? you could check out the mobylette gem for having different views on mobile phones. – Snake Dec 04 '17 at 10:21
  • @Snake The issue in IE is that the high-res images I have used do not get scaled down as well as in other browsers, causing jagged edges in the images. I was going to use srcset to serve responsive images, but I cannot figure out how to make it work with image_path – bogjerlow Dec 04 '17 at 10:34
  • Have you tried looking at CSS transform to scale the image ? see https://stackoverflow.com/questions/9945363/image-scaling-causes-poor-quality-in-firefox-internet-explorer-but-not-chrome – Snake Dec 04 '17 at 10:38
  • @Snake Just tried that, didn't work since I am using percentages for the images rather than px – bogjerlow Dec 04 '17 at 10:49

1 Answers1

0

Use carrierwave gem and upload images using versions like:

class MyUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick

  process resize_to_fit: [800, 800]

  version :thumb do
    process resize_to_fill: [200,200]
  end

  version :large do
    process resize_to_fill: [600,600]
  end

end

Use different versions for different screen size.

uploader.url # => '/url/to/my_file.png'               # size: 800x800
uploader.thumb.url # => '/url/to/thumb_my_file.png'   # size: 200x200
uploader.large.url # => '/url/to/large_my_file.png'   # size: 600x600
puneet18
  • 4,341
  • 2
  • 21
  • 27