Preparing your images for the web

This article is a check list of definition and advice on how images are seen, stored and named for a website. I start with the most basic definition (a pixel) and go through file format and naming conventions for the web.

Pixels

A pixel (short for picture element) is the smallest square of color on your computer monitor. Put a bunch of pixels together, and you get an image! Typically, a monitor will have something called “resolution” which defines how many pixels across can be displayed. The higher the number, the better the picture on your screen. The most common resolution will be 1024 pixels by 768 pixels.

Images are often described in terms of pixels: the width and height are defined in x number of pixels across, and y number of pixels in height. Again, the higher the number, the more information will be contained in the file, and the better the picture will be.

Why should you care? Knowing that most users will display their screen at 1024 by 768 pixels, it is no use putting images on the web that are larger than that. The more pixels you have, the bigger the file will be, the longer it will take to download. Given that the browser will take up some of your screen real estate, images that are larger than 640 pix by 480 pix will be too big and most likely will not display without the user having to scroll the screen. Most images on the sites I designed are no bigger than 500 pixels.

Mega pixels

A mega pixel is 1 million pixels, and is often used to describe the quality of a picture taken from a digital camera. A mega pixel for a digital camera describes the size of the picture in terms of width and height. For example, a camera that takes pictures at 3.1 mega pixels means that the picture is 2048 × 1536 , which multiplies to 3.1 million

Naming conventions

Most operating systems try to be as user friendly as possible. They do not want you to worry about the underbelly of the computer and how it works. Though a very nice concept in theory, it is to a certain extent a disservice to the user. Why? Because you are unlikely to know what the server where your site is going to be hosted uses as an operating system, and some have stricter rules about naming conventions than others. To be safe, I restrict myself to the alphabet and numbers. Underscores and dashes seem to be universally accepted, but I stay away from question marks, forward and backward slashes and their ilk.

Simply put: keep your names descriptive such as blueflower.jpg and simple. Try to limit yourself to the alphabet and numbers. Everything else might be asking for trouble. There is a very comprehensive (and short) article on file name conventions that was published on slashdot:

http://linuxboxadmin.com/articles/filefriction.php

File format

The file format for an image basically determines how the image information is stored on a computer. The computer uses an algorithm to compress the information as much as possible without losing image quality.

The most commonly used format for the web is jpg. It is currently probably the best way to store an image’s information and still maintain a decent image quality.

Designers used to save their files as .gif, which basically stored all the image information with only 256 colors and still maintained a good image quality. The advantage of a .gif is that images were quite small and therefore fast to download. However, the .gif format was patented by a company called Unysis and users were informed that they would have to pay royalties if they wanted to have .gif images on their website. The good news is that the patent is due to expire this year, August 11 2006 to be exact. Check and see if this format is available.

RGB and CMYK

A computer monitor uses Red Green and Blue light to display images. Print uses CMYK: cyan, magenta, yellow and black inks. Make sure that your images are saved in an RGB format or they will not display on most browsers. You can save an image as a CMYK jpg but it will not display browsers.

DPI

DPI stands for dot per inch, and is a measure of how much information is contained in a one inch by one inch square of an image: the higher the DPI, the more information is stored, the clearer the image will be. However, it makes no difference for the monitor: a 72 DPI image will look exactly the same as a 300 DPI image. For the purposes of a website, it is better to keep images at a lower DPI because the images will be smaller and download faster without losing any perceptible quality.