9 ms·
Retina.js: Retina graphics for your website
- josteink 15y agoCan 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.
- alinajaf 15y agoDon'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?"
- rb2k_ 15y agoAs soon as we stop saying Jeep, Walkman, Zipper, Kleenex, Laundromat, Xerox and all the other proprietary eponyms
- huxley 15y ago... and Google. If people really hated Apple marketing, they probably should be ecstatic at the idea of one of their trademarks becoming genericized.
- jwoah12 15y agoWell 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?
- skrebbel 15y agoIn fact, they should sue all programmers who ever made a zip() function for trademark violations! (in fact, even more confusingly, most zip() functions don't interleave elements, like zippers do, but return a sequence of paired tuples - this, naturally, gives Zippers a bad name who wants their pants to pairwise join)
- huxley 15y agoDoesn'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.
- TazeTSchnitzel 15y agoUm, in Britain, we call them "zips". It's generic and not trademarked.
- rb2k_ 15y agoIt 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.
- melling 15y agoWho's else is making high-DPI displays? I have really seen companies running with this. It would be nice to see Samsung, for example, start promoting 300 dpi screens so they go mass market.
- maggit 15y agoSamsung builds the Galaxy Nexus, which has a 316 ppi display. Now, we still have a way to go before high ppi displays are ubiquitous, but there you have one example at least :)
- altrego99 15y agoThe Galaxy Nexus uses pentile subpixel rendering, which is a system with slightly controversial ways of determining the PPI.
- romland 15y agoHTC One X comes to mind (first and only one I looked up), 310-320 DPI (depending on the source; first few hits on Google)
- empoman 15y agoSony's Xperia S have 338 PPI which is even more dense than Apples "retina display". So there are other companies using high dpi displays. Galaxy Nexus is at 316 PPI if I remember it correctly. HTC has a phone, Vigor, that has 342 PPI. So apple is certainly not the only company out there who likes pixels :)
- kennu 15y agoI'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-resolution screens (more pixels) and retina displays (same pixels but "better looking"). To me this virtualization of pixels seems like a good idea, since the majority of web pages assume pixels have certain DPI range. Operating systems like OSX treat pixels as floats anyway, so if you need subpixel accuracy, it's still possible.
- ned 15y agoNo, 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".
- goblin89 15y agoThe 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 http://www.w3.org/TR/CSS21/syndata.html#length-units See also http://inamidst.com/stuff/notes/csspx http://inamidst.com/stuff/notes/csspx (been featured on HN some time ago)
- drcube 15y agoWhy are their visual angles measured in millimeters?
- mgunes 15y agoIt'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 https://en.wikipedia.org/wiki/Resolution_independence
- rimantas 15y agoThere 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 reason.
- ajross 15y agoNo, 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.
- twoodfin 15y ago> 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 PR and reporting thereupon, whereas Wi-Fi had made it into the vernacular at least a decade ago. The only other trademark for the 802.11 series of standards that got any traction at all was Apple's AirPort, and even their OS calls it Wi-Fi now.
- ajross 15y agoYes, 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 a wire. (edit: your remark about AirPort makes this clearer on reflection: you were a mac user at the time, and familiar with Apple products much more than PCs. Outside the mac world, as you might expect, literally no one had heard of an "AirPort". So you were insulated from Intel's nonsense, essentially.) It's the same thing here. We have "retina.js" being pushed around as a solution for what is clearly a manufacturer-independent problem. Yet on it's face it appears to be Apple-only software. You don't think that constitutes harm to the market?
- hej 15y agoDPI 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).
- huggyface 15y agoIt'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.
- hej 15y agoOh 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.
- huggyface 15y agoApple’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.
- zootsuiter 15y agoEven though the term "retina display" may be a gimmick, I think the creator of retina.js specifically designed it with Apple devices, and Apple's developer documentation, in mind (case in point: usage of the @2x modifier).
- Hervetar 15y agoPlease cut the drama and the whining and get over it.
- rb2k_ 15y agoWouldn'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)
- gerrit 15y agoThe user experience when viewing webpages is improved by actually showing a lower-resolution image while the crisp high-resolution image is being downloaded (however slowly), similar to progressive JPEGs. Depending on the data contract, the user experience when viewing their mobile phone bills might be affected negatively though.
- downx3 15y agoWould it be better to sniff the header? Accept: RETINA Something like that, at least then you could turn it off in the browser.
- downx3 15y agoMight be just as well to sniff the user agent.
- goatforce5 15y agoIs there a difference in the user agent between iOS 5.1 on a 3GS and a 4S?
- downx3 15y agoThought it might be better to sniff the device resolution, but apparently the ipad3 lies! http://www.priteshgupta.com/2012/04/detecting-ipad-3-for-specific-stylesheet-and-images/ http://www.priteshgupta.com/2012/04/detecting-ipad-3-for-spe...
- boonedocks 15y agoforesight.js looks more interesting since it takes the perceived connection speed into account when deciding to serve up 2x images. https://github.com/adamdbradley/foresight.js https://github.com/adamdbradley/foresight.js
- Synaesthesia 15y agoThat's pretty intelligent.
- kenrikm 15y agoI 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.
- orofino 15y agoThis appeared to be "as designed" in safari. The only solution I'm currently aware of is to save images as progressive jpgs. This gets around the limitation imposed by Apple.
- sosuke 15y agoThat was only non-progressive JPGs
- bruceclark 15y agoThis will only happen with JPG images, and if you use the progressive when saving, it works fine.
- archgrove 15y agoAs 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 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 extension" image that high DPI browsers grab to refine the quality. This avoids the waste of downloading a low DPI image, then throwing it away to replace it with high DPI. Even more interesting is http://en.wikipedia.org/wiki/JPEG_2000 http://en.wikipedia.org/wiki/JPEG_2000, which has "truncatable" bitstreams. You can stop getting data at any point, and depending on the encoding choices, you'll just lose fidelity in colour, resolution etc. Encoders can reorder the bitstream to deliver whatever is most useful for the image first. Browsers could then just stop when "enough" has been downloaded to satisfy the demands of the device; high DPI devices would just continue to grab more of the bitstream. It's really useful for devices on low bandwidth links, as you start getting visual results with very little data. JPEG 2000 hasn't been widely implemented outside of specialised devices, mostly because it's computationally heavy compared to JPEG, and the patent situation is unclear. Although this does mean that it could be implemented in a targeted way, designed to solve these problems (the spec for the entire format is huge). Moreover, one of the patent holders is, IIRC, Apple.
- ned 15y agoThe 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, a large part of the extra data would have been sent, no?
- archgrove 15y agoIt 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).
- julienc 15y agoWhat about jQuery Retina (http://retina.tylercraft.com/ http://retina.tylercraft.com/ and https://github.com/tylercraft/jQuery-Retina https://github.com/tylercraft/jQuery-Retina)?
- dwnoiz 15y agoWhile 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-jquery-snippet-for-doing-retina-resolution-images http://www.archer-group.com/2012/development/javascript-jque...
- caseyohara 15y agoThere 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.
- sams99 15y agoAm I missing something or is this approach downloading both high dpi and non high-dpi images for high-dpi displays?
- awolf 15y agoYes. Unfortunately. I'm not sure this is a good solution.
- smackfu 15y agoWow, 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.
- chris_wot 15y agoAgreed! Potentially, you could be causing greater data charges/slower loading just because you have an iPad 3... Anyone know if there's a setting to turn these image loads off on an iPad 3?
- Hervetar 15y agoNo, you just have to assume that PNGs are not used and that JPGs are used instead. But we have so-called experts trying to lead the way now...
- caseyohara 15y agoYes, despite being quite small (878kb) the @2x background takes a while to load. We wouldn't recommend having a 2800×1867 retina background on your site, but for the sake of the demo we wanted to do some showing off.
- emehrkay 15y agoI 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?
- caseyohara 15y agoIt 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.
- fernandezpablo 15y agoIt doesn't handle response codes properly. https://github.com/imulus/retinajs/pull/16 https://github.com/imulus/retinajs/pull/16
- jeetensheth 15y agoAfter 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..
- dubya 15y agoThe main place that pixels were noticeable was in an Apple store. Next to the iPhone 4, the older iPads looked much less sharp, at least for text (particularly Computer Modern). There have been lots of attempts at resolution independence, and I'm sure Windows and various Linux GUIs have hooks for such, but they've not been tested much because the hardware was generally in the 96-120 ppi range. There's no need for HDTVs to change.
- nhangen 15y agoI'm already used to doing this for iOS, and though the process is cumbersome, enjoy the simplicity of using @2x images when designing apps. That said, this is why CSS3 is so valuable, particularly when responsive websites have already complicated the process of building a website/app.