The Retina War is upon us.

5 minutes twitter Tweet

We’re on the verge of a technological revolution that might take 10+ years to become fully realized. The Retinafication of iOS was almost immediate, thanks to high saturation of designers backing the platform, and the App Store only having existed for two years prior. The Retina Macbook, however, is fundamentally changing a visual world that is almost 30 years old – where visual designers are not kings.

Many websites and desktop apps will make the leap to hybrid Retina + 1x sooner than later, but how long until designers abandon 1x forever? The tech world abandoned Internet Explorer before Firefox even had 30% marketshare. It was easy for us to get behind ‘the cause’ of killing IE, but that was an easily replaced software product. Today we’re on the verge of a hardware revolution, initiated by a premium brand, that may or may not trickle down to PC OEMs. How long before designers start imposing a “1x Tax” on consumers with non-Retina computers because it’s too expensive and laborious to maintain two separate asset libraries? The problem gets worse – I can’t design for 1x on my Retina Macbook Pro. It’s impossible.

1x_design.png

Try as I might, I can’t ignore the ham-sized pixels. Photoshop could, in theory, update to support Retina graphics properly, but what does that mean for 1x? Whether Photoshop scales a 1x image or not, I’m still not getting a real-world representation of a pixel-perfect 1x image on a 2x screen. It just can’t happen. The screen is too good to be backwards-compatible.

scaling.png

The simple solution (which I’m using now) is an external display – but it won’t be long before Retina Cinema Displays replace their outdated siblings. Apple has made it clear that “Pro” users aren’t their bread and butter anymore so, as they push Retina technology forward, 1x will be forcibly left behind. Incompatible. Old. Even if designers don’t hold a personal vendetta against the “ancient 1x-ers,” Apple will be an unstoppable catalyst. Before long, designers will be in the same position as front-end engineers who ‘forget to test in IE’. 1x will become an annoyance – even with 60% of the market.

So, what’s the long term solution? Knowing that Retina will become the norm among designers and engineers within at most three years, and knowing that software and web creators need to follow the path of least resistance, how can we make everyone happy? In the true spirit of the hacker, there must be a software fix to make this easier and, therefore, feasible.

Dustin has talked in depth about pixel-fitting or ‘pixel hinting’ and it’s a practice I’ve followed religiously since. I firmly believe that, someday, software will be much better at doing this for us, and true resolution independence might finally be viable. The “nearest neighbor” method in Photoshop already detects the hard edges of a document and preserves them when scaling up or down. Bicubic Interpolation can scale pixels smoothly, and works great on photos and organic shapes. They’re only really effective with raster graphics, though. Vectors are, by design, much harder to snap intelligently to pixels automatically in a way the designer might intend. Icons and many other UI elements can also be nearly impossible to auto-scale. Photoshop CS6 is the only program that even offers easy pixel snapping, and Illustrator doesn’t even think in pixels except when explicitly chosen as a measurement tool. This isn’t the really important bit, though – vector scaling is an entirely different issue. Read Dustin’s post (above) if you’re interested – it’ll blow your mind.

With Retina, we have the benefit of a perfect 1:2 scale up. This makes bicubic or nearest-neighbor scaling down much more accurate and crisp – as long as the 2x image uses even numbers for the ‘pixel perfect’ and fixed size elements. A 2px border, for example, cleanly becomes 1px. A 3px border, however, scales to 1.5px… not good. This is where I think software can help. If designers can only design at 2x on Retina displays and respect even numbers for the inevitable 1x scale-down, some really intelligent compiler (server-side or within an SDK) can take care of 1x – in most cases. It wouldn’t be a ‘set it and forget it’ fix… you should test, always.

bicubic_sample.png

There’s no proven solution for this yet – the iPhone 3GS is still on sale, so 1x is not yet dead on iOS by any means. Designers are still creating screens for 1x and 2x (a process somewhat automated thanks to Bjango Photoshop Actions), and probably will for another few years. Ironically, 1x will probably die on iOS right around the same time most designers and developers will be completely rid of their last non-Retina Macbooks and Windows PCs.

We’re stepping into unknown territory. Historically, designers and engineers have driven the abandonment of old software, and Apple is the legacy hardware killer. The future is inevitable – designers will stop creating assets for 1x displays.

As a community, we need to create software that can automate the creation of high-fidelity 1x renderings based on 2x input. The sooner we simplify downscaling, the sooner designers and engineers alike can push the Retina Revolution forward.

The paragon of inefficiency. ⇢