The creation of content on the web is, all too often, a constant cycle of revision, tweaking, and recreation. Avoiding iterations of this process saves time and money, while lowering frustration. Sticking to a reliable, organized and efficient production workflow is helpful: here, we will be discussing the production of images.

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 for creation of the final, web-ready images; for this reason, I usually try to keep a particular folder structure to any site.

The assets folder contains all the material used by my site: images, videos, etc, each inside an appropriate 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. I do keep it inside the site folder, as I know I will be coming back the original versions when the client asks for “just one more change”.

Step 1

Create your source files in as high a resolution as possible, store them in a lossless format, and keep them nearby.

(It’s also worthwhile noting at this stage that we are referring here to bitmapped images. Creation of vector-based art such as corporate logos, maps, and diagrams are a slightly different animal. They should still, however, be kept in the originals folder for easy reference.)

Step 2

Export the versions of the images, in as small a file size as possible

Web developers I'n major cities are spoiled with a distorted sense of how the Internet works (particularly in Calgary, the hub for one of Canada's biggest telecommunications providers). Almost everyone in those environments has broadband, high-speed Internet access: cable, DSL, wireless. Our connection speeds are fast, and we gulp down megabytes in minutes. Step outside the major cities, however, and especially into other countries, and that is not the case. Dial-up modems are still common; international distances drag connection speed to a crawl. Your experience on the web becomes very different: and every web site, whatever its intended audience, is international in reach.

Our goal, therefore, is to make the total file size of any page - code, content, scripts, CSS, and images, all added together - less than 60K in size. A 60K page will download in less than 10 - 12 seconds, even over a dialup connection… and eight seconds happens to be the attention span of the average web surfer.

This 60K limit is a goal, not a hard-and-fast rule for every page of every site. There will be reasons for going above 60K, but the motives for doing so must be soberly judged, rather than an expression of incompetence. Generally speaking the primary contributor to page size is images, so it behooves us to try to make them as small as possible, via the follow methods:

1. Make the images that you are going to use on your website as small as practical. Reduce the image down to the smallest width and height that you can get away with.
2. Crop out extraneous details. Ruthlessly remove pixels you don't need from the image.
3. Remove any framing effects around any images. (Picture frames can be created far more effectively in CSS).
4. Remember that the most common screen resolution on the web is 1200 × 800 pixels at least of this writing, and that the actual size of the browser window is significantly under that, so anything approaching those dimensions is useless.

Step 3

Choose the appropriate format, and optimise the image's settings for that format.

Each format is used for a different kind of image. There is no one “best” format, or one format that should be used on all occasions. The purpose of the formats is best understood by unpacking their respective acronyms, discussed in the next section.