Hacker News Reader

Comment by rb2k_ | Hacker News Reader

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)

View on HN

This is the same approach used by Apple. If you go on apple.com and you run:

  AC.Retina._devicePixelRatio = 2
  new AC.Retina

you will see several requests such as:

  HEAD http://www.apple.com/home/images/ipad_title_2x.png

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

Would it be better to sniff the header?

Accept: RETINA

Something like that, at least then you could turn it off in the browser.

Might be just as well to sniff the user agent.

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.

Not that I can tell, unfortunately.

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.

Agree, I think the correct solution is to actually have a request filter on the server that correctly maps the img tag source to a high DPI version. Obviously, this would be a framework or server specific implementation, but this is the only correct way.

I could see how that's problematic for in page img tags, but for background images, couldn't one just use media queries to grab the higher resolution image?

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

Reply on news.ycombinator.com