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 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:

Site assets folder heirarchy screenshot
Typical site folder hierarchy organisation

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 your source files in lossless format, in as high a resolution as possible, and store them in the originals folder.

Step 2

Export a full scale version for high resolution devices, with "@2x" appended to the filename. For example, milton-friedman@2x.jpg

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

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

This 100K limit is a goal, not a hard-and-fast rule for every page of every site. There will be reasons for going above 100K, 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, via the following methods:

  1. Reduce each image to its smallest practical width and height.
  2. Crop out extraneous details: ruthlessly remove pixels you don't need.
  3. Remove any framing effects around any images (picture frames can be created far more effectively in CSS).

Step 3

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