< back

HTML Colour Intro
You should read the Intro to Colour first.

When creating pages for viewing via the Internet and coloured Text or Backgrounds are included, consideration must be given to the many millions of viewers (surfers?) that could eventually find their way to the site that you have published. There is no way of knowing what type of video card and how many colours the visitors Computers/Browsers are able to show. Today are still many 16 colour VGA and 256 colour SVGA computers in use around the world both private and corporate.

If we select colours that we like but other computers don't, then our pages may appear quite differently to what we see when creating them. Some colours may appear as another colour all together, and others may appear with an unsightly dithered pattern. To mostly! overcome this a selection can be made from the VGA palette of 16 colours or the palette of 256 colours (actually 216 plus a few for HTML objects). The 256 palette is particularly useful for bitmap images where file size is of utmost importance for telephone line transmission.

If your video driver allows mode changes between thousands of colours and 256 (8bit) colours, switch to 8bit mode regularly to check the appearance of your pages and, just as important, at least view your pages in both MS Internet Explorer 3+ AND Netscape Navigator 3+. It is surprising and often frustrating to see the difference between them. This also applies to the way Bitmaps and Tables appear. Generally MS IE produces the smoothest images and tidiest tables. Java buttons were used on this site and if coloured with anything other than the base 16 colours, the results were erratic when viewed with Netscape while MS Internet Explorer had no problems with them at all. I use the versions-3 of each to check the current HTML 3.2 standards. If you are prepared for a headache, also try earlier versions to check your work.

If Netscape had stuck with HTML 2 until HTML 3.0 was either ratified or rejected as a standard (it was rejected), we may not have quite so many problems. It is my experience that Netscape also re-dithers? most bitmap images when using 256 colour video.

Note: I have used a couple of pale non-Safe Colours as Table and Cell backgrounds on this site. This Cell should appear with a grey background in MS Internet Explorer but will probably change to pale yellow in Netscape - when using 256 colour video. Some current and most earlier browsers do not handle Table and Table Cell background colours.
Dither one

Dither two

Shown on the left are two methods of dithering applied to bitmaps with a maximum of 256 colours and the different patterns are obvious. Various utility conversion programs offer different types of dither pattern options and the worst is an ordered pattern that looks similar to that of a printed halftone without the variable dot size - an Unordered or Diffuse method is probably the best for Web images. (top pic.)

We have the ability to choose a pattern when creating 256 colour bitmaps from RGB scans etc., however if a Browser dithers HTML object colours then the results are unpredictable, especially on type, often making the page look flat if not hard to read. (You can view the preferred 216+ colours with Hexadecimal colour values, download a reference image and link to a chart with RGB values. The tables are quite large, so be patient if your connection is slow.)

Have you read the RGB Intro to Colour page

In an attempt to make a picture look similar in 256 colours as it does in RGB (16.77 million colours) a mixture of the available 256 colours is applied as a pattern (shown above). Considering that the resolution of the image is mostly 72 Pixels Per Inch, the resulting pattern (dither) can be detected on a very sharp monitor and especially if an ordered pattern is used. Many professionals will, when creating logos and buttons etc., choose colours for bitmaps that match one of the preferred colours exactly. The Image Tips and Backgrounds page includes a bitmap that can be used to force a 'Web Safe' colour pallet.

When an image is saved as a .GIF or the newer .PNG file type, the export filters ascertain the number of colours in the image and only save information, and a palette, for those colours. Therefore a .GIF image can contain only a few colours making the file very small (compared to image data containing a palette of all 256 colours, sometimes referred to as an Indexed colour palette), a very important consideration for faster transmission via the Web. Most bitmap image types contain a colour palette as well as the actual pixel data.

JPG jpeg
To save a picture as a .JPG file type, the image should be an RGB image. The beauty, and ugliness!, of this file type is that export filters contain an algorithm that can compress the data far more than most compressible types. However a little bit of practice is in order if you wish to use this type because improperly handled (the compression rate is user variable), the results can be downright ugly. The compression method is referred to as lossy - every time you open and save the file, image data is lost.

Bad .JPG compression Even a .JPG that is saved and opened repeatedly with a small amount of compression will eventually show signs of the loss of image data. The sample shows one of the worst scenarios, although it can also just look like a general loss of image sharpness. Check the results before you close the painting program used to export the image, work only on a lossless original like a .TIF and save as a .JPG when ready. Do not open a .JPG, make changes and save again.

Remember - Trial every .JPG file before you finish work on the original. Often a .GIF or .PNG will be smaller in size compared to a .JPG of equal visual quality.

• Experiment with the GIF Wizard online and receive back samples of your own .GIF/.JPG image that vary in file size and quality.

(The newer .PNG file type is not yet accepted by many Browsers and painting packages. It is a file type of the future, similar to .GIF with transparency options etc., created in direct competition with the .GIF type because of the possibility - a warning given to the industry - that the owner of the .GIF patent may charge for the use of all!!! .GIF type pictures.)

< back

Over 120 pages: All major topics divided into Classrooms
Free Backgrounds & Buttons! DTP and HTML "My First Page" HTML lessons
Tutorial Text Search Perl CGI Scripts Typography & Layout
4 pages of Links Visitors Book Perl Scripts Forum n/a
Free Links page Feedback Form Q/A contact Forum

pages Designed & Published - Ron F Woolley
e-mail 1997 '98. Last Revised:  Friday, 31 October 2003 22:04