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

61–70 of 102 posts

Re: Retina.js: Retina graphics for your website

#61

Post by caseyohara »

dwnoiz wrote: post #41
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,…

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

That is certainly the ideal way to reduce the HTTP requests. The problem with this implementation is clear: without a 'src' attribute on your images, if your script fails then your site suddenly has no images at all. Not to mention the overhead of manually modifying all of your existing markup.

Our goal with retina.js was to make it zero-config: no markup changes, no extra element attributes or flags.

Re: Retina.js: Retina graphics for your website

#62

Post by twoodfin »

ajross wrote: post #54
twoodfin wrote: post #53

Earlier quoted context omitted.

> many novice users got fooled into thinking 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. Really? Both the claim that many users were "fooled" by the Centrino branding and that this hurt the market for Wi-Fi devices seem highly implausible to me. I don't think I heard anyone use the term "Centrino" outside of Intel…

Yes, really. I had to explain to numerous relatives the distinction between "Centrino" and "Wifi". How old are you? Were you engaged with people who were actively buying laptops at the time? Were you engaged on the subject outside the tech community? The Centrino television ads were pervasive, everyone knew what they were about, and no one at the time had ever heard of a laptop that could get on the internet without…

> The Centrino television ads were pervasive, everyone knew what they were about, and no one at the time had ever heard of a laptop that could get on the internet without a wire.

Apple introduced laptops with Wi-Fi (calling it "AirPort") in 1999, five years before your "eight years ago". Starbucks first started rolling out Wi-Fi (calling it "Wi-Fi")in 2001, and had most of their stores offering it by 2003. It was not an obscure technology eight years ago.

I'm sure whenever non-geeks go shopping for a computer, in any era, there are a variety of marketing terms that need to be explained to them. And yes, I'm old enough to have run through that exercise a few times. But that's not really evidence that "Centrino" hurt the growth of Wi-Fi any more than the way-more-prevalent "Pentium" branding hurt the '90-'00's highly competitive CPU market that gave us 2+GHz x86-64's.

Wi-Fi adoption rates were exceptional for a new computing technology, especially one that required infrastructure beyond what could be put "in the box".

Just like Apple was a couple of years ahead of the curve on Wi-Fi and called it AirPort, they're a couple of years ahead of the curve on double-res displays, too. I don't see how them putting the name "Retina" on those displays (while even in the OS they're still calling it Hi-DPI!) is going to harm what's surely going to be an explosion of high resolution screens in the next few years.

Re: Retina.js: Retina graphics for your website

#63

Post by kijin »

Groxx wrote: post #51
jentulman wrote: post #36

Earlier quoted context omitted.

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

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)

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.

Re: Retina.js: Retina graphics for your website

#64

Post by beagle3 »

archgrove wrote: post #59
WiseWeasel wrote: post #55

Earlier quoted context omitted.

Sounds complicated. I think we just need to do something similar to HTML5 'video' tags for the 'image' tag, where you simply put a list of file paths in the tag, and the browser selects the best one to request, only with different resolutions instead of different file encodings. We could have a standard notation like adding "_x2" to the double res image filenames, and the browser selects the appropriate one to load.…

That's fine if a) you're willing to maintain two image sets and, b) the only two resolution images you need are "normal" and "2 x normal". The advantage of a progressive quality system is it scales to arbitrary requirements in a single resource. One file provides 1x, 2x, 3x, 3.14x etc.

Storage is too cheap to care these days.

When $110 buys you 2TB (this morning on Newegg), then doing it on the fly and caching the result has about 100x better ROI than trying to solve it with a smart format. Remember, we're speaking about still photos here, where high retina quality ones rarely take more than 500k each, so 2TB buys you room for 4,000,000 photos (and since you'll be caching the lower res 200K images, it actually buys you room for 10,000,000 million photos)

That's not the case for videos - netflix, hulu and friends have multiple copies of each 1GB optimized for different devices. On-the-fly conversion is not possible, and the stream are significantly difference. For them, a reasonable, universally supported progressive video format will indeed make a huge difference

Re: Retina.js: Retina graphics for your website

#65

Post by hej »

huggyface wrote: post #50
hej wrote: post #40

Earlier quoted context omitted.

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…

Oh come on. Apple’s iPhone and iPad barely hits the mark there. They are overshooting nothing.

It’s a petty good approximate term that to my mind works perfectly well. Sure, things change depending on view distance but I guess nerds have to survive a term that’s not always exact. The horror!

That was an uninformed rant on your part. What are you suggesting as an alternative? High-PPI certainly does not work.

Re: Retina.js: Retina graphics for your website

#66

Post by nextparadigms »

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…

Would this work better over WebP?

Re: Retina.js: Retina graphics for your website

#67

Post by caseyohara »

emehrkay wrote: post #45

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?

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.

Re: Retina.js: Retina graphics for your website

#68

Post by huggyface »

hej wrote: post #65
huggyface wrote: post #50

Earlier quoted context omitted.

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…

Oh come on. Apple’s iPhone and iPad barely hits the mark there. They are overshooting nothing. It’s a petty good approximate term that to my mind works perfectly well. Sure, things change depending on view distance but I guess nerds have to survive a term that’s not always exact. The horror! That was an uninformed rant on your part. What are you suggesting as an alternative? High-PPI certainly does not work.

Apple’s iPhone and iPad barely hits the mark there.

Do you actually believe that the magical "retina" mark just coincidentally happened to be 2x Apple's original resolutions? How convenient!

It’s a petty good approximate term

It's a marketing term that the stupid embrace. Is a 64Kbps mp3 "eardrum audio" in a standard room with a fan? Is 128Kbps eardrum audio on a crummy mp3 player?

That was an uninformed rant on your part

What was uninformed about it? Desperately curious to hear what.

Re: Retina.js: Retina graphics for your website

#69

Post by caseyohara »

dwnoiz wrote: post #34

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

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.

Post reply on HN