In some cases it might make sense to exclude images for performance. For example, at 0px up to, say 400px, I might not want any cut of an image to download/display, if it is ancillary content. This can potentially increase performance by reducing page weight and HTTP reqs. for very old, incapable or legacy devices.
Seems like it would be a nice option to have. I drafted the idea in a clone if anyone's interested.
Hi Scott, I also thought that would do the trick, but it seems - and I could totally be wrong about this behavior - that picturefill interprets an 'empty' range by doing nothing, leaving an <img> element in the source, without a valid src property. I haven't tested whether this causes browsers to barf or not, so maybe its OK.
My experiment was to make picturefill remove the <img> element from the source for 'empty' ranges. On line 30, I added an additional check to the conditional: && matches[matches.length-1].getAttribute( "data-src" ), which appears to make picturefill to remove the <img> element from the DOM for an empty range. I don't know if my idea is valid. If you don't think so I'll close this issue.
&& matches[matches.length-1].getAttribute( "data-src" )
Additionally, if you don't have any valid ranges, then ie7/8 doesn't show anything due to media quiries. I almost always have to include a small img element by default, just in case someone in ie7/8 is viewing (the client sites i work on have tens of thousands of visitors/month in old IE browsers) and so I have to leave an image left on by default. Unfortunately then, when I want to hide it in mobile, it still ends up downloading.
I wish there was a simpler way to hide on mobile (say, less 400px like this example issue), but still have an image left on by default for larger screens (for the non-media query browsers).
Huh. That's odd, I'm not seeing this problem on my end. Are you sure you didn't mistake the noscript fallback img for a generated one when inspecting?
What do you see when you test the following markup?
<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<div data-src="external/imgs/extralarge.jpg" data-media="(min-width: 1000px)"></div>
<!-- Fallback -->
<noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>
For me, it'll load nothing in narrow viewports, and a large image in viewports wider than 1000px.
If you're still seeing a problem, can you create a demo page to check out? Thanks!
With ie7/8 on desktop larger than 1000px, i get no image.
Is this behaviour not intended? I have modernizr up and running, but i still assumed IE would ignore the min-width's and I'd always need a default regardless.
Brilliant. I'll try that. I don't know why I hadn't thought of that. I really just need some images to not download at all on mobile devices, but I still want the full benefit of using this picturefill methodology without leaving IE people out. Wrapping some plain image tags inside IE conditional statements to force IE to load when media queries aren't working, might do the trick. Thanks!
This thread looks very useful for the progressive enhancement method. Excluding images from mobile devices, then adding images to larger/faster devices. Can one of you please post the modified code to make this happen?
Sounds like this is behaving as expected in the given browser. Closing out.