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

91–100 of 102 posts

Re: Retina.js: Retina graphics for your website

#91

Post by ricardobeat »

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.

This library solves it by using a bit of specially-crafted html: https://github.com/adamdbradley/foresight.js

Re: Retina.js: Retina graphics for your website

#92

Post by dmnd »

twoodfin wrote: post #53
ajross wrote: post #47

Earlier quoted context omitted.

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…

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

Really. I worked as a laptop salesman when Intel introduced the term "Centrino". I had to explain to many customers that yes, this other laptop that happened not to use an Intel chipset also worked wirelessly.

To get a Centrino sticker, a laptop had to use an Intel chipset, Intel wireless adapter and Intel CPU. Because the marketing for Centrino focussed almost exclusively on Wifi capability, there were many laptops with non-Intel chipsets or AMD CPUs that were perceived by customers as not being capable of wireless networking.

This article[1] explains how Wi-Fi wasn't very popular until the Centrino campaign.

[1]: http://www.siliconvalleywatcher.com/mt/archives/2011/04/inte...

Re: Retina.js: Retina graphics for your website

#93

Post by saurik »

WiseWeasel wrote: post #75
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.

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

If you are going to do that you may as well have a meta tag to set a suffix "to find the jpeg2000 version of the image", and browsers that understand that format can then get the better format.

Re: Retina.js: Retina graphics for your website

#94

Post by WiseWeasel »

saurik wrote: post #93
WiseWeasel wrote: post #75

Earlier quoted context omitted.

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

If you are going to do that you may as well have a meta tag to set a suffix "to find the jpeg2000 version of the image", and browsers that understand that format can then get the better format.

Not a bad idea. The meta tag should be made our bitch, so we don't have to work so much, and our sites can degrade gracefully.

Re: Retina.js: Retina graphics for your website

#95

Post by WiseWeasel »

ryannielsen wrote: post #78
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.…

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…

Wow, not only does that notation seem like a huge pain in the ass, but it's only for CSS; doesn't fix the html.

https://plus.google.com/115203843155141445032/posts/BrrLGL5k...

  -webkit-image-set( url(image.png) 1x, url(image@2x.png) 2x )
That's their notation. Imagine having to do that for every image ever, when they're all just filename + 2x resolution key + filename extension. Totally asinine. Developers should just be able to pick a single page-wide filename key for all their 2x assets, and the browser will know to look there.

Re: Retina.js: Retina graphics for your website

#96

Post by ryannielsen »

WiseWeasel wrote: post #95
ryannielsen wrote: post #78

Earlier quoted context omitted.

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…

Wow, not only does that notation seem like a huge pain in the ass, but it's only for CSS; doesn't fix the html. https://plus.google.com/115203843155141445032/posts/BrrLGL5k... -webkit-image-set( url(image.png) 1x, url(image@2x.png) 2x ) That's their notation. Imagine having to do that for every image ever, when they're all just filename + 2x resolution key + filename extension. Totally asinine. Developers should just…

Yep, a solution is still needed for content images.

That's their notation. Imagine having to do that for every image ever, when they're all just filename + 2x resolution key + filename extension. Totally asinine. Developers should just be able to pick a single page-wide filename key for all their 2x assets, and the browser will know to look there.

You assume the developers can guarantee all image assets will be 2x. For quite some time, I doubt that'll be the case. And, given that, if the browser just naively requested 2x assets, there would be some set of wasted http requests that just add overhead and significantly delay page load.

Explicitly declaring the 1x and 2x images' existence is a far better solution, even if it is more verbose. The UA can't be guessing about the existence of resources if it's also to be efficient.

Re: Retina.js: Retina graphics for your website

#97

Post by josteink »

hej wrote: post #82
huggyface wrote: post #68

Earlier quoted context omitted.

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…

Allow me to roll my eyes at so much hypocrisy.

Granted, the MP3-comparison made no sense, but you are rolling your eyes to obvious observations.

Re: Retina.js: Retina graphics for your website

#98

Post by twoodfin »

dmnd wrote: post #92
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…

Really. I worked as a laptop salesman when Intel introduced the term "Centrino". I had to explain to many customers that yes, this other laptop that happened not to use an Intel chipset also worked wirelessly. To get a Centrino sticker, a laptop had to use an Intel chipset, Intel wireless adapter and Intel CPU. Because the marketing for Centrino focussed almost exclusively on Wifi capability, there were many laptops…

That's essentially an Intel press release (follow the author link).

Anyway, I'm perfectly content to believe that Centrino and Intel's multimillion dollar marketing campaign for it really helped the growth of Wi-Fi. The parent post claimed the opposite: That the branding "hurt the market" for Wi-Fi, which seems absurd.

Re: Retina.js: Retina graphics for your website

#99

Post by WiseWeasel »

ryannielsen wrote: post #96
WiseWeasel wrote: post #95

Earlier quoted context omitted.

Wow, not only does that notation seem like a huge pain in the ass, but it's only for CSS; doesn't fix the html. https://plus.google.com/115203843155141445032/posts/BrrLGL5k... -webkit-image-set( url(image.png) 1x, url(image@2x.png) 2x ) That's their notation. Imagine having to do that for every image ever, when they're all just filename + 2x resolution key + filename extension. Totally asinine. Developers should just…

Yep, a solution is still needed for content images. That's their notation. Imagine having to do that for every image ever, when they're all just filename + 2x resolution key + filename extension. Totally asinine. Developers should just be able to pick a single page-wide filename key for all their 2x assets, and the browser will know to look there. You assume the developers can guarantee all image assets will be 2x. F…

No, the better solution would be to add support for:
This would alert the browser of the likely presence of 'filename_x2.ext' when it sees img tags, and it would fall back with a second request for 'filename.ext' in case it's not found. This seems relatively easy to implement (especially for web developers), and degrades gracefully on older browsers.

Then, a more fleshed out version accounting for the scenario you describe would be the following:
Then for any img tags for which double-res assets are available, you could add a property to the img tag as such:

Or, you could leave the 'assume-present' property off, as 'true' is default, and put '' on any images for which double-res assets are unavailable. This would avoid a second request when the first fails.

Such a solution would be significantly more convenient for developers, as you could choose whether to assume the presence of 2x and flag ones that don't have it, or assume its absence and flag those that do, saving tons of time.

Re: Retina.js: Retina graphics for your website

#100

Post by rb2k_ »

jwoah12 wrote: post #17
rb2k_ wrote: post #4

Earlier quoted context omitted.

As soon as we stop saying Jeep, Walkman, Zipper, Kleenex, Laundromat, Xerox and all the other proprietary eponyms

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?

It might just be my German origin, but I wouldn't call an SUV a Jeep either. We do however call all of the off road-capable bulky cars with the roll-over protection thingy ("Überrollbügel" in German, can't think of the English equivalent) Jeep.
Post reply on HN