

Retina.js: Retina graphics for your website - orofino
http://retinajs.com/

======
archgrove
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
(<http://en.wikipedia.org/wiki/Adam7_algorithm>). 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.

Even more interesting is <http://en.wikipedia.org/wiki/JPEG_2000>, 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.

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 _huge_ ). Moreover, one of the patent holders is, IIRC, Apple.

~~~
ned
The idea of compound images is really interesting, although it would require
an extra HTTP request to fetch the hight-DPI portion of the image. But maybe
less of a problem over SPDY?

The idea truncatable bitstreams is fascinating too. I'm not well versed in
networking, but wouldn't the latency of a mobile network kill the benefit of
this technique? e.g, by the time the server receives the "connection closed"
signal, a large part of the extra data would have been sent, no?

~~~
archgrove
It would need an extra HTTP request, yes. In practice for the PNG solution,
one would be better off with sending the DPI in the request headers, so that
the "correct" image is the only one sent.

For JPEG 2000, the network characteristics are important, but I don't think it
would be too bad on a mobile network. Low DPI devices might get a bit "too
much", but it wouldn't be a problem - they can just throw it out (or
incorporate more detail).

~~~
jentulman
Headers do seem the best place for a non vendor specific standard to be set.
I'd love to see something like

viewport-dpi - the dpi viewport-max - the maximum possible pixel dimension and
possibly viewport-current - the pixel dimensions at the time of the request

Decent responsive design should deal with the differing viewport sizes, but it
might be nice to get a hint before delivering your page what direction to
weight that response in.

~~~
Groxx
What do you do when using a projector, and your DPI is something like 3?
(serious question, I don't know how this is traditionally handled)

~~~
kijin
Something like device-pixel-ratio would be more useful than DPI. Raw DPI is
meaningless unless you take distance into account, as is very clear in the
case of the projector.

------
josteink
Can we please stop using the silly Apple marketing gimmick "retina display"
yet?

It's a high-DPI display. Lots of devices have it. Lets not attempt to pretend
there's anything Apple-specific about that.

~~~
melling
Who's else is making high-DPI displays? I have really seen companies running
with this. It would be nice to see Samsung, for example, start promoting 300
dpi screens so they go mass market.

~~~
maggit
Samsung builds the Galaxy Nexus, which has a 316 ppi display.

Now, we still have a way to go before high ppi displays are ubiquitous, but
there you have one example at least :)

~~~
altrego99
The Galaxy Nexus uses pentile subpixel rendering, which is a system with
slightly controversial ways of determining the PPI.

------
rb2k_
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)

~~~
orofino
Indeed it would. Certainly less than ideal, but this provides an avenue to
easily implement higher DPI graphics. Right now, it seems like the easiest
method to get a site upgraded without having to make a ton of changes.

Ideally, we'd have something that would deliver only the correct image to the
correct device, the first time. I haven't seen a clean method for achieving
that yet.

~~~
wildmXranat
Agree, I think the correct solution is to actually have a request filter on
the server that correctly maps the img tag source to a high DPI version.
Obviously, this would be a framework or server specific implementation, but
this is the only correct way.

------
boonedocks
foresight.js looks more interesting since it takes the perceived connection
speed into account when deciding to serve up 2x images.
<https://github.com/adamdbradley/foresight.js>

~~~
Synaesthesia
That's pretty intelligent.

------
smackfu
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.

So I would be cautious of using this technique with huge images.

~~~
chris_wot
Agreed! Potentially, you could be causing greater data charges/slower loading
just because you have an iPad 3... Anyone know if there's a setting to turn
these image loads _off_ on an iPad 3?

~~~
Hervetar
No, you just have to assume that PNGs are not used and that JPGs are used
instead.

But we have so-called experts trying to lead the way now...

------
dwnoiz
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:

[http://www.archer-group.com/2012/development/javascript-
jque...](http://www.archer-group.com/2012/development/javascript-jquery-
snippet-for-doing-retina-resolution-images)

~~~
caseyohara
There are several problems with this implementation.

1\. The image doesn't have a src attribute. This means if that script fails
for any reason then none of the images on your site load.

2\. You need to have width and height attributes on all of your images. This
is a nightmare for both dynamically generated content and for responsive
designs.

3\. You need to have those two extra attributes on each of your image elements
in order for it to work.

Our goal was to make retina.js zero-config. We wanted it to work on existing
sites without any changes to the existing markup.

------
jeetensheth
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..

~~~
dubya
The main place that pixels were noticeable was in an Apple store. Next to the
iPhone 4, the older iPads looked much less sharp, at least for text
(particularly Computer Modern). There have been lots of attempts at resolution
independence, and I'm sure Windows and various Linux GUIs have hooks for such,
but they've not been tested much because the hardware was generally in the
96-120 ppi range. There's no need for HDTVs to change.

------
sams99
Am I missing something or is this approach downloading both high dpi and non
high-dpi images for high-dpi displays?

~~~
awolf
Yes. Unfortunately. I'm not sure this is a good solution.

------
emehrkay
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?

~~~
caseyohara
It doesn't use jQuery or any other library; it is framework-agnostic.

We had originally written it in JavaScript, but decided to use CoffeeScript
simply because it's nicer to read and write.

------
nhangen
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.

That said, this is why CSS3 is so valuable, particularly when responsive
websites have already complicated the process of building a website/app.

------
julienc
What about jQuery Retina (<http://retina.tylercraft.com/> and
<https://github.com/tylercraft/jQuery-Retina>)?

------
kenrikm
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.

~~~
orofino
This appeared to be "as designed" in safari. The only solution I'm currently
aware of is to save images as progressive jpgs. This gets around the
limitation imposed by Apple.

------
fernandezpablo
It doesn't handle response codes properly.

<https://github.com/imulus/retinajs/pull/16>

