The Retina Problem: Crisp Images, Bloated Pages, No Good Answers Yet

The new iPad went on sale March 16, and its screen is the story. 2048 by 1536 pixels in the same 9.7 inches, four times the pixels of its predecessor, marketed as Retina because individual pixels vanish at reading distance. It is, without qualification, the best screen most consumers have ever held.

It is also, for everyone who runs a website, a quiet crisis of arithmetic. Every standard-resolution image on the web now renders slightly soft on it. And the devices exposing the softness belong, out of all proportion, to the audiences institutional sites court. The donors, executives, and design-minded professionals who buy premium tablets in month one.

Sharp graphics require files at double resolution in each dimension, which means up to quadruple the bytes. Our performance conscience has spent two years warning that image weight was already the responsive era’s open wound. Both problems are real. They point in opposite directions. This post is the honest accounting of the 2012 toolkit, which we wish were better, and the standards work that might eventually make it so.

Why this is genuinely hard

The trap is structural. HTML’s image element takes one source file. The page cannot ask the screen its density before choosing what to send.

Ship standard-resolution images and Retina owners see softness everywhere, most visibly in logos, interface graphics, and text baked into images. Ship double-resolution images to everyone and you have doubled or quadrupled the heaviest part of your pages. Most visitors’ screens cannot use the extra pixels. And the networks were already the constraint, cellular especially.

There is no correct single answer, which is precisely the situation web standards exist to fix and have not yet. The community knows it. A Responsive Images Community Group formed at the W3C last month to argue the solutions properly. Proposals are circulating for markup that could offer multiple sources and let browsers choose. We are following that work the way we followed the font-linking debates, with the same advice. The real fix is coming on a standards timeline, and the interim belongs to judgment.

The interim toolkit, ranked by our current practice

• Stop rasterizing the geometric. The highest-leverage move costs nothing new. Logos, icons, and interface elements should be built as CSS or SVG wherever possible. Web fonts also count. Text-based graphics too. Vector renders crisp at every density forever. It often weighs less than the images it replaces. Every build we ship this year moves further this direction. The Retina screen simply raises the return on discipline we already practiced. The icon-font pattern gaining currency this year belongs in this bucket: interface glyphs as type, density-proof by nature.

• Compression judo on double-size JPEGs. A counterintuitive finding the community has verified and we have reproduced. A JPEG at double dimensions but aggressive compression often looks excellent scaled down on both standard and Retina screens, at file sizes far below the naive quadrupling. It works because scaling hides compression artifacts. It is a trick, not a standard, and it wants per-image judgment. But for hero images and photography it is the best weight-to-sharpness trade currently available.

• JavaScript swapping, sparingly. Techniques that detect density and substitute high-resolution sources work, at the cost of complexity, double downloads if done carelessly, and one more script on the page. We reserve them for the assets where sharpness is brand-critical (the logo treatment, the flagship imagery) rather than deploying sitewide machinery.

• Restraint, the tool nobody sells. The question ‘does this page need this image at all?’ has never had a better year. Decorative imagery that earns neither attention nor conversion is now paying rent on two axes. Our content-first discipline keeps doubling as performance strategy.

What we tell clients this quarter

Triage, not panic. New builds: vectorize the interface layer. Adopt the compression approach for photos. Structure image handling so template-level swapping is possible later. The standards fix, whenever it lands, will reward sites whose images flow through renditions rather than hand-placed files. CMS image-style systems, which our Drupal and WordPress coverage has praised, are exactly this preparation.

Existing sites: audit the brand-critical graphics first, because a soft logo on a crisp screen is the visible embarrassment, and it is usually an afternoon’s SVG work to retire.

Everyone: hold the line on page-weight budgets. The wrong response to Retina is doubling every image and letting the cellular visitor pay. The analytics will not flag the cost as a line item, but the bounce rates will collect it. Measure both experiences, per the house rule. Your dashboard should know what a page weighs and how it looks on the best screen in the building.

The CMS angle: renditions are the preparation

One structural point deserves its own section, because it determines who adopts the eventual fix cheaply. The sites positioned to survive the density transition gracefully are the ones where images flow through a rendition system. The CMS holds one master upload and generates the display sizes by configuration. Thumbnail, card, hero. That is the pattern Drupal’s image styles and WordPress’s size machinery both support.

When the standards answer lands, multiple sources, browser choice, rendition-based sites will adopt it by adding output sizes and updating templates. Configuration, an afternoon per site. Hand-placed-image sites face a per-image archaeology project that no markup standard can rescue. Editors uploaded whatever dimensions they had into wherever it fit.

The audit question for your own site, worth asking this month: when an editor adds a photo, does the system size it, or do they? If the answer is ‘they,’ the fix is workflow and template work worth doing for a half-dozen existing reasons. Consistency, weight, editorial speed. Density-readiness is just the newest. The Retina screen did not create this homework. It set a due date for it, which is what new screens are for.

A familiar pattern

The shape of this moment is familiar. A device raises the ceiling. The gap between best and typical widens. The workarounds arrive before the standards. And the sites that invested in structure (vectors, renditions, budgets) absorb the transition while the hand-built sites face a retrofit.

It is the responsive story, the web-fonts story, and now the image-density story. The moral has not changed since we started writing it down in 2006. Build so that better answers can be adopted by configuration, and the parade of better screens becomes a parade of small upgrades instead of small crises.

The standards group is arguing the real fix as we publish. We will report when there is something to deploy, and we would bet a modest sum there will be within two years. Until then: vectors, judo, judgment.