27

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?

  • I've done some experiments with using MX Mobile Detect to serve different sized images on the basis of screen width, combining that with CE Image to dynamically then create the required image sizes and cache them (thereby only requiring a single image upload to generate the multiple sizes, for example). I've not done it for production purposes yet though - just as a proof of concept. I was generally satisfied with the result and the possible benefits. – Jean St-Amand Nov 21 '12 at 12:12
  • 3
    But at the same time, I look forward to @objectivehtml's photo frame add-on that would allow you to create multiple crops from the same source image so that the croppings can be context-appropriate. You could always run CE image on those as well, I would guess. – Jean St-Amand Nov 21 '12 at 12:13
  • Photo frame sounds very interesting in this context. It would help solve another problem with RWD images which is art direction. Will keep the radar on for it. Thanks for the tip Jean. – pseudoclass Nov 21 '12 at 13:34
16

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.

| improve this answer | |
  • ¡Fantastico! This is just what I was looking for. I will have to think about some sort of fallback for the EU cookie compliance bit but you definitely set me on the right track. – pseudoclass Nov 21 '12 at 13:38
26

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>
| improve this answer | |
  • Thanks Derek. This could be very useful if I need to provide some sort of a fallback procedure for EU cookie compliance (if the user has not already accepted to allow cookies). – pseudoclass Nov 21 '12 at 13:54
  • 2
    The great thing about this markup pattern and PictureFill is that it's based on the new <picture> element proposed to the W3C. – Derek Hogue Nov 21 '12 at 13:57
5

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.

| improve this answer | |
  • 1
    I too prefer the directory structure and naming conventions of Channel Images for this sort of thing. Believe I'm going to use a combination of Channel Images and RESS to take care of gallery and slideshow type imagery on this project. I guess the next step is to figure out how to implement this within an RTE like Wygwam or the native EE editor for inline content images. – pseudoclass Nov 21 '12 at 13:51
  • 1
    I recommend setting up a CKEditor Template, which you can do in Wygwam or Wyvern, for image blocks, and then using CE String in your template to do any necessary search/replace of the markup. – adrienne Nov 21 '12 at 14:28
2

Don't bother!

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

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

| improve this answer | |
  • 1
    Seems like many folks in the comments on that post find that is thesis simply does not hold true. – Derek Hogue Nov 21 '12 at 14:01
  • Agreed. Seems relying on the carrier is a bit precarious but it is an interesting article. I guess it really boils down to the size of the image in the design. Smallish thumbnail images could probably slide by just fine this way but with a 1140 wide header image you probably want to implement some sort of multiple size image serving option. – pseudoclass Nov 21 '12 at 14:08
  • It is also the case that if you use CloudFlare, which is a service i love, that they will handle the responsive images thing for you. But not everyone CAN use CloudFlare, and not everyone wants to. So it's still relevant to examine other approaches to the problem! – adrienne Nov 21 '12 at 14:27
  • Also Google looks at your sites speed for pagerank. I don't think Google's crawlers will be compressing images like a mobile network would. Don't bother...Mobile networks already compress the **** out of served images. -Boagwold PictureFill and CE image would be my choice – Shan Ricciardi May 30 '14 at 18:53
1

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

| improve this answer | |
0

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}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.