Overview

A picture might be worth a thousand words, but is it worth 10 seconds of download time? Ask yourself this question before adding a picture to your Web. Web graphics today are almost entirely either .jpg or .gif files, sometimes .png. Your choice of file type will greatly influence the size of the graphic. Read Choosing a File Format for Web Graphics for more specific information on graphics file types.

Keep the Graphic File Small

The simplest way to reduce the size of a graphics file is to keep the graphic itself small.

You can reduce the size of a graphic by cropping it (moving the top, sides, or bottom of the graphic to remove parts that are not necessary) using an imaging package, or within an editor.

1. After inserting graphics images within MS SharePoint Designer, (Select the graphic, drag to resize or right-click, Picture Properties, Appearance tab),
2. Drag the handles until the graphic shows only what you want.
3. On the File menu, click Save.

Another way to reduce the size of a graphic is to resize it proportionally.

As a general rule, never use a graphic that is any larger than the size it is displayed in on the Web site. For example, if you create a graphic at 800 x 400 pixels, do not display that graphic at 200 x 100 pixels. Although the graphic is displayed at a smaller size, the file still downloads at full size and the browser reduces the display size.

What graphic file format is best for the Web?

When using an imaging package, or when scanning your pictures, you will need to consider which file format to use. The three most common image file formats on the web are GIF, JPG and PNG. The first two have been a standard in web browsers since the beginning. The third one, PNG, is not really a new format in and of itself, but it is a relative newcomer to web graphics and until recently was only supported in web browsers through the use of proprietary plug-ins.

GIF - An acronym for Graphics Interchange Format, created originally in 1987 by CompuServe to facilitate the exchange of images between different platforms. The file format is known for its compression and the fact that it can store and display multiple images. The major drawback to GIF (file extension .gif) is that images can only use up to 256 distinct colors to display their data. For photographic-quality images, this is a significant obstacle. Fortunately, the GIF file format contains a small work-around: the file itself can have a color palette that each stored image uses in addition to the local palettes created for colors custom to those specific images. This means that most images stored as GIFs have access to potentially more than the 256 colors technically allowed by GIF.

If the image uses fewer than 256 colors, the size of the stored image may be smaller, since fewer bits are needed to represent color data (8 bits for 256 colors, and only 4 bits for 16 colors). Also, the GIF format allows you to select one color (usually the background) that will appear transparent when viewed in the browser. THis gives the appearance of the background color or image showing through the normally rectangular area of the image.

However, the GIF file format is still not normally the best medium with which to display your scanned or digital photos on the Web. Where GIF excels is in storing and compressing text-based images, line and clip art. Because these types of images don't require millions of colors, they can quite easily be stored as GIFs with minimal, if any at all, degradation.

Finally, one of the more popular uses of the GIF file format is that of animation. Built-in natively to the format are controls for image delay, layer transparency, and layer position, among others (layer here refers to each distinct image contained within the file).

JPG - Developed by the Joint Photographic Experts Group, this file format is the Internet standard for presenting photo realistic images. It has the capability to compress large images down to very small file sizes while retaining the overall photographic quality of the image. JPEG (extension .jpg or .jpeg) files use  24-bits to store image colors, so this presents realistic images using more than 16 million colors.

Unfortunately, the one characteristic of JPG files that makes them great for the Internet is also its greatest drawback. The more you compress an image, the more information that is lost. That means that the high quality photos can become blurry and block  at the highest levels of compression. Therefore, when saving files as JPEGs it's absolutely critical that you maintain a careful balance between compression and quality. Also since you cannot uncompress a file, always keep an original uncompressed image saved, in case you need to experiment with the best compression versus image quality tradeoff.

When choosing to save a file, sometimes it can be difficult deciding on which format would best serve your purposes. The general guideline is this:

For text-based, or contains mostly clipart, line art, or other drawings, then try GIF format; however, if your image contains mostly photo-realistic information, your best bet is JPG.

PNG - This is the lost brother in Internet file formats. Originally the Portable Network Graphics format was developed by Thomas Boutell, Tom Lane, et al as a replacement format for both GIF and JPEG - it natively supports all the characteristics of both formats, and then some, but it seems to have been forgotten in the push to make web browsers bigger, better, and more burly. Only recently have browsers begun supporting this format without the need for special proprietary plug-ins.

As mentioned above, the greatest advantage to using PNG is that it supports all the features of both GIF and JPEG. If you have text or line art, you can activate the GIF-like color reduction options and create a smaller file with no lossy compression. On the other hand, if you're saving photo-realistic images you can activate the JPEG-like compression schemes and save them that way, also with no loss during compression (unlike JPEG which varies from near-lossless to extremely lossy). In addition to these features, it also supports alpha channels for masking (and transparency of 256 colors), gamma for color correction, and storing 48-bit color images (JPEG can only go as high as 24-bit).

However, there is a drawback to all this: PNG files tend to generally be larger than JPEG files as they almost always use a lossless compression scheme. (Though often times when used with the same color palettes as GIF files they tend to be smaller.) Additionally, while modern browsers do natively support this format, they don't necessarily support all of its functionality. Finally, PNG does not support animation, perhaps the only feature it does not share with GIF.

If you decide to go with PNG, you may find the results are not always what you expect.

NOTE: Some earlier browsers do not support PNG's without the use of special proprietary plug-ins.

Reduce the Size of .jpg Files

The JPEG file format works best with large numbers of colors in graphics that are photographic in quality. You can compress .jpg files significantly without a noticeable degradation in quality. However, compression of JPEG images is "lossy." This means that some data in the image is lost during compression, so that image quality degrades at high compression levels.

The following figures show an uncompressed original photograph, taken from Microsoft PhotoDraw™ content, and compressed versions of the photograph, with file size and download time at 28.8 Kbps connection speed.

Original photo (200 x 161 pixels) 10 KB, 12 seconds
At 20% compression 8 KB, 5 seconds	At 70% compression 6 KB, 2 seconds	At 90% compression 3 KB, 1 second

As you can see, at 20% compression, the file is less than half the size of the original and download time is less than half. At 70% compression, there is still no noticeable degradation of the image and the download time is greatly reduced. At 90% compression, color banding is visible and although the file size is half the size at 70% compression, the download time is only 1 second less. There is no advantage to compressing the file by 90%.

The Save For Use Wizard in Microsoft PhotoDraw and the Save for Web Wizard in Microsoft Image Composer both provide live previews of an image. These previews show varying degrees of compression and download time at user-determined connection speeds. The previews can help decide if the tradeoff of faster download time for less distinct images is worth considering.

Reduce the Size of .gif Files

The GIF file format works best with graphics that contain a limited number of colors, and consist of lines or text. Files in GIF format tend to download quickly, since they contain 256 colors or less. If you convert an image from JPEG to GIF format, you will lose color information.

In the GIF format, colors are saved in horizontal rows. Areas containing solid colors compress by the greatest amount. Colors that are arranged horizontally result in smaller files and faster downloads. For example, a file containing two stripes of horizontal colors is less than half the size of a file that contains two stripes of vertical colors.

The following figures show the same graphic of a flag in both horizontal and vertical orientation.

File size - 6 KB.

File size - 9 KB.

To rotate a graphic in Front Page:

1. On the Normal tab in Page view in FrontPage 2000 (Normal tab in FrontPage Editor in FrontPage 98), select the graphic.
2. On the Pictures toolbar in FrontPage 2000 (Image toolbar in FrontPage Editor in FrontPage 98), click Rotate Left, Rotate Right, Flip Horizontal (Reverse in FrontPage 98), or Flip Vertical (Flip in FrontPage 98).

When you save a graphic to a GIF format in most graphics programs, you have the option of saving the file as interlaced. Interlacing is a technique that displays a file in horizontal chunks, something like Venetian blinds. The advantage of using interlacing is that an image appears quickly, although in a low resolution, and then builds to a fully resolved image. Interlaced files typically are slightly larger than non-interlaced files.

Many graphics programs provide the option of compressing .gif files by LZW compression. Unlike the compression of .jpg files, compression of .gif files is lossless. This means that no data is lost during compression, so the image does not degrade. However, you have no control over how much compression is done (fixed), so you cannot experiemnt to get a smaller, acceptable file size.

Tips

When you are optimizing a graphic, please keep in mind the following tips:

• Always make a copy of your original before you do anything else, and keep this original in uncompressed form (not .jpg) if practical.
• Never compress a file that has already been compressed. For example, if you want to compress a 100 KB image to 20 KB, you will get a cleaner result by compressing directly from 100 KB to 20 KB than by compressing first from 100 KB to 50 KB and then to 20 KB.
• If you do want to use a large graphic, consider creating a thumbnail that leads to the graphic. Create a smaller thumbnail version in your image processing program, or use the Autothumbnail button on the Pictures toolbar in FrontPage 2000 (AutoThumbnail command on the Tools menu in FrontPage Editor in FrontPage 98). This step will create both the thumbnail and a hyperlink to the full-size picture.
• Reduce colors when practical, and use only as many colors as your audience can see. If your audience computers can only display 8-bit color, use no more than 256 colors.