3 ms·

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 th

by rb2k_ 15y ago

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)

gerrit 15y ago
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.
- downx3 15y ago
  Would 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 ago
    Might be just as well to sniff the user agent.
    - goatforce5 15y ago
      Is there a difference in the user agent between iOS 5.1 on a 3GS and a 4S?
      - downx3 15y ago
        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-specific-stylesheet-and-images/ http://www.priteshgupta.com/2012/04/detecting-ipad-3-for-spe...
        ryannielsen 15y ago
        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.
      - mnutt 15y ago
        Not that I can tell, unfortunately.
orofino 15y ago
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.
- wildmXranat 15y ago
  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.
- rio517 15y ago
  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?
- ricardobeat 15y ago
  This library solves it by using a bit of specially-crafted html: https://github.com/adamdbradley/foresight.js https://github.com/adamdbradley/foresight.js
program 15y ago
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

by rb2k_ 15y ago

gerrit 15y ago

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.

downx3 15y ago
Would 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 ago
  Might be just as well to sniff the user agent.
  - goatforce5 15y ago
    Is there a difference in the user agent between iOS 5.1 on a 3GS and a 4S?
    - downx3 15y ago
      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-specific-stylesheet-and-images/ http://www.priteshgupta.com/2012/04/detecting-ipad-3-for-spe...
      - ryannielsen 15y ago
        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.
    - mnutt 15y ago
      Not that I can tell, unfortunately.

orofino 15y ago

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.

wildmXranat 15y ago
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.
rio517 15y ago
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?
ricardobeat 15y ago
This library solves it by using a bit of specially-crafted html: https://github.com/adamdbradley/foresight.js https://github.com/adamdbradley/foresight.js

program 15y ago

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