Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Retina.js: Retina graphics for your website

retinajs.com

Post reply on HN
Print view View original

31–40 of 102 posts

Re: Retina.js: Retina graphics for your website

#31

Post by archgrove »

ned wrote: post #29
archgrove wrote: post #23

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…

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,…

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

Re: Retina.js: Retina graphics for your website

#32

Post by downx3 »

goatforce5 wrote: post #24
downx3 wrote: post #14

Earlier quoted context omitted.

Might be just as well to sniff the user agent.

Is there a difference in the user agent between iOS 5.1 on a 3GS and a 4S?

Thought it might be better to sniff the device resolution, but apparently the ipad3 lies!

http://www.priteshgupta.com/2012/04/detecting-ipad-3-for-spe...

Re: Retina.js: Retina graphics for your website

#33

Post by mgunes »

kennu wrote: post #21
josteink wrote: post #2

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.

I've understood that technically the main idea of "retina" is that the physical display pixels no longer map one-to-one with the logical user interface (CSS) pixels. Instead, the retina display appears as a virtual low-resolution screen that is able to utilize higher-resolution images (which would otherwise be scaled down). So in this sense, I would claim there is a clear technical difference between just higher-reso…

It's called resolution independence, and has been built into various toolkits and operating systems well before the first "Retina" device.

https://en.wikipedia.org/wiki/Resolution_independence

Re: Retina.js: Retina graphics for your website

#34

Post by 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...

Re: Retina.js: Retina graphics for your website

#36

Post by jentulman »

archgrove wrote: post #31
ned wrote: post #29

Earlier quoted context omitted.

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,…

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 in…

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.

Re: Retina.js: Retina graphics for your website

#37

Post by wildmXranat »

orofino wrote: post #6
rb2k_ wrote: post #3

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)

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.

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.

Re: Retina.js: Retina graphics for your website

#39

Post by kennu »

mgunes wrote: post #33
kennu wrote: post #21

Earlier quoted context omitted.

I've understood that technically the main idea of "retina" is that the physical display pixels no longer map one-to-one with the logical user interface (CSS) pixels. Instead, the retina display appears as a virtual low-resolution screen that is able to utilize higher-resolution images (which would otherwise be scaled down). So in this sense, I would claim there is a clear technical difference between just higher-reso…

It's called resolution independence, and has been built into various toolkits and operating systems well before the first "Retina" device. https://en.wikipedia.org/wiki/Resolution_independence

This becomes about semantics, then. If somebody writes an article about "retina displays", I immediately assume it's about this particular way of implementing resolution independence in the browser and in the OS (by doubling/quadrupling the physical resolution while keeping the virtual resolution the same). So as such it serves me better than a generic term that requires additional explanation.

Re: Retina.js: Retina graphics for your website

#40

Post by hej »

josteink wrote: post #2

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.

DPI i just incorrect. Use PPI if you really insist on that name.

That said, there is nothing gimmicky about the retina name. It's a device where distance to the display, resolution and screen size are such that someone with normal vision cannot distinguish between pixels.

High-PPI does not in any way pack the same information. It’s ambiguous and unclear.

The only thing that’s bad about retina is that Apple uses it like a trademark. I would love it if any company could call their HD TVs retina displays (because they are), but that’s not possible. Luckily everyone else is busy taking away that name from Apple (for example by naming their software like that).

Post reply on HN