Images weighing your site down? CSS can lighten the load.

Written by Jack Armley

As a site design gains complexity and visual richness, it risks becoming heavier and heavier, until its download time becomes unacceptable.

Images typically make a large part of all websites. They are used not only to illustrate content, but to create the design itself. They are part of a slew of files that a user must download when they type in a site’s URL. Each file is called a “page request”, and the more of these there are, the longer the site will take to download. As a site design gains complexity and visual richness, it risks becoming heavier and heavier, until its download time becomes unacceptable.

The solution then, is to ramp down the richness, right? Less images, less problems? This is not a realistic solution — design is important. A site that downloads in a split second, but isn’t at all engaging could risk alienating its users just as much as if it takes 10 seconds to download (this is a mother f’ing website is a great example.)

A better solution is to seek alternative methods of creating visual elements with less images. CSS (the language that gives webpages style) is the way to go, and since the early days of web-design, its feature set has grown ever more advanced. Not only does using CSS reduce the number of image requests (a CSS stylesheet is only one file), it renders graphics at the same fidelity for high pixel-density devices like iPhones. If regular images are used, high-res alternatives must also be provided, most often in double the pixel dimensions (which of course, means up to quadruple the file size, as both width and height doubles).

Some good examples:

Using CSS gradients to produce repeatable background patterns, by playing around with the space between each colour, so it becomes a hard line instead of a gentle fade. As an experiment, our Jane Yeap took this technique to extreme levels and created a CSS-only Brazilian flag.
Making a border around an element, and tricking it into becoming a triangle. With this little trick popular elements like ribbons and tooltips can be produced.
Using border radius to create that old classic — the rounded corner box. This humble feature can be manipulated in different ways to create an array of other shapes.
Using CSS transform properties like rotate and scale on an element to create complex visual effects, such as the circular menu we produced for the Brownes Flavours of WA website. Here’s an early proof of concept.

Spoiler alert!

CSS isn’t an open-and-shut thing. Its feature set is constantly being updated, and browser vendors like Mozilla (Firefox) and Microsoft (Internet Explorer) have to keep pace so web designers can take advantage. This happens in fits and starts across the browser landscape. CSS gradients, for example, have been supported by Chrome since before version 4, but are only supported in IE 10.

This shouldn’t stop the determined image slayer though. If a sensible amount of your target audience use browsers that support a particular feature it should be used; alternatives can be provided using tools like modernizr. A great resource to check support for a specific feature is the caniuse database.

There is no one size fits all way of managing a fallback. A more basic version of an element may be acceptable in some cases (like falling back from a gradient to a flat colour), or in others a uniform look-and-feel may be called for (which could be the case if said element is a core part of the site’s brand, such as its logo.)

Making use of CSS in these ways can make things much easier in some instances; and in others, it can be the harder road to travel. In the end, your users will thank you when the site they requested is ready to go in reasonable time, and looks crisp and sharp from their desktop computer, to their retina iPad, to their new Samsung S4.