Responsive Images solution with native EE and/or Addons

Question

Considering that add-ons like Channel Images and even the native EE image upload functionality provide the option to create duplicates of uploaded images at rescaled sizes, (or produced on-the-fly with CE Image) has anyone had experience in using this functionality in conjunction with JS to serve image files based on screen sizes?

I'm not referring to the RWD CSS on the front end (responsive images and media queries), I'm interested in the aspect of serving different image files from EE based on screen sizes via Ajax after the page has loaded and I can detect the screen width. Any caveats, or gotchas specific to EE?

Answer 1

I use an add-on I developed which sets a screen width variable which you can use in conditionals and then I use an image sizing plugin to serve up different sized images based on that. A bit more detail here.

Answer 2

I can't see any issues to worry about here. A couple of approaches that could work, using the PictureFill technique:

Using EE image manipulations:

<div data-picture data-alt="My picture">
    <div data-src="{my_image:small}"></div>
    <div data-src="{my_image:medium}" data-media="(min-width: 400px)"></div>
    <div data-src="{my_image:large}" data-media="(min-width: 800px)"></div>
    <div data-src="{my_image:xlarge}" data-media="(min-width: 1000px)"></div>
    <noscript>
        <img src="{my_image:small}" alt="My picture">
    </noscript>
</div>

Or using CE Image:

<div data-picture data-alt="My picture">
    <div data-src="{exp:ce_img:single src='{my_image}' width='300' output='{made}'}"></div>
    <div data-src="{exp:ce_img:single src='{my_image}' width='380' output='{made}'}" data-media="(min-width: 400px)"></div>
    <div data-src="{exp:ce_img:single src='{my_image}' width='780' output='{made}'}" data-media="(min-width: 800px)"></div>
    <div data-src="{exp:ce_img:single src='{my_image}' width='980' output='{made}'}" data-media="(min-width: 1000px)"></div>
    <noscript>
        {exp:ce_img:single src='{my_image}' width='300' output='<img src="{made}" alt="My picture" />'}
    </noscript>
</div>

Answer 3

I don't know of any gotchas specific to EE. And I've had good luck using the native EE file manager, as well as Assets and Channel Images, to create and serve up multiple sizes of images to different devices. I like the way Channel Images structures its directories; I think it makes it easier to use for responsive images than the other solutions.

Also, this isn't image-specific, but there's an addon by Tyssen that will let you set an EE cookie for the window size via JS and then access it in templates. It makes the whole serving-multiple-images thing much easier. It's called RESS.

Answer 4

Don't bother!

Read this blog post, it might be of interest to you?

http://boagworld.com/dev/how-should-we-handle-responsive-images/

Answer 5

The above answers mention the picture pollyfill this is now in some browsers: http://filamentgroup.com/lab/picturefill_2_a.html

So set up your image manipulation and use the picture tag with srcset

Answer 6

Now that SRCSET is becoming more widely supported you can use EE Image manipulations to output various sized images, something like this:

{my_image_field}
<figure>
    <img src=”{url:small}” 
    srcset=”
        {url:small} 600w, 
        {url:medium} 960w, 
        {url:large} 2000w
    ” alt=”“>
    <figcaption>{title} {description} {credit}</figcaption>
</figure>
{/my_image_field}