6 ms·

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

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.

kevingadd 14y ago
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!
- nwh 14y ago
  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.
  - kevingadd 14y ago
    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.
    - nwh 14y ago
      You can just read 'window.devicePixelRatio' using JavaScript. Retina devices will be more than one.
      - kevingadd 14y ago
        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_devi.html http://www.quirksmode.org/blog/archives/2012/07/more_about_d...
- Le_SDT 14y ago
  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
  - kevingadd 14y ago
    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-to-use-dpi-in-css-media-queries-instead-of-px http://stackoverflow.com/questions/11722442/is-there-a-way-t...
    - cstejerean 14y ago
      Device pixel ratio in CSS is how I've seen every website implement retina support. Definitely possible, and not at all uncommon.
    - lancer383 14y ago
      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; }
- igravious 14y ago
  Quadrupling, surely?
  - furyofantares 14y ago
    Probably somewhere in-between on the assumption that compression can do a better job on bigger images.
- acdha 14y ago
  > 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/ 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.
rayiner 14y ago
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.
SCdF 14y ago
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...

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.

kevingadd 14y ago

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!

nwh 14y ago
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.
- kevingadd 14y ago
  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.
  - nwh 14y ago
    You can just read 'window.devicePixelRatio' using JavaScript. Retina devices will be more than one.
    - kevingadd 14y ago
      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_devi.html http://www.quirksmode.org/blog/archives/2012/07/more_about_d...
Le_SDT 14y ago
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
- kevingadd 14y ago
  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-to-use-dpi-in-css-media-queries-instead-of-px http://stackoverflow.com/questions/11722442/is-there-a-way-t...
  - cstejerean 14y ago
    Device pixel ratio in CSS is how I've seen every website implement retina support. Definitely possible, and not at all uncommon.
  - lancer383 14y ago
    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; }
igravious 14y ago
Quadrupling, surely?
- furyofantares 14y ago
  Probably somewhere in-between on the assumption that compression can do a better job on bigger images.
acdha 14y ago
> 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/ 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.

rayiner 14y ago

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.

SCdF 14y ago

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