Hacker News Reader

Comment by reidmain | Hacker News Reader

This isn't just for those people running Retina MacBook Pros. iPhone 4 and up, iPad 3 and up and certain Android devices would benefit from Retina assets.

It's not a tiny fraction of the market.

View on HN

Are you honestly suggesting that it's worth doubling the size of all your assets over the wire, making pages load even slower on mobile, just to make them look high-DPI for people on retina devices?

Again, if it were easy to feature-detect reliably and only serve the bigger assets up to people on retina devices, I might agree with you.

I've got a high-DPI device and I prefer fast-loading pages every day. If I want things to look incredibly crisp I'll zoom out. Text still looks great!

> Are you honestly suggesting that it's worth doubling the size of all your assets over the wire

a) it's nowhere near 4x unless you are using uncompressed images. With something like PNG compression most of the difference is negligible and there've been some interesting experiments showing that with JPEG trading resolution for quality is roughly break-even: see e.g. http://alidark.com/responsive-retina-image-mobile/

b) Even on mobile, latency is WAY more of a factor than bandwidth. If pages load slowly, it's almost always the case that reducing the number of CSS / JS files will help significantly more than reducing image sizes.

c) One of the approaches for dealing with DPI variance is to replace images with vector / webfont / CSS alternatives which don't require scaling. If you do that, you're also going to significantly reduce the total asset size for the page which is going to help everyone get a faster time to paint.

Loading a page with normal assets and then replacing them with double-resolution ones with JavaScript doesn't seem ridiculously bad to me.

Pages still load as they normally would, and then become progressively clearer. Set a cookie, and all subsequent loads can be sent with only retina quality images.

A little fragile, but it works.

That seems like it could work pretty well as long as you can reliably detect that a browser's display is high-DPI. Can you do that? The last time I checked, it's not possible to reliably detect a high-DPI display or force the page to render at a certain DPI level - Chrome used to have a meta viewport attribute for it, but it was removed.

I'd love to see a JavaScript library that does this; I've never run across one.

You can just read 'window.devicePixelRatio' using JavaScript. Retina devices will be more than one.

That's cool, I didn't realize you could use that in production yet but it looks like (other than some weird caveats) you can: http://www.quirksmode.org/blog/archives/2012/07/more_about_d...

Quadrupling, surely?

Probably somewhere in-between on the assumption that compression can do a better job on bigger images.

I think the best solution would be to only use CSS. You can do pretty much everything with CSS so that would be the best way to ensure the perfect resolution for everyone... but there will always be exceptions

Can you use CSS media queries to detect the display's DPI? I haven't seen any examples of that.

You can at least detect the 'device pixel ratio', which seems to be > 1.0 for Retina devices, so that's something:

http://stackoverflow.com/questions/11722442/is-there-a-way-t...

Not sure how well adopted it is, but Bourbon CSS's mixin for serving Hi-DPI assets includes DPI-based media queries:

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 1.5/1),
    only screen and (min-resolution: 144dpi),
    only screen and (min-resolution: 1.5dppx) {
      width: 260px;
    }

Device pixel ratio in CSS is how I've seen every website implement retina support. Definitely possible, and not at all uncommon.

Almost all the higher-end mobile devices have high-DPI displays now. All the flagship Android and Win 8 phones, and even many of the mid-range ones. Heck, even the Blackberry 9900 has a high-DPI display.

I guess it depends on who your market is. Perhaps if you're github or something you might want to care.

If you're "Your Local Newspaper" where local is not in California or some other American tech mecca? I don't think you need to care yet...

Reply on news.ycombinator.com