I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Images for the Web: Production Workflow

html / images

Estimated reading time: 2 minutes, 30 seconds

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 heirarchy organisation

The assets folder contains all the material used by my site: , 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.

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, , , and , 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.