Responsive images: simple solutions

Image: 'Curvature of Space-Time' by RailGun74

Like most web designers convinced of the principles of and seeking to practice responsive web design I've been puzzled for some time as to how to handle the problem of bitmap (raster) images.

Responsive design is a flexible world of fluid line lengths, shifting columns and grid systems, and scalable layouts. Fixed width images are awkward guests: absolutely sized elements awkwardly shunted into a system designed for relative units. A relic of Newtonian physics injected into an Einsteinian space-time continuum, if I may be unpretentious.

Clever developers have tried to solve the problem by devising ingenious workarounds to serve multiple versions of the same image to different devices. So, the idea is, users with modest Android phones get a lo-fi version cropped to 300 pixels or so, while those with MacBook Pro Retina displays get it in glorious high resolution technicolour, their version potentially thousands of pixels wide.

The problems with responsive image techniques like this have been well documented. JavaScript based solutions don't work because browsers pre-fetch images before the structure of a page is loaded, forcing users with larger displays to take the hit of downloading all versions of the image, the small versions as well as the big one designed specifically for them. And there's the problem of how to cater for Retina devices being used in low bandwidth environments: should these users wait an age for the hi-res version, or should they just get a low-res version that will look blurry on their screens?

The truth is there isn't a solution. So I read with great interest last week a couple of articles on the ever excellent A List Apart that both - from somewhat different angles - discussed the issue of responsive images, acknowledged the insoluble nature of the problem, and proposed ways forward that seemed to me convincing precisely because of their great simplicity.

Acknowledge the opportunities and limitations of the medium

Paul Robert Lloyd's article, The Web Aesthetic, is the more radical of the too, arguing that the responsive images conundrum is only a problem because web designers choose to make it one.

Paul's article inspired by John Allsopp's classic A Dao of Web Design, published as long ago as 2000, which sought to define the essential characteristics of the web as a communications medium. John argued, with great foresight, that websites are fundamentally different from printed publications. They shouldn't be designed as static layouts with fixed pixel dimensions. Websites should be flexible, comprised of fluid design elements that adapt according to the device on which the site is being viewed.

Paul notes that designers are only now, with the coming of the mobile web and the development of responsive web design techniques, putting those principles into practice. While acknowledging the progress designers have made he asks us to hold up our current practices to the searching light of Allsopp's article and thus find out any lingering assumptions imported from other fields of design that go against the grain of the web, that give rise to problems borne of a misunderstanding of our medium. He asks us to consider the 'stuff' of which the web is made, its fundamental building blocks:

'To properly design for a medium, you need to understand it. I like to think of the web as a kind of material, with unique characteristics we can take advantage of, and limits it can reach before it breaks. The web could almost be considered a composite, made up of HTTP (the how), URLs (the where), and HTML (the what). Omit any one of these ingredients and you’re no longer building the web.'

HTML, 'the what', can host all kinds of content: text, links, audio, video, vector graphics (through SVG) and raster, bitmap graphics (through JPG, PNG and GIF). Page elements can be styled using CSS, and interactivity added by means of JavaScript. In ideal conditions, in which users can be relied upon to be employing the latest browsers within fast broadband networks, websites can offer incredibly rich, immersive multimedia experiences.

But conditions are rarely ideal. We usually don't know what browsers and devices users have, or their connection speeds. We need to design within constraints, to employ the principle of progressive enhancement to ensure a baseline experience for users employing older technology. We can add layers of enhanced functionality for users with good browsers and the latest smartphones, but even in those happy circumstances we need to exercise restraint in regard to the file size and number of embedded images and multimedia clips: iPhone 5 owners are just as likely to be connected to a flaky 3G network on a train as they are to broadband wireless in their living room.

So just because it is technically possible to embed all kinds of remarkable content within a web page - super sharp photography, collages and illustrations, movies, games and audio - in reality we work within severe constraints that force us to acknowledge that only a subset of the content that we can theoretically make available on the web can actually be said to be properly 'native' to the medium.

Paul argues that in the process of applying and refining responsive design techniques over the past couple of years designers have in fact uncovered significant limitations inherent to the web that we - and our clients - may not actually want to acknowledge.

On the plus side:

  • Web designers have gained a greater appreciation of the power of good typography as a design element. Good looking text looks great on most browsing devices, and scales well on high resolution retina displays. Widespread support for the @font-face CSS rule has freed designers from the shackles of 'web safe typography' and made possible the kind of beautiful type-driven designs that print designers have been creating for decades.
  • CSS3 has proven an exceptionally efficient tool for applying interface flourishes such as rounded corners, gradients, transitions and animations that previously required clumsy hacks conjured with Photoshop, extraneous markup and JavaScript plugins.
  • Icon fonts have proved a scalable, lightweight alternative to bitmap icons.
  • Increased browser support for SVG is finally allowing use of efficient, scalable vector graphics and illustrations.
  • Improving support for HTML5 is (slowly) opening the possibility of powerful tools such as the canvas element.
  • Progress is painful, but techniques for embedding video reliably across devices are gradually being worked out, at least by big players like YouTube and Vimeo.

These tools and techniques have and continue to prove their worth in the exacting world of the mobile web, a reliable toolbox of design options for which we can reach when seeking to craft responsive sites. Designers are discovering progressively more ingenious ways of mixing and matching them to develop clever, good looking, fast loading sites that work cross-browser on all manner of devices, of all shapes and sizes.

But we're left with one huge 'problem': what do with raster images, which all difficulties notwithstanding are still perceived as fundamental to web design, the default option for enhancing the visual appeal of a web page. They don't work with responsive design. They are fixed width elements grafted onto an inherently flexible medium. Paul writes:

'This isn’t a failing of the web; that we can embed different types of media into a webpage is a useful feature. But not all formats share the web’s characteristics. There’s a tremendous opportunity to develop a responsive bitmap format, and I doubt images will truly feel part of the web until such a thing exists.'

Design around the problem

Paul's simple, but radical proposal is that we acknowledge that fixed width raster images can no longer be considered, if they ever were, natural components of the web aesthetic:

'It’s in the realm of constraint that creativity is fostered. Designers have yet to push against the limits of what is possible. In seeking design solutions to this problem, we could create an aesthetic more appropriate to the medium - and perhaps realize that the responsive image problem only exists because our design conventions remain rooted in print. Without such a period of experimentation and reflection, I fear we could actually introduce standards that go against the medium’s universality; modern-day <font> elements almost.'

That, I think, is a quietly revolutionary statement:

  • It's radical in its simplicity because it suggests that the answer to the thorny issue of raster images has been right in front of our noses all the time: don't use them if possible. Or at least greatly reduce their use. Rather than reaching unreflectively - by force of habit - for a lovely big photograph, slideshow or collage when we're striving for an impactful design, we should ask: do we actually need this? - wouldn't it be possible to just do it with typography or SVG? Paul suggests that if we do need photography we should consider serving just one image rather than differently sized versions: file size can be greatly reduced by making images monochrome were possible, or blurring out all but the focal point of the image.
  • It's radical in its implications because it challenges years of established web design practice, inspired by print design. When we want impact good photography or illustration can provide a quick, effective solution. And clients have come to expect image-rich pages with similar visual appeal to those of magazines and coffee table books.

Paul ends his article with some interesting and deliberately provocative thoughts:

'As we enter the third decade of the web’s existence, we should be gaining a sense of what works, and what doesn’t. We should now have the confidence to choose which aspects of other media and platforms to take inspiration from, and which to ignore. We should be inspired by the conventions of other media, but no longer governed by them.

'With universality as a guiding principle, we can ingrain approaches like progressive enhancement throughout our design process. Everything on the web ultimately needs to degrade down to plain text (images require alt text; videos require transcripts), so the text editor might just become the most powerful app in the designer’s toolbox.

'As the web matures, we should acknowledge and embrace its constraints — and the aesthetic those constraints can produce. When we do, we might discover that the true web aesthetic is hardly visual at all.'

Using images when necessary

I agree with that, and I'm persuaded to start experimenting in earnest with alternatives to bitmap-laden designs. But not to go mad and abandon raster images altogether. Clearly clients won't accept that. And certain content can only be communicated and illustrated by means of photography.

As noted above Paul suggests that rather than producing multiple copies of an bitmap image and trying to serve different versions to different devices we simply create one image, but take steps to optimise it by removing colour or blurring out all but the focal point of the image. The A List Apart article published alongside Paul's, Mo’ Pixels Mo’ Problems by Dave Rupert, suggests other pleasingly simple solutions.

One involves simply experimenting with images of intermediate size that will be 'good enough' for display on all devices. So for example rather than creating two versions of an image for sending to 'regular' and Retina displays, we can compromise and make it 1.5 times regular resolution: slightly too many pixels than ideal for regular screens and slightly too few for Retina displays, but close enough to the ideal to work for both. Dave writes:

'Ultimately, the usefulness of the @1.5x technique depends on the situation. Notably, it does penalize the @1x user, but maybe there’s an even happier middle ground for you at @1.2x or @1.3x. We currently see the “just a bit larger” method as a viable solution for getting a little more out of medium-importance images without adding another degree of complexity for our clients. If you’re in a situation where you can’t make drastic changes, this might be a great way to gain some fidelity without (relatively) overwhelming bloat.'

Like Paul, Dave suggests that designers explore thoroughly the possibilities afforded by CSS and SVG for website imagery before falling back on photography:

'CSS3 allows us to replicate richer visual effects in the browser with very little effort, and the explosion of high-quality web fonts allows us to build sites on a basis of rich typography instead of image collages. With our current CSS capabilities, good reasons to rely on giant raster graphics for visual impact are becoming few and far between.

'So the old rule remains true: If you can accomplish your design with HTML/CSS, do it. If you can’t accomplish your design with CSS, then perhaps the first question you need to ask yourself is, why not? After all, if we consider ourselves in the business of web design, then it’s imperative that our designs, first and foremost, work on the web—and in the most efficient manner possible.

'Take a step back and embrace the raw materials of the web: HTML and CSS.'

Only when absolutely necessary should we fall back on workarounds that involve sending multiple images: Dave suggests the Filament Group's Picturefill polyfill as a simple purely front-end workaround that involves no messing about with server architecture.

Simplest is best

As so often with seemingly insoluble problems the difficulties are of our own making: we already know the solution, it's just that we persist in refusing to acknowledge what's already in front us. Both these of these excellent articles apply that simple reasoning to help us see that the seeming complexities of responsive images are only apparent: they need only tie us in knots if we choose to apply the bindings ourselves.

Translation

A Spanish translation of this post has been written by Maria Ramos from Webhostinghub.com.

Categories: