Retina.js: Retina graphics for your website • Hacker News Board

Re: Retina.js: Retina graphics for your website

#41

Post by dwnoiz » Fri, Apr 20, 2012, 2:55 PM UTC

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

Check this way of doing it to avoid extra http requests. http://www.archer-group.com/2012/development/javascript-jque...

Re: Retina.js: Retina graphics for your website

#42

Post by alinajaf » Fri, Apr 20, 2012, 2:59 PM UTC

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.

Don't get me started. Anytime anyone asks me if I'm a Mac or a PC, my response is "Mac's aren't PC's? What have they started making mainframes now?"

Re: Retina.js: Retina graphics for your website

#43

Post by smackfu » Fri, Apr 20, 2012, 3:09 PM UTC

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.

Re: Retina.js: Retina graphics for your website

#44

Post by ajross » Fri, Apr 20, 2012, 3:22 PM UTC

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…

Regarding the first trick: the value really isn't very much. Storing 2x2 downsampled versions of an image at all levels is only a 33% increase in size. This is the mipmap trick, and can be done right now with nothing but a size check on the client. I don't think 33% is worth mucking with file formats over.

Re: Retina.js: Retina graphics for your website

#45

Post by emehrkay » Fri, Apr 20, 2012, 3:25 PM UTC

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?

Re: Retina.js: Retina graphics for your website

#46

Post by bruceclark » Fri, Apr 20, 2012, 3:28 PM UTC

kenrikm wrote: post #16

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.

This will only happen with JPG images, and if you use the progressive when saving, it works fine.

Re: Retina.js: Retina graphics for your website

#47

Post by ajross » Fri, Apr 20, 2012, 3:29 PM UTC

rimantas wrote: post #22

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.

There is nothing silly no gimmicky about it. It is just a catchy name for some technology. There are a lot of similar marketing terms in tech. Lots more people will understand what you are talking about when you say "retina display" instead of "high-DPI display". What's high-DPI? What's high-DPI when talking about pentile displays? Not to mention that "retina" is easier to pronounce. Apple loves simpler names for a r…

No, it's a gimmick designed expressly to confuse the consumer. Other manufacturers of comparable products, for trademark reasons, can't use the term "retina". So only Apple has "retina".

Intel played a similar trick about 8 years ago with "Centrino". The advertising (for what was essentially just a 802.11b chipset with some added processor/chipset requirements) was so successful that many novice users got fooled into thnking that "Centrino" was wifi, and that all those other manufacturers were just cheap knockoffs of an Intel technology. It did great harm to the market.

Re: Retina.js: Retina graphics for your website

#48

Post by goblin89 » Fri, Apr 20, 2012, 3:29 PM UTC

ned wrote: post #26

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…

No, the distinction of device pixels vs. CSS pixels predates the first "Retina" iPhone. The distinction existed in all browsers supporting full page zoom, including the Safari on the first iPhone, and in Opera for years before that. "Retina" is just a marketing term for "pixels so small your eye can't distinguish them at a normal distance anymore".

The distinction is also in CSS specs[0] since version 2.1: “The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. 1px thus corresponds to about 0.26 mm (1/96 inch).”

[0] http://www.w3.org/TR/CSS21/syndata.html#length-units

See also http://inamidst.com/stuff/notes/csspx (been featured on HN some time ago)

Re: Retina.js: Retina graphics for your website

#49

Post by ajross » Fri, Apr 20, 2012, 3:32 PM UTC

kennu wrote: post #39

mgunes wrote: post #33

Earlier quoted context omitted.

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.

Uh... of course it's about semantics. What josteink was complaining about was the use of a proprietary marketing term to refer to something technical.

Your interpretation is a fine one, but it's not the one that everyone shares. Specifically, it's not the sense that Apple uses the term either. Take a look at Apple's marketing page for the retina display and see if you can find anything about "resolution independence" at all.

Re: Retina.js: Retina graphics for your website

#50

Post by huggyface » Fri, Apr 20, 2012, 3:49 PM UTC

hej wrote: post #40

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

It's a device where distance to the display, resolution and screen size are such that someone with normal vision cannot distinguish between pixels.

It is a post-development sales pitch used to pitch as a differentiation the fact that Apple's naive scaling required them to grossly overshoot the mark. Competitive products already had excellent displays before Apple decided that they had no choice but catch up.

I would love it if any company could call their HD TVs retina displays

Why would you love it? "Retina" display is a misnomer -- unless the device is a fixed distance from my eyes, and it is specifically geared for my eyes specifically, it is horse shit to call it a retina display. It is ignorant marketbabble that lowers us all.