Properties of Graphic Files

This section could well be titled Planning. Many of the issues discussed raise questions that should be considered before files are created.

Graphic images have several properties to consider. Discussed here are:


File Size

No matter how fast your page loads in a browser, it's never fast enough. People simply do not like to wait. Take the time and steps to optimize your pages so that they will load as quickly as possible.

Large graphic files are a key factor in slowing down a presentation. The size of a graphic file depends on several things:

When designing the page, keep in mind how the page will be displayed:

The average user reading a page on the internet will have to wait for a page to load. Pages with more graphics and pages with large graphics will take longer to load and readers often will not wait several minutes for a page to load. Keep the design as simle as possible and code pages to help them load quickly by taking advantage of attributes in the <IMG> tag


Dimensions Of The Image

In an ideal world, you will know the exact number of pixels to make the image. Usually this is not the case. Images may also be cropped, color corrected, or otherwise altered before making their appearance on the Web.

It is wise to keep back-up copies of images at higher resolutions and before cropping. It is best to keep images on file as a site progresses. This takes a some degree of organization, planning, and ideally documentation.

There are different schools of thought on final dimensions for images:

Clearly there will be a trade-off between speed or quality.

Example: Scaling images
In the table below I have taken a 72 dpi bitmap image and scaled it both larger and smaller than 100%. The reduced images looks smoother than the one at 100% and takes just as long to load. The larger the image is scaled up, the more jagged or "pixelated" it becomes.
[GIF Image]
[GIF Image]
[GIF Image]

In general, it is better to have your page load quickly and be seen rather than passed over because of long load time.

Web design in general is a little slippery. I have tried physically measuring the 72 dpi image on several monitors in different browsers on different monitors. I have found that none of them actually measure 1". Keep in mind that there are a whole world full of people and browsers, and monitors.



Resolution is a measurement of the number of dots per inch (dpi) that define the image.

Web browsers generally display images at 72 dpi. Images not saved as 72 dpi are generally scaled by the Web browser to display at 72 dpi. A 1"x1" file at 144 dpi will display as 2"x2".

A 72 dpi image does not allow a great deal of detail because the resolution is so low.

Example: Images with different resolutions scaled by the browser
Each image below is measures 1"x1". Only the resolution is changed. Web browsers tend to scale images so they are displayed at 72dpi making files with higher resolutions larger on the page.
[72 dpi GIF]
72 dpi GIF
[150 dpi GIF]
150 dpi GIF
[300 dpi GIF]
300 dpi GIF

Higher dpi means higher traffic for your page to load:

Notice that if you double the size of the image, the number of dots does not double, but quadruple! There are twice as many pixels in both dimensions, height and width.

Example: Images with different resolutions constrained by the browser
Each image below is measures 1"x1". Only the resolution is changed. In this example the size of the image is contrained to 1"x1" by an attribute of the <IMG> tag.
[72 dpi GIF] [150 dpi GIF] [300 dpi GIF]

So what resolution do you see when you gaze into a Web page? Let's take a typical monitor that displays 640x480 pixels on a display that is (approximately) 9.375"x12.25". Dividing the inches into the resolution (640/12.25 and 480/9.375) gives a screen resolution of about 52 dpi.

Once one starts taking into account interlacing, dot pitch, aperature grille pitch, and active matrix LCD displays you've gone too far!

Keep in mind that the general display resolution is 72dpi and keep your back-up files ready for alterations!


Color Space

Color space is the way color is defined inside the file. Files can be indexed, RGB, CMYK, grayscale, or bitmap, to name most of the different modes. Some graphic editing applications do not support all of the color spaces available.

Web graphics usually use a color space of indexed or RGB.

Indexed color space is best suited to images with few colors. Each color (including transparency) is defined in a color table. There is a limit to the number of colors allowed in the table (usually 256). Indexed color images are usually GIF or PNG files.

RGB (Red Green Blue) files are best for scans or photographs that may have millions of colors. RGB images are usually JPG or PNG files.

RGB is based on light (additive color space). As more light is added the color approaches white. Colors are broken into 3 pairs of values (00 to FF in hexidecimal or 0-255 in decimal) for each color (red, green, blue). A value of #000000 would display as black while #FFFFFF would be white.

Check out Appendix C: The Color Lab to get a better understanding for how this works.

CMYK (Cyan Magenta Yellow Black) is a color space based on pigments found in ink (subtractive color space) best suited for the printing and publishing world. High-end scans and color retouching are usually done in this color space. It would generally be encountered when converting a printed publication to the Web.

Grayscale color space is best for black and white scans or photographs.

Bitmap images allow only either all black or all white.



Graphic files using compression allow the file to be smaller and transfer to the reader's machine faster. However, the image must be uncompressed before it can be viewed, which takes some time. Web browsers will uncompress images automatically. If a compression method is unsupported, the image will not display.

There are several different compression formats. Different software applications may use different algorithms. It is important be aware that some of the compression formats available may use lossy compression where some of the data is thrown away as the image is compressed.

Some of the common formats available today are:


Re-use Of The Image

One of the best ways to get the most out of your images and speed up the amount of time it takes your page to finish drawing is to reuse images. Many browsers allow images to be stored on the reader's machine in a cache so the image does not have do be downloaded every time it is used.



Some software applications allow GIF and PNG files to be interlaced. This is a method which makes the image gradually appear. It is done by drawing only certain horizontal lines (scan lines) of the image at a time rather than drawing the image from top to bottom. The scan lines are staggered to give a better hint of the final image with each pass.

Check out Appendix E: The Image Lab to view different types of images.


Progressive Images

A number of graphics applications allow you to save JPEG and PNG files as progressive images. This is a method which at first gives the image a very blurry or pixelated appearance and becomes more detailed as the image finishes loading.

Check out Appendix E: The Image Lab to view different types of images.



One of the advantages of GIF and PNG files is that the colors can be indexed. One (or more) of these colors can be "shut off" or made transparent. Transparency allows the background to show through the image.

Check out Appendix E: The Image Lab to view different types of images.


Gamma Correction

The ultimate goal of gamma correction is to have images appear the same on all platforms on all devices. In reality, it allows an image to be displayed in a way that is considered to be more accurate than if there were no gamma correction. When compensating for different monitors with different white points using different color depths, it simply appears that the midtones of an image are shifted. This is an (accurate but) oversimplification of a complicated process.

In general, images will be darker on an IBM monitors than on a Macintosh monitors because the operating system on the Macintosh has gamma correction built into it. However, the only file format that supports gamma correction is the PNG format. There is still a way to go before this really becomes an issue in Web design.


Using Background Images

Background images allow type and images to be displayed over a custom background.

Check out Appendix E: The Image Lab to view examples and code.


Naming Conventions

It is best to stick to alphanumeric (letters and numbers) characters when naming files. An occasional hyphen [-] or underscore [_] is not going to be a problem.

Some characters may create problems for some networks. For instance, forward slashes [/] and backward slashes [\] may be interpreted by some servers as an instruction to shift directories (heirarchy change). A comma [,] may be interpreted as a pause. A greater than [>] or less than [<] symbol may be a pipe instruction to some systems.

Most servers and ISPs have worked out the bugs with these characters. Some operating systems do not allow some of these characters in file names. Because it is possible for these names to travel all over the world through all kinds of networks, it is safest to avoid issues in the first place.

[Back] [Top] [Next]

©Ken Kaleta. All Rights Reserved.