As more and more organizations and individuals publish their work on the World Wide Web, it is becoming more important to stand out with carefully thought out web pages. Graphics play an important part in this. Poorly implemented pages annoy users with images having wrong or missing transparency information, lack of progressive display, and long transmission times for 256-color images where 16 or fewer colors could achieve the same results.
In addition to supporting internet still image formats, Personal Paint includes tools to create highly optimized GIF animations, and to edit "image map databases". GIF animations became increasingly popular after 1995, when several browsers began supporting this format. Image maps make it possible to specify regions on an image, and to associate them to actions that are executed when the user clicks on a region. The "LoadAnimGif", "SaveAnimGif" and "WebMap" Rexx macros contain additional documentation which can be displayed by selecting "About..." in the Macro Selection requester (section 3.1.5 of the Personal Paint 7 documentation).
Personal Paint is an ideal tool for the creation of palette-based images to be included in HTML documents (the standard for web pages). Two file formats are recommended for this purpose: GIF and PNG. Both formats support progressive display and transparency, the appropriate use of which can make a difference between a good page and a poor page. We recommend the use of both features.
GIF exists in two variants: GIF87a and GIF89a. PNG and GIF89a support transparency. GIF87a does not. The GIF format is designed in a way that programs supporting only the "87a" format should be able to read "89a" images, skipping the transparency information. Personal Paint's most recent GIF input/output libraries ("personal_gif_io.library" from version 3.2) allow for the GIF version to be specified in the Options window of the Save Brush requester. Library versions from 5.1 also support reading and writing of GIF animations (with appropriate client programs, such as Personal Paint 7).
PNG is technically better than GIF, but it has been officially introduced to the list of WWW-supported formats only in late 1996. It is likely that PNG will slowly replace GIF, which is being suffocated by patent problems. At Cloanto we began using GIF for our WWW images, but we expect to replace it with PNG as more browsers support it.
Progressive (also called "interlaced") display is a feature which is useful whenever it takes a long time (seconds, if not minutes) to load an image. Images stored without this option can be displayed only line by line, from the top to the bottom. It is very difficult to have an idea of the contents of such an image at the beginning of the transmission. If instead the progressive display option was enabled when the original image was saved, the entire image can be viewed in a coarse resolution at the beginning of the transmission, and during the transmission it becomes progressively more detailed.
All versions of GIF and PNG support progressive display, although PNG uses a more appealing method. Personal Paint has a Progressive Display setting in the Options window of the Save Image and Save Brush requesters. Images saved using this option occupy slightly more space, but can be displayed progressively during the load. This feature is widely used on the internet, and it is compatible with all web browsers.
Transparency is a feature which allows part of the image to be defined as transparent. This is useful, for example, when non-rectangular images have to be displayed over a pattern. But even if the background of a non-rectangular shape has the same color of the page background, we recommend setting that color as transparent, because some browsers may remap the image background to a slightly different color than the page background color. Some web browsers do not support the HTML commands which set the page background color, so an image background which was intended to be the same as the page, could appear to be different. Transparency can prevent this. Active use of transparency helps maintaining the quality of the page even when these browsers are used.
To preserve the best possible page quality even with older browsers we recommend to use transparency and at the same time to also make sure that the transparent color is the same as the page background color. This helps with those few browsers that do not support transparency.
Personal Paint saves transparency information only when saving brushes (Save Brush command, rather than Save Image). The transparent color is defined when the brush is defined. If the Transparency option in the Settings menu is set to None, then no transparency is associated to the brush. If instead it is set to Color, then the background color during the brush definition is used as transparent. Other types of transparency, such as transparency shapes which are not associated to a single color, which can be defined and stored in the IFF-ILBM format, are poorly supported on the internet, and not at all supported by the GIF format. So the only way to mark a region as transparent is to reserve a color for that part of the picture, and selecting it as the background color before the brush is defined.
While for still images we can safely recommend to use transparency for the background color even when this is not strictly required, for animations the choice can be more difficult, because transparency may have an impact on the size of the animation file, and also because some older browsers do not properly support certain types of transparent GIF animations. Therefore, for animations we recommend to set Transparency to "None" unless a transparency effect is required. The Frequently Asked Questions section of Personal Paint contains additional notes on possible problems which may be experienced when transparency is applied to GIF animations, and how these can be solved.
It should be considered that even 100% Amiga-oriented websites are very often (if not preferably, as some statistics indicate) viewed using a PC browser. When they are not operating on a true-color desktop, the majority of PC internet browsers remap and dither all images using a 216-color "isopalette", which is a palette in which the entries are equally distributed in the color space. This allows for fast and efficient dithering, and is in general preferred to other methods involving dynamic color allocation and change based on the different images.
Internet browsers by Microsoft, Netscape and others share a common 216-color isopalette. The remaining colors out of 256 change from browser to browser. The Download section contains this color palette (as well as the subset of grays) ready for use with Personal Paint. Whenever this choice is easily practicable, we recommend to consider using these colors for palette-based graphics, especially for large surfaces of the same color, which would otherwise risk to be dithered by the browser.
Newer browsers support a feature called "Low Resolution Preview" ("LOWSRC" attribute in the "IMG" HTML element), which makes it possible to specify a very compact image, usually in low resolution and with very few colors, which is displayed before the higher-resolution image is loaded and displayed in the same place. If this feature is used, it is important to consider that the low resolution image can use progressive display, but the high resolution image should not, because it would immediately cover the preview image.
It is important to keep in mind some practical internet traffic, bandwidth and cost restraints, which suggest that the size of the image files should be as small as possible. If you are planning to publish a 256-color image, try to color-reduce it to 16, or even fewer colors. Very often, the difference in quality can hardly be noticed, but a 16-color image is transmitted twice as fast as one in 256 colors (and costs less, if traffic or time are charged). Personal Paint's most professional quantization mode is activated by setting the Dithering option to Floyd-Steinberg, with the Best Quality option active. It should also be noted, however, that Floyd-Steinberg dithering creates patterns which can slightly reduce the compression rate.