No matter how fast your page loads in a browser, it's not fast enough. Think speed.
Nobody likes to stare at the screen waiting for your pages to appear. That's a fast way to lose
readers. Graphic files are slower than text. 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)
Other considerations for shortening the load time include the use of some of the
attributes of the <IMG> tag
discussed below.
Dimensions of the image
In an ideal world, you will know the exact number of pixels to make the image. Often this is not
the case. A general rule of thumb is to display an image at a scale larger than 100% rather than
smaller than 100%. Why? Scaling the image up will allow it to display faster
(Remember Speed Speed Speed).
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.
Color images are similar. They will start to look
like the JPEG with Excellent compression and Fair image quality in the
Graphic File Format Samples Table.
It is better to have your page load quickly and get looked at rather than passed on because
of the long time the page took to load.
Example of scaled 72dpi gif
50%
125%
75%
150%
100%
200%
Each element in the table takes the same amount of time to get to your Web browser. How it displays
on your monitor is greatly affected by the percentage that is chosen.
Another that determines how large your image will display is resolution, which is discussed at
length below. Images that are the same size in your image editing software can
display at different sizes if they have different resolutions. For instance, each image in the
table below is 1"x1" in PhotoShop:
I have tried measuring the 72 dpi image on several monitors in Netscape and I find that
none of them actually measure 1". Keep in mind that there are a whole world full of
people and browsers, and that there may be someone, somewhere, that will see your page with
the image at the intended size. Your results may vary.
Resolution
Resolution is measured in dots per inch (dpi) or dots per centimeter (dpc). A common resolution for an image
that will be displayed on a monitor is 72 dpi (while a common resolution for printing is 300 dpi).
A 1"x1" with 200 dpi will have 40,000 pixels.
A 1"x1" image with 100 dpi will have 10,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.
Below is a table of images. Each image is 1"x1":
Constrained to HEIGHT and WIDTH of 72 dpi
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.
(No wonder your eyes start to go after a decade or so of staring into these things!).
One last thing about resolution; the exceptions. Company logos, for instance. Some organizations will insist
that their logos appear as crisp, clean, images, even on a Web page. This can be done, of course, by using either
a large image or an image with a higher resolution and scaling it down to achieve the desired effect. Remember,
however, that what you see in your browser may be different to the person in London or Moscow who may have a much
nicer or much worse monitor than the one you are using.
Color space
Choosing a color space is fairly simple. There are really 2 choices:
Millions of colors (JPEG or PNG files)
Indexed color (GIF or PNG files)
Millions of colors are best suited for photographs. Usually these files are saved in JPEG format
(because PNG is not yet popular, and GIF files are limited to 256 colors).
This is not a hard and fast rule. There are a lot of scans saved as
GIF format on the Web. It comes down to an issue of personal preferance. Some people do not
like the loss of data as a result of the lossy compression of JPEG, but color information is
lost because GIF files use indexed color. PNG files should change that.
Indexed color is great for images with few colors such as logos or images created in drawing programs.
Each color takes a slot in an index of color up to 256 colors total (black and white are colors, too).
If you have several images with similar color and convert them separately in an image editing
package, you may get more colors than you bargained for. If you are trying to minimize the colors
for speed, and the colors are not exactly identical, new colors will be added to the index. If you
really want to be certain that the number of colors is a set number, put all of the similar images
on a single page in the image editing software and convert them all at the same time. This will
ensure that the number of colors stays small. This is particularly important if you are designing
for monitors that can only display 256 colors.
Compression
Formats using compression allow the file to be smaller, but the image must be uncompressed before
it can be viewed. Most Web browsers can do this automatically.
The actual file travels through a
wire from the Web server to your machine (well, the file will most likely be sent through several
Web servers) in its compressed format. The compression saves time because the file is smaller
than it would be if it were not compressed. Your Web browser does the uncompression and displays
the image for you.
There are several different compression formats and 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 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 developed a lossy compression scheme that is well-suited for
photographs and allows varying degrees of compression (although the image suffers as the compression
improves because more data from the image is discarded).
The PNG file format is still under development as is the compression scheme it will use.
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. The image is stored in your browser's cache and
does not have do be downloaded every time it is used.
Interlacing
Some software applications allow GIF and PNG files to be saved in a format that will allow
the image to display in a manner in which the image becomes more detailed as it is displayed,
rather than displaying the image as complete from top to bottom. The image first appears very
blurry or pixelated and then becomes clearer as the process finishes:
Here are examples that will display in the upper left window of your browser:
A number of applications allow you to save JPEG files in a format similar to
interlacing
where the JPEG file will display in a progressively detailed manner rather than appearing
finished from top to bottom as most images. Here is an example of a
progressive JPEG file that will appear
in the top left window of your browser.
Tansparency
One of the advantages that GIF and PNG files have over the JPEG format is that the colors can be
indexed and that the color white can be "shut off" or made transparent. Transparency
allows the background to show through the image as shown in the table below.
Gamma correction
Gamma correction allows an image to be displayed in a way that is considered to be more accurate
than if there were no gamma correction. It is generally the process of lightening midtones of an
image.
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 and the bugs are still being
squashed. There is still a ways to go before this really becomes an issue in Web design.