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

71–80 of 102 posts

Re: Retina.js: Retina graphics for your website

#71

Post by oops »

caseyohara wrote: post #61
dwnoiz wrote: post #41

Earlier quoted context omitted.

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.

The Stripe gallery posted here the other day[1] used src-less img tags for lazy loading. It looks like they handle the script issue by having the normal img tag (with src attribute) nearby in a noscript block.

Doesn't really do much to help with the overhead of modifying existing markup. Perhaps if you're already using something like image_tag in Rails, a retina_image_tag helper might not be too much of a stretch.

1: https://stripe.com/gallery

Re: Retina.js: Retina graphics for your website

#72

Post by baddox »

ajross wrote: post #47
rimantas wrote: post #22

Earlier quoted context omitted.

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…

I fail to see your point. All companies give trademarked names to their products, and to specific features of their products (especially the features that are used heavily in marketing).

Re: Retina.js: Retina graphics for your website

#73

Post by scott_s »

beagle3 wrote: post #64
archgrove wrote: post #59

Earlier quoted context omitted.

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

I don't think archgrove's point was about storage, but about the extra friction of tracking N files instead of 1.

Re: Retina.js: Retina graphics for your website

#75

Post by WiseWeasel »

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.

Problem with new formats is legacy support. Something that could degrade gracefully on browsers that don't add support would be very welcome. Maybe the best solution is to keep the current 'img' tag notation, but somehow indicate to browsers that double-rez assets are likely to be available at something like 'filename_x2.ext', and they should request those when they come across an img tag, instead of 'filename.ext', falling back with a second request for the latter in case the '_x2' isn't found. Something like:
Encoding the image twice with a standardized addition to the filename is just an extra bit to add to the export macro. The image storage is irrelevant for most cases (assuming you compress appropriately); it's the bandwidth and request volume that's precious.

Re: Retina.js: Retina graphics for your website

#76

Post by jyap »

huxley wrote: post #25
jwoah12 wrote: post #17

Earlier quoted context omitted.

Well to be fair, it's been several years since I've heard anyone call an SUV a Jeep (other than a Jeep), a tissue a Kleenex, or a copy machine a Xerox. But Zipper was a brand name?? What the hell is the generic product name for a zipper?

Doesn't seem to have a consistent one, clasp fastener or separable fastener are earlier generic terms. BTW Zipper wasn't trademarked by the creator or manufacturer but by BF Goodrich when used on their zipped-up boots. Two which surprised me were Ping Pong and Adrenaline.

Adrenaline is a hormone and neurotransmitter. Adrenalin is a trademarked adrenaline product of Parke-Davis. (Wikipedia)

The name "ping-pong" was in wide use before British manufacturer J. Jaques & Son Ltd trademarked it in 1901. (Wikipedia)

Re: Retina.js: Retina graphics for your website

#77

Post by jyap »

ajross wrote: post #47
rimantas wrote: post #22

Earlier quoted context omitted.

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…

It's not a "gimmick", it's called marketing plain and simple.

It's why we have brands and markets. So we can associate them with _something_ and move on from terms such as 486DX 33Mhz.

People want to buy an "iPads", not the Apple K48 tablet (the internal name for the first iPad.

... And when I bought a laptop in 2005, yes, I did buy a "Centrino" one because I knew the Intel Wifi chipset combination was compatible with Linux.

... And Intel put out some other requirements and called them "Ultrabooks".

Re: Retina.js: Retina graphics for your website

#78

Post by ryannielsen »

WiseWeasel wrote: post #55
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…

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

In fact, something very similar to what you describe is what's being implemented right now: https://bugs.webkit.org/show_bug.cgi?id=80322

I'd like to propose a new function for the Images module. This function will allow developers to provide, in a compact manner, multiple variants of the same image at differing resolutions. Using @media pushes the two asset references apart from one another, whereas such a function keeps related asset references together. It also helps keep selectors DRY. We've called it image-set(), and it takes one or more image specifiers.

Re: Retina.js: Retina graphics for your website

#79

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

Re: Retina.js: Retina graphics for your website

#80

Post by ryannielsen »

downx3 wrote: post #32
goatforce5 wrote: post #24

Earlier quoted context omitted.

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

The iPhone 4 and 4S also "lie". It's not really a lie, though. The displays are intended to have higher pixel density, not more screen real estate. By reporting the "incorrect" size, websites are actually sized consistently across all generations of iPhones and iPads, but the retina devices render the same content with higher resolution.

PS: you may wish to add a "(-webkit-min-device-pixel-ratio: 2)" clause to your media queries if you want to target retina devices.

Post reply on HN