The WebXealot Page 3

Xara X. Bitmap Formats (Continued)

Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
Page 7

Click here to download a Zipped copy of
(738K)

If we resize each image to 50% its original size, export it, then import it and scale it 200% to the original size, we can see that the GIF and JPEG images did not make the transition very well, while the TIFF and PNG images retained more detail.

The GIF file was exported at 256 colors with the Optimized palette option. The JPEG was exported with 50% compression. At 80-100% (no compression) the loss of image quality is not as noticeable. The TIFF image was exported with no compression. The PNG was exported using 16.7 million colors.

All images were exported at 96 dpi, Windows screen resolution, and with Xara's anti-aliasing turned off (Normal View Quality). Exporting at a higher dpi, depending upon the resolution of the original image, will retain more image information and allow for more scaling without noticeable degradation of the image.

NOTE: When you create a bitmap image in Xara (Arrange > Create Bitmap Copy), according to Xara's Mark Goodall "...it is created in a simple internal uncompressed format (which is compressed, if memory serves, only on file save by the .xar file compressor, which is based around the PNG compression algorithm, and when reloaded is uncompressed back to the simple format).

When exporting to the Web, what is the best file format to use? Well this depends on the subject matter. For images with flat areas of color, text, and/or where transparency is requires, GIF or 256 color PNG works best, although many older browsers do not support PNG file format. For photographic images, JPEG with 50-80% compression works best.

While the preceding copy is generally true, a picture is worth a thousand words, so 6 pictures are worth, let me see, multiply 6 times 0 carry the six...

JPEG (14K) 50% Compression
While the photo looks great, and the file size is small, the text looks a bit mushy. Text and solid areas of color are the downfall of JPEG images.

GIF 256 Colors - No Dithering - Optimized Palette  (59K)

All in all (or owl in owl) the image here looks terrific, as does the text. But at 59K, the image is going to be very slow in loading.

GIF 16 Colors - Error Diffusion Dithering - Optimized Palette  (23K)

If we reduce the color depth to 16 optimized colors, and add Error Diffusion dithering, the file size drops down to 23K. The text looks crisp but we have lost some of the warmer brown tones in the original image. Still, not a bad compromise to get good image quality, sharp text, and manageable file size.

PNG True Color (131K)

At 16.7 million colors (give or take a few), the owl looks splendid, as does the text. But at 131K, the owl will not exactly fly onto your browser's screen!

PNG 256 Colors (53K)

If we reduce the number of colors to 256, the owl sheds 78K worth of useless kilobytes and still looks marvelous. So does the text. And even shedding this many colors does not really change the appearance of the photo. The PNG image at 256 colors is 6K less than the GIF image.

PNG 16 Colors Error Diffusion Dithering (22K)

Dropping down to 16 colors, the file size drops 40% in one fell swoop. As with the 16 color GIF image (which is 1K larger), the image has lost some of those warm coffee with cream tones in the feathers, but the text looks almost as clean as the 256 color version, and at this file size the owl will fly swiftly onto the screen when the page loads.

So, where your editor (that's me for the moment) comes out on all this, is do a little experimenting. If you want the smallest file size, and don't have to worry about solid areas of color or text, then JPEG at 50-80% compression is the way to go. But if you want clean, crisp text and solid areas of color, but still want a smallish file size, then try exporting your image in the GIF or PNG 16-color file formats.