HTML reduces the number of colors in an image

One of the most effective ways to reduce the size of the image to shorten the download time is to reduce the number of colors used in the image. This can significantly reduce the quality of some photographic images, but it is ideal for most banners, buttons, and other icons.

In Paint Shop Pro, you can choose Image/decrease color Depth and choose a specific color reduction option (most image editing software has similar options). If the color of the image is very small, choose color Palette, if the image is a lot of color (or the image using 16-color effect is not good), then select 256 Color paletter. The program automatically finds the most appropriate 16-color or 256-color palette based on the color range of the image.

Note: If the image uses only two or three colors, you should still select Image/decrease color DEPTH/16 color Palette before saving it. Otherwise, the image file retains a lot of color-wasting space even if the actual color is small.

When you reduce the number of colors in an image, you will see a dialog box that contains many options (see Figure 7.10). For Web page images, you typically select radio buttons optimized octree and nearest color. All options on the right side of the dialog box are not selected, and these options have little improvement over the quality of the image.

Hint: imitation color (in Paint Shop Pro also known as error diffusion) is a technique used by image editing software to simulate colors that are not in the palette by alternately displaying two closely colored pixels. For example, alternately displaying red and white pixels to simulate pink. In some cases, the imitation color can make the image quality look better, but usually the Web page image should avoid the imitation color. Why? Because the imitation color greatly increases the information complexity of the image, it usually makes the image file larger and more slow to download.

Figure 7.10

Reducing the number of colors in an image can significantly reduce the size of the file and not make much difference to the appearance of the image

There is a special image file format, which has only a limited number of colors, which is interchangeable image format (Graphics interchange Format,gif). To save the GIF image in Paint Shop Pro, select File/save as, and then select the GIF CompuServe Graphics interchange as the image type. GIF image formats are designed for images that contain a solid color area, such as page titles and other graphic images, and are not suitable for photos.

One format that is better than the GIF image format is PNG, and now all major Web browsers support this format. The GIF image format allows you to specify a transparent color in which the background of the Web page is displayed through these areas of the image. However, PNG allows you to specify different transparency, not just a transparent color. Select the PNG Portable Network Graphics image type in Paint Shop Pro to save the image as a PNG image. It is recommended that you try both formats. In the 9th chapter, you will show why transparent images are placed in a Web page in PNG format that is more transparent than GIF.