Serving sharp images to high density screens
A long time ago we had monitors of varying resolutions, but once we started to go beyond 1024x768, screens started to get bigger as resolution got bigger.
Then full-colour web-capable mobile phones arrived, but the story was the same. They had small screens, but also small resolutions.
Then in 2010 the iPhone 4 came out (holy shit that's 11 years ago), and the screen was 640×960, whereas the similar-sized iPhone 3 was 320×480. The resolution doubled, while the screen size was roughly the same, so in effect the screen density doubled.
Apple couldn't just run the same apps but at a higher resolution, because things like text and buttons would be tiny, so they doubled the size of everything. 1 pixel became 2 'device pixels'.
On the web we call this the 'device pixel ratio', or DPR. The iPhone 4 had a DPR of 2. This is sometimes referred to as having a 2x screen, or 2dppx.
Matt Hobbs from gov.uk was kind enough to share April 2021 stats on users' device pixel ratio. I ran a few queries on it, and it turns out 80% of their users are on a screen with a DPR of 1.5 or above. That's:
