Why should I provide 2x scale images?
The short answer
Always use images at 2x scale relative to their final use as high definition screens have become prevalent (e.g. Apple Retina displays) — the first generation of common HD screens were released 11 years ago with the iPhone 4. HD screens have at least twice the dot density and that means, when provided too small an image, the system makes guesses.
The long answer gets complicated
A 300x250 display ad needs to use an image that is 2x scale, 600x500 (twice the required size), so it doesn’t appear blurry on HD screens. Between HD and standard screens, they appear nearly the same physical size but use different amounts of physical dots to render. My recommendation is to provide a 144 PPI (2x scale) image as a baseline. On the other hand, some users will see that image as too small when on a 475 PPI device; will they notice the difference between 475 and 144 PPI images on casual viewing?
This brings the logical question: why not larger scaled images at 3x or 4x?
Why maybe not 4x images
It’s quite simple, there really isn’t a difference between 2x and 4x when viewed on a HD screens. The human eye isn’t as discerning at a glance, though there’s some noticeable variances:
So the question instead becomes “is using a 4x image, with twice the file size, worth it?” The answer is no — load speed matters far more than nuances. Laying the two graphics directly over each other, the only noticeable difference is a change in the text x-height due to the hard edge falling on a odd number pixel:
Why definitely not 3x images
This is where it gets tricky: my iPhone 11 (326 PPI) shows the HTML graphic, defined as 300 pixels wide through code, about 1.8" — roughly 164PPI, half the size as defined by Apple. That means (in theory) 216 PPI worth of information is being squeezed into 164 dots, nearly 33% of the pixels are interpolated and blurred as a result. Nearly 1 out of every 3 hard edges will be softened.
In fact, the white-on-black text looks grey because it’s blurred so much—this is why I don’t recommend 3x scaled images:
Why just 2x
Between the four scales, 1x, 2x, 3x, and 4x, there is hardly a noticeable difference on an iPhone 11 (326 PPI) display — the only noticeable issues are 3x doesn’t look great and 1x looks terrible:
This is compounded by the numbers. The iPhone 11's display is 326 PPI and each scaled graphic’s PPI to display ratio is as follows:
- 326 PPI / 72 PPI (1x): 1 pixel stretched over 4.53 dots
- 326 PPI / 144 PPI (1x): 1 pixel stretched over 2.26 dots
- 326 PPI / 216 PPI (1x): 1 pixel stretched over 1.50 dots
- 326 PPI / 288 PPI (1x): 1 pixel stretched over 1.13 dots
Images scaled at 2x and 4x only have to interpolate a small portion of a pixel, 0.26 and 0.13 — the blur is there but it’s relatively small compared to the overall image. Reversely, images scaled at 1x and 3x have to make up 0.53 and 0.50 pixels—these errors are much more visible.
HD screen’s pixel densities varying wildly and this doesn’t hold throughout. My recommendation to provide a 2x image is focused solely on balancing file size, setting a minimum standard to follow, and not chasing odd PPI sizes. Save your sanity for better problems!
2x seen at 1x
The inverse problem needs to be highlighted: when a 2x scaled image is viewed on a standard screen, it is blurred. Ultimately, though, you’re better targeting the majority of high-definition screens than appeasing more uncommon users on older technology.
Final notes
This 2x logic only applies to fixed sized images (such as display ads and social graphics) and only partially to responsive images. When working in responsive web design, use a picture srcset so the image source changes depending on the user’s screen size.
