It's not a bad solution, but I don't think it's the best solution. Obviously, the thing that sticks out as being the most inefficient is that the small (or default) image is always loaded. This means that for tablets and desktop browsers there will be an extra image request that is never used. Not too bad, but on a page with a lot of images this could add up.<p>I haven't personally tried it yet, but it seems the best option out there at the moment is the Capturing polyfill by Mozilla (<a href="https://hacks.mozilla.org/2013/03/capturing-improving-performance-of-the-adaptive-web/" rel="nofollow">https://hacks.mozilla.org/2013/03/capturing-improving-perfor...</a>).<p>Another thing I would suggest the team think of is not loading images by browser width only. If we're tying these libraries to the idea that they improve performance by optimizing which images are loaded - so that you only transfer the necessary amount of KB per page view - browser width is a bit removed from what you want. What you actually want to measure is the user's network speed (which can be done with libraries like Foresight.js : <a href="https://github.com/adamdbradley/foresight.js" rel="nofollow">https://github.com/adamdbradley/foresight.js</a>). Loading large images on a slow network isn't going to be good for performance. By using both browser size and network speed, you can optimize images for mobile devices over 3G or those connected to WiFi. Or desktops on broadband versus desktops on 56k modems.
this solution does not work as domload is executed way too late and image replacement cause nasty reflow.<p>RWD images problem is much more complicated than this.
you have to consider things like:
- dom reflow (img tag without width/heigh)
- requests (additional request to load default image)
- internet speed (you can use wifi on your phone, or 3g on laptop)
- choosing breakpoints<p>i wrote a blog post about this some time ago <a href="http://gondo.webdesigners.sk/responsive-images/" rel="nofollow">http://gondo.webdesigners.sk/responsive-images/</a>
apparently i'm not the first one thinking about using base tag. i've come across some old video (dont remember the link anymore) where it was refused because of "browser bug". unfortunately i never found out what bug is the guy referring to so i can just assume that it was already fixed.
Their demo page fails to take into account pixel density, which is a shame since serving the right image to the right device is their entire justification.<p>Those images look awful on my Chromebook Pixel.
This looks great! How do I specify a media query for different screen densities? For instance, if I wanted to serve a 2880px wide image to a 15" Retina MacBook Pro and a 1440px to a 'normal' computer?
How does this compare with existing solutions like: <a href="http://adaptive-images.com/" rel="nofollow">http://adaptive-images.com/</a>
?<p>Obviously this is client side, does that make it better? Timing my page load around a set of loading images seems counter intuitive; there's lots of other stuff to worry about.
Could someone explain to me why this is better/easier than just using CSS media queries myself?<p>Also:<p>> Whatever image you put inside the src of the image element will render by default. Then, the Javascript will progressively load larger images based on media queries that you pass into the data-interchange attribute.<p>So, for larger screens, there would be many requests for a single image? For example, if I drop a mobile-optimized image into the src and then view the page on a retina macbook, wouldn't this mean many image requests from the "mobile" version up through "full-size retina"?
I'm a huge fan of Zurb and their work on Foundation, this looks like a good stopgap implementation. I just hope it isn't long until there is a standard implementation everyone can settle on, we don't want to end-up with <a href="http://xkcd.com/927/" rel="nofollow">http://xkcd.com/927/</a>
I wouldn't mind having Interchange or this: <a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/#adaptive-images" rel="nofollow">http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/#adaptive...</a> as a standard
I also ran across imgix.com a few days ago which is a CDN that does on the fly image resizing on GPUs.<p>Are there some examples on how you would integrate something like that here?