As high DPI displays become more common, it seems like the time has come for more advanced file formats (or just using the more advanced features of existing formats). For example, PNG already has an interlacing mode that progressively adds detail to the image (<a href="http://en.wikipedia.org/wiki/Adam7_algorithm" rel="nofollow">http://en.wikipedia.org/wiki/Adam7_algorithm</a>). It could easily be co-opted such that a normal image contains 6 layers of detail, with an additional "retina extension" image that high DPI browsers grab to refine the quality. This avoids the waste of downloading a low DPI image, then throwing it away to replace it with high DPI.<p>Even more interesting is <a href="http://en.wikipedia.org/wiki/JPEG_2000" rel="nofollow">http://en.wikipedia.org/wiki/JPEG_2000</a>, which has "truncatable" bitstreams. You can stop getting data at any point, and depending on the encoding choices, you'll just lose fidelity in colour, resolution etc. Encoders can reorder the bitstream to deliver whatever is most useful for the image first. Browsers could then just stop when "enough" has been downloaded to satisfy the demands of the device; high DPI devices would just continue to grab more of the bitstream. It's really useful for devices on low bandwidth links, as you start getting visual results with very little data.<p>JPEG 2000 hasn't been widely implemented outside of specialised devices, mostly because it's computationally heavy compared to JPEG, and the patent situation is unclear. Although this does mean that it could be implemented in a targeted way, designed to solve these problems (the spec for the entire format is <i>huge</i>). Moreover, one of the patent holders is, IIRC, Apple.
Can we please stop using the silly Apple marketing gimmick "retina display" yet?<p>It's a high-DPI display. Lots of devices have it. Lets not attempt to pretend there's anything Apple-specific about that.
Wouldn't that mean that the device will first try to download all of the low res images and when the script finished loading and is running, the device would then start to load all of the high res images. How's the user experience with all of those additional requests and traffic? (especially via GSM/CDMA)
foresight.js looks more interesting since it takes the perceived connection speed into account when deciding to serve up 2x images. <a href="https://github.com/adamdbradley/foresight.js" rel="nofollow">https://github.com/adamdbradley/foresight.js</a>
Wow, the background on that page takes forever to fill in on my iPhone 4. Like over a minute. And the whole Mobile Safari hangs for 30 seconds or so if I switch orientation, I think because it has to resize the massive background image to the changing screen width and the processor isn't up to it.<p>So I would be cautious of using this technique with huge images.
While this script is fine, it adds an extra HTTP request per image to check for a retina version of the image. Also, the browser will start downloading the small version before it loads the big version (adding another extra http request). Check this easy jQuery snippet that does the same thing, but avoids these issues:<p><a href="http://www.archer-group.com/2012/development/javascript-jquery-snippet-for-doing-retina-resolution-images" rel="nofollow">http://www.archer-group.com/2012/development/javascript-jque...</a>
After introducing Retina displays and graphics.. Apple has unknowingly disrupted the whole display industry. Suddenly all of us now start noticing pixels on our laptop screens as well as HDTVs, which existed since a long time now. I believe this will actually thrust the current internet into a new era of HD internet and soon computer makers and tv makers will jump onto making high pixel density displays. This makes sense. Till now, all was about resolutions and the larger the resolution the smaller the icon, window etc in the OS world. Apple's retina implementation has changed that. You still see things in the same size or aspect ratio but the sharpness is 4 times that of what we used to see earlier, making the whole data consumption experience to be overwhelming.. Kudos to Apple for this. I hope most of the internet 2.0 and display manufacturers are thinking alike on this..
I havent used the code and I'm sure it works well. However, we've been seeing a lot of unnecessary library usage. A lot of jQuery-based things that really don't need to be as an example and looking at the .coffee files here, I think that the JS it produces would be very simple. Why not just write the JS? Is there really a benefit from coffee in this situation?
I'm already used to doing this for iOS, and though the process is cumbersome, enjoy the simplicity of using @2x images when designing apps.<p>That said, this is why CSS3 is so valuable, particularly when responsive websites have already complicated the process of building a website/app.
What about jQuery Retina (<a href="http://retina.tylercraft.com/" rel="nofollow">http://retina.tylercraft.com/</a> and <a href="https://github.com/tylercraft/jQuery-Retina" rel="nofollow">https://github.com/tylercraft/jQuery-Retina</a>)?
I like the idea however there was some discussion that Safari on the new iPad downsamples the images even if they are at retina resolutions. I have not looked at the code however I hope that this issue is addressed.