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
• Dimensions of the image
• Resolution
• Color space
• Compression
• Re-use of the image
• Interlacing
• Progressive Images
• Transparency
• Gamma correction
• Using background images
• Naming conventions

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:

• The dimensions of the file (height and width, generally measured in pixels for Web pages)
• The resolution (number of pixels per inch or centimeter) of the file
• The color space (number of indexed colors or color model; RGB for instance)
• Compression

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

• Intranet:
  • Local networks using Ethernet, Appletalk, and wireless networks offer high speed connections and great throughput
• Internet:
  • Cable modems, T1 or T3 trunk lines are often as fast as using Intranet access (local networks) depending on how many servers (networks) the file must travel to get to the user
  • DSL and ISDN connections are slower than the connections listed above, but still offer faster connections than conventional modems
  • Conventional modems are currently at 56K with with error correction, data compression and numerous standards and modem capabilities.

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:

• Make the image smaller than it will be displayed. Scaling the image up will allow the page to load faster (but the image will be of lower quality)
• Make the image larger than it will be displayed. Scaling the image down will make it more detailed (but the page will load slower)

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.
50%	100%	150%
____________</Example>

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

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	150 dpi GIF	300 dpi GIF
____________</Example>

Higher dpi means higher traffic for your page to load:

• A 1"x1" image at 100 dpi will have 10,000 pixels.
• A 1"x1" image at 200 dpi will have 40,000 pixels.

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.
____________</Example>

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.

Compression

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:

• LZW is a lossless compression scheme common in GIF files. It was developed by Lempel, Ziv, and Welch for Compuserve. The patent for the algorithm is held by Unisys. Applications developers will probably tend to shy away from this format because Unisys is charging a fee for using its patent.
• The Joint Photographic Experts Group (JPEG) developed a lossy compression scheme that is well-suited for photographs. It allows varying degrees of compression (although the image suffers as the compression increases because more data from the image is discarded).
• The PNG file format uses a non-proprietary compression method that is better than LZW and faster than JPEG. The concept behind the compression is to spend the time deflating the image when it is compressed in such a way that uncompression is easier and faster for the browser.

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.

Interlacing

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.

Tansparency

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.