As a quick tip, here's how to generate a
<picture> element within Rails that will instruct browsers how to load different images on different screen resolutions:
In the above example I'm using standard media queries, you can obviously customize these to your own needs. A
<picture> element can take any number of
<source> children and will load the first one that matches the current screen.
image argument passed into the helper is in my case a CarrierWave uploader object that provides different image urls based on certain
versions you define within the uploader itself.
Read more about the
<picture> element as it's a great improvement over the old
<img> element and a lot of modern browsers are already supporting it.
I'm a Ruby/JS dev/trainer with a focus on quality. An ex-Londoner, @terracycle, @ubxd, @lastfm. Follow me at http://twitter.com/attilagyorffy