Retina web graphics explained: 1X VS 2X (LOW‑RES VERSUS HI‑RES)
Quick Explanation
If an image will be coded into a space of 300 pixels, you have to make:
- A 300 pixel wide image (for 1x displays).
- A 600 pixel wide image (for 2x displays).
The First Retina Display
The displays of the iPhone 3 and iPhone 4 were both physically the same size, but the iPhone 3 was 320 pixels wide and the iPhone 4 was 640 pixels wide. The iPhone 4 had twice as many pixels (widthwise), so we call it a 2x display. Apple calls them Retina displays because the human eye can’t see anything higher resolution than these displays. The old concept of more pixels equals a bigger screen no longer applied! Now the additional pixels were being used to show more detail, rather than more stuff (as you’d see on a bigger screen).
When I first heard about this, I wasn’t sure how it would work. If I had designed a webpage to be 320 pixels wide (which used to be the full width of an iPhone 3) would it now only be half the width of the iPhone 4 screen? That wouldn’t be good, because the content would be too small at half the size! Luckily that wasn’t the case, because the 320 pixels that are coded into HTML/CSS no longer have a one-to-one relationship with all displays:
- On 1x displays: 1 pixel width in HTML/CSS = 1 pixel wide on screen
- On 2x displays: 1 pixel width in HTML/CSS = 2 pixels wide on screen
So Not All Pixels Are the Same Size!
2x graphics are twice the pixel width of 1x graphics, but don’t think of them as bigger. They must occupy the same physical space, so the 2x pixels end up being smaller.
In the animation below, when the 2x image is twice the width of the 1x, both images have the same size pixels. This is not how we’re supposed to compare them! When the 2x image is scaled down so it’s the same physical size as the 1x, the pixels are smaller which creates a higher resolution image. This is the size the 2x image is supposed to be!
The Fluid Nature of Resolution on the Web
One last concept to keep in mind, is that resolution on the web is not always fixed. For example, an image’s resolution will change as it is scaled down to fit smaller devices. The resolution you see in Photoshop (such as 72ppi) is ignored by web browsers because the size of the image in the webpage determines its resolution. The size is determined by HTML/CSS code, so:
- A 1200px wide image, coded 1200px wide is 1x (low-res).
- A 2400px wide image, coded 1200px wide is 2x (hi-res).
- A 1200px wide image coded to be 100% of a browser window will be low or hi-res depending on the size of the window. It’s a fluid resolution!
Should You Make Both 1x and 2x Graphics?
Most (if not all) of today’s mobile phones and tablets have 2x or higher resolution screens, so you may not need to create 1x graphics for mobile.
Some laptops and desktops have 2x screens, but most are still 1x. Therefore it’s best to create 2x for desktops.
Should You Make 3x Graphics?
There are even higher resolution 3x displays, but they don’t look better than 2x because of the limitations of your eye. Some people with lower vision can’t even tell the difference between 1x and 2x! For web graphics, 2x is the highest resolution you need. Anything greater than 2x will increase the filesize (and download time) without a noticeable improvement in visual quality.
Conclusion
I hope this clarified (pun intended) how resolution works for web graphics, so you can be confident in making your graphics the correct size and resolution.