What Does @3x (iPhone 6) Resolution Really Mean?
By: Jason Schwartz
This is just a shot in the dark. Until the new iPhone 6 is announced, there really is no way to know true specs, resolution, or graphic requirements, but I wanted to point out a few of the logistic pieces addressing the rumors. –
Over the last few months there has been a good amount of writing/guessing at the new iPhone 6 display resolution. Daring Fireball wrote a great article about how he came to the conclusion of definitive pixels.
I wanted to talk about 2 things. First let me use Daring Fireball’s explanation as to what @2x and @3x mean: “@2x means the same “double” retina resolution that we’ve seen on all iOS devices with retina displays to date, where each virtual point in the user interface is represented by two physical pixels on the display in each dimension, horizontal and vertical.
@3x means a new “triple” retina resolution, where each user interface point is represented by three display pixels. A single @2x point is a 2 × 2 square of 4 pixels; an @3x point is a 3 × 3 square of 9 pixels.” When the “retina” or @2x resolutions came to iOS devices and the Retina MacBook Pro, immediately the internet looked broken.
It was a sea of blurry images that brought back memories of early web. Designers were better than that, but all of the work they created to date was pretty much outdated, they just hadn’t caught up yet. Three years later, most companies still don’t know that their websites are blurry on retina Mac computers and certain devices.
Since that introduction, good web designers have been incredibly diligent about creating for retina to make sure that pixel perfect really means pixel perfect.
The addition of the @3x resolution means a few things.
- Servers will now be serving up much larger images. This adds to load times as well as data that sites will need to serve. Since hosting has data caps depending on where you have purchased, this might require more expensive hosting for media intense sites.
- Designers who create in Photoshop will need to make assets at 3x instead of 2x. This is a big deal for a good portion of designers who still don’t work in code. For anyone who has created a 2x page at 2800×100000+ pixels you know that it destroys your memory. Only the best computers will be able to handle huge mock-ups at these sizes.
- This change may warrant new expenses for designers.
- Depending on execution, adding the @3x will add time to both design and development. Not every designer uses .SVG for icons and scalable elements. Not every designer even understands the reality of @2x images yet. Adding a 3rd component into the mix makes for additional work whether it be in site problem solving, data architecture, hosting, or creation of elements.
I’m interested to see what happens once the next iPhone comes out.
Update:
The iPhone 6 has been announced with no change to the retina imagery, we’re still going strong at @2x.