attilagyorffy.com

Responsive Images in Rails applications

Introduction

Attila Györffy

Attila Györffy

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


Responsive Images in Rails applications

Posted by Attila Györffy on .
Featured

Responsive Images in Rails applications

Posted by Attila Györffy on .

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.

The 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.

Attila Györffy

Attila Györffy

https://attilagyorffy.com

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

View Comments...