The Cartographer's First Unprojected Globe: On the Distorted Scale of an Unresponsive Image

In 1569, Gerardus Mercator presented the world with a map that would change navigation forever. His famous projection solved a critical problem for sailors: it represented lines of constant bearing as straight segments, making it possible to plot a straight-line course on a flat chart. But this solution came at a cost. The Mercator projection wildly distorts scale, inflating landmasses near the poles to monstrous proportions. Greenland appears larger than Africa, though in reality Africa’s area is fourteen times greater. The map was a brilliant, pragmatic tool for a specific purpose, but a terrible representation of the world’s true proportions.

We commit a similar cartographic sin every day on the web with unresponsive images. We take a single, high-resolution image—our own unprojected globe—and serve it to every device, from a sprawling desktop monitor to a narrow mobile phone viewport. The result is a distortion of user experience. On the small screen, our ‘Greenland’—a massive hero image—is scaled down, often squandering bandwidth on pixels that will never be seen. On the large screen, our ‘Africa’—a critical thumbnail—is stretched into a pixelated blur, its meaning and detail lost.

This isn't merely an aesthetic failure; it's a fundamental breach of the cartographer's duty to represent scale accurately for the medium. Mercator knew his map was a specialized instrument, not a definitive portrait of the planet. Yet, we often treat our images as definitive, forcing them into every context without regard for the viewer’s ‘vessel’ or ‘viewport’. We impose a single, rigid projection on a fluid, multi-dimensional landscape of devices and connections.

A Responsive Projection for a Fluid Medium

The modern solution is not one map, but many. It is the `srcset` attribute and the `` element—our equivalent of a responsive map projection. These tools allow us to be true cartographers of the digital realm, drawing different charts for different journeys. We provide a small, fast-loading image for the user on a slow connection, a crisp high-DPI version for the new tablet, and a wide-aspect crop for the desktop. Each image is a projection tailored to its context, preserving the integrity of the original subject without distorting the user’s experience.

To serve a single image to all is to use a globe for nautical navigation. It is, in its own way, a beautiful and accurate object, but utterly impractical for the task at hand. It forces the user to constantly pinch, zoom, and scroll—to mentally recalibrate the distorted scale we’ve given them. By embracing responsive images, we honor the true craft of our medium: not just to present information, but to project it with care, precision, and respect for the landscape our audience actually inhabits.

Notes & further reading

A few pages I came back to while writing this: