The creation of web content is all too often a constant cycle of revision and tweaking. Avoiding process iterations saves time and money while lowering frustration: sticking to a reliable, organized production workflow is key to the efficient creation of web sites.

However they are generated – from photographs, directly in Photoshop or Inkscape, or by scanning – the original images used to create our work must, as much as possible, be retained in a lossless format, and be as high-resolution as possible. These originals will be drawn on to create the final, web-ready images; for this reason, I create a standard folder structure for every site:

The assets folder contains all the material used by my site: images, videos, etc, each inside an appropriate sub-folder. The originals folder contains source material: my RAW files from the digital camera during a product shoot, for example. The originals folder is not part of the site per se, and is not uploaded to the remote, “live” site.

Step 1

Create or import your source files in a lossless format, whenever possible, in as high a resolution as possible, and store them in the originals folder.

Step 2

Choose the appropriate image format, and optimise the image's settings for that format. Include the following sub-steps:

1. Crop out extraneous details: ruthlessly remove pixels you don't need.
2. Remove any framing effects around any images (picture frames can be created far more effectively in CSS).

Step 3

Export a full scale version for high resolution devices, with "-2x" appended to the filename. For example, milton-friedman-2x.jpg. Export another version of the image at half the width and height, without an append: for example, milton-friedman.jpg

Vector-based art, such as corporate logos, maps, and diagrams, are typically exported in SVG format, and do not have a resolution. They may be saved in a seperate svg folder, inside the assets folder.

Conclusion

Web developers in major cities tend to have broadband, high-speed Internet access. Step outside the major cities, and slow connection speeds become much more common; international distances drag connection speed to a crawl. Rural experience of the web is very different from the cities. Every web site, whatever its intended audience, is international in scope, and we should try to keep our sites accessible to as many people as possible by keeping file sizes low.

Our goal is to make the total file size of any page - code, content, scripts, CSS, and images, all added together - less than 120K in size. A 120K page will download in less than 10 seconds, even over an extremely slow connection, and two seconds happens to be the attention span of the average web user.

This 120K limit is a goal, not a hard-and-fast rule for every page of every site. There will be reasons for going above 120K, but the motives for doing so must be judged carefully. The primary contributor to page size is usually images, so it behooves us to try to make them as small as possible.

Photograph by Andrii Slonchak, used under a Creative Commons Attribution Generic 2.0 license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.