So What is Retina Anyway?
Web developers, graphic designers, and tech-heads in general are likely familiar with “retina displays”, a term coined by Apple for displays with pixels so fine and densely packed that a viewer with perfect vision can’t discern the individual pixels at a reasonable viewing distance. It’s an Apple trademark that has made its way into common parlance to refer to high definition displays in general. I remember seeing one for the first time and remarking to my sister that it looked like a page from a freshly printed magazine.
Fast forward to the present: this is typical of mobile devices and upscale monitors, which means that when you design a webpage, you want to design it with high resolution displays in mind. This is especially imperative if your target audience is a high-end clientele, but you really should consider it either way, as all screens and devices will catch up in time.
1x vs 2x Graphics
If you’re adding a graphic to a website into a space that you would like to display at 640 pixels wide at a standard resolution, you’d use an image that’s just that — 640 pixels wide. This is what’s considered “1x”. To accommodate high resolution/retina displays, you’ll want to use an image that’s 1280 pixels wide, which is what’s referred to as “2x”. While the graphic will still display on the website at 640 pixels wide, you are doubling the pixel density by using an image that’s double the size. 2x graphics are much sharper and richer than 1x graphics, which ensures users see a crisp graphic instead of one that’s on the blurry side.
| Image File Width… | Coded To Be… | Is This Resolution |
|---|---|---|
| 600 pixels | 600 pixels | 1x |
| 1200 pixels | 600 pixels | 2x |
| 1200 pixels | 1200 pixels | 1x |
| 2400 pixels | 1200 pixels | 2x |
Practical Demonstration
This is our beautiful logo. You can use the buttons down there to toggle between 1x, 2x, and 3x graphics.
As you can see – assuming that you’re not using an older machine yourself – the 2x graphic looks like professionally executed digital media. The 1x graphic, less so.
On the other hand, you probably can’t tell a difference between 2x and 3x, can you? That’s normal. The human eye isn’t capable of perceiving the difference. Much of the recent advances in pixel density are overkill. A hawk could tell the difference; a human, not so much. Retinal neuroscientist Bryan Jones wrote a great article cross referencing pixel density with the limits of human visual acuity, if you want to see how deep the rabbit hole goes.
So it’s unnecessary to code your website with graphics beyond 2x; the ultra high resolution pictures will take much longer to load and won’t have an appreciable impact on the visual quality of your website.
Many visitors to a website will be using these kinds of high resolution displays (especially mobile users), so you want to code your website with 2x graphics to exploit the beauty of retina displays.
When To Use 2x Graphics
There’s some debate about when to use 2x graphics; some web developers don’t touch it while others code every graphic on their site in 2x.
As a general guideline, you want to make graphics 2x if they’re meant to draw the user’s direct attention. Logos and icons are good examples of this principle. A background image that has a mask or text written over it, not so much. On the other hand, an image that has text as part of the actual image should probably be made 2x, as that will show. Don’t use 2x with animated gifs. An experienced web developer can follow their intuition on this one.
How To Code 2x Graphics
If you have a graphic on your page that you want to make 2x, you need to style the graphic so that it’s half the width of the image file it’s using. This is how it’s done:
Put this in the head of your page (or better yet, a styling sheet):
<style>
img {
width:100px;
}
</style>
And add the image like so:
<img src=”filepath/image.png” alt=”this is an image”/>
The width should be set to half the width of the image file. For example, if the image file is 1200 pixels wide, you should set the width of the graphic to 600px.
Further Reading
Always be mindful of the advances that are constantly occurring in web development and technology in general. Retina displays are a beautiful and increasingly common improvement that every web developer needs to take into account. How and when you implement 2x graphics are up to you, just don’t forget.
Consider these posts for further reading:
- Retina Web Graphics Explained: 1x versus 2x (Low‑Res versus Hi‑Res)
- Apple Retina Display by Bryan Jones (Yeah, I know I already mentioned this one, but it’s a really good article).
What kind of graphics do you make 2x? How do you code 2x graphics on your projects?
