Well, I’m a print designer and tend to think in terms of dpi. I don’t know what dpi “3x pixel density” would be. Help.
Since the size of pixels on screen is dependent on the screen resolution and size, there’s no way to consistently translate from pixels to inches, and by extent to dpi.
If you want to think in dpi terms for simplicity for a minute, you can pick a specific screen size and think it through with that. The dpi values would still be irrelevant in print context because it makes sense to pack pixels denser based on how far the screen typically is from your eyes. So for example the original iPhone’s screen was 163 dpi, more than a computer screen’s 72 to 96 dpi (or whatever) but very discernible pixels.
The 3.5” and 4” screens starting with the iPhone 4 doubled the horizontal and vertical pixel density, hence 2x, to 326 dpi. The reason it is referred to as 2x is the HTML coordinates and typesetting references are the same as those of the original 163dpi phone, but each point is a 4x4 pixel grid. Web content still addresses 320x480 points (or 320x568 for the 4” screen), and the pixels are on half-point coordinates. Or in the case of images, they’re shrunk to half size so each of the image pixels lands on a physical screen pixel.
The iPhone 6/6s 4.7” screen have a natural point size of 375x667, but the screen has double density so 750x1334 pixels (326 dpi like the original iPhone). The 6+/6s+ on the other hand have a 5.5” screen and 414x736 points, but Apple opted to use a grid of 3x3 pixels for each screen point so 1242x2208 pixels, so 3x retina, except they then downsample that to the actual screen resolution which is 1080x1920 pixels, so ultimately 401 dpi which isn’t quite 163x3. And interestingly there’s no way you’re going to get a perfectly sharp image (but your eyes won’t be able to see it).
This is an interesting guide to points, pixels and screen sizes in iPhones. There’s more with iPads and of course a hugely more varied scenario on Android.
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
On laptops and desktops 2x is generally in the 220 dpi range, which is considered retina (indistinguishable pixels) because they stand further away from your eyes than a phone or tablet.
The gist of all this is, it’s only practical to think of what the devices are capable of, and what a browser running on one of them will request, rather than thinking in terms of inches.
Is this new way (to me) of handling images due to responsive layouts be one reason so many sites load so slowly these days? Are the majority of people using photos that are overly hi-res?
“Slow” can mean a lot of things, often:
- the page references an asset on a slow server (or is itself on a slow server), often a render-blocking asset like a stylesheet or a webfont, so your perception is its slower than it actually is (but it makes no difference actually)
- the page is fed by a database of sorts, often a puny mysql which is overloaded (classic for non professionally run wordpress/joomla/drupal sites)
- the page is actually downloading a shitload of stuff, which can either be lazy/dump optimization or huge ad/tracking packages (typical for sketchy news sites)
If properly built, the responsive image setup is actually no different for a desktop device and a lot faster for mobile devices. Amateurishly coded websites/webapps sometimes do have oversized images, though frankly it is one of the easiest problems to fix, it’s more about carelessness.
Duncan
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
