Internet Bitmaps Overview

Xara LX redraws pictures at an exceptional quality level and supports both transparency (masking) and interlacing in exported GIF files. It can create bitmaps using error-diffused dithering which gives bitmaps of a higher quality than most other programs and can also generate bitmaps with a specially chosen optimized palette. It is ideal for creating bitmaps for publication on the Internet. Generally when you create bitmaps for the Internet, you will create GIF files because of the extra features they support, but there is no reason why you cannot create bitmaps in other formats. For information on how to create a bitmaps for the Internet, see Creating GIF files and Creating JPEG files.

When producing bitmaps for the Internet, we suggest basing your document on the '640 by 480 drawing' or '600 by 800 drawing' template. These use pixels as their measurement units. See Creating new documents for details.

Use GIF for graphics that are artificial - sharp lines, text and other precise illustrative aspects. Use JPEG for images that are either natural - photographs, backgrounds - or other images that don't mind loosing a bit of detail. You should experiment with various JPEG compression settings as well.

You have several options for exporting GIFs. Generally, in increasing quality and size, they are:

1. 2 color non-dithered

2. 16 color non-dithered, optimized palette

3. 16 color diffuse dithered, optimized palette

4. 256 color non-dithered, palette optimized

5. 256 color diffused dither, optimized palette

The last one will always give the best quality, but is usually also the largest variant, and you may sometimes find JPEG images come out smaller.

GIF and JPEG are the only two formats that will be guaranteed to work with all browsers.

For Really High Quality WWW Bitmaps

Turn the Quality setting to its highest level (see Changing the screen quality of documents for more details).

Use error-diffused dithering, but do not forget this may increase the file size.

Use an optimized palette, but this may increase the file size.

If you are creating a masked GIF, make sure its edges are anti-aliased to the same background as that on the Internet page. See Smooth Bitmap Edges below).

You will usually find an interlaced bitmap is more pleasing to the eye, particularly if the image is large.

Keep the bitmaps as small as possible so they download quickly - always use as few colors as you can. For example, if your image only contains 10 colors, an optimized palette 16 color (4 bit) bitmap is likely to be as good as a 256 color version but will be half the size.

Use the pixel units (see Units Options) to ensure all your objects are aligned on the edges of pixels in the bitmap.

Sometimes experimentation yields even better results. For example for an image composed of many, very similar colors, error-diffused dithering probably gives no improvement. You may also find with a picture like this that you can create a very high quality image using an optimized palette with only 16 colors.

Masked GIFs

GIF bitmaps support masks. This means the bitmap can have areas which are 'see-through'. This simple form of transparency is eLXly basic, but lets you remove the background from pictures. To create a masked GIF, select Background Transparency when you export a GIF; any areas not covered by the selected objects are see-through in the file.

The effect of exporting the red star. On the left without background transparency - the green background and all the blue circle are exported. On the right, with background transparency - only the part of the blue circle covering the red star is exported.

Note that the actual bitmap is always rectangular even if it contains transparent areas. Also note that GIF transparency is very different from Xara LX transparency. Transparency in GIF means a simple 'on-off' transparency. Transparency in Xara LX means you can make objects semitransparent and apply graduated transparency.

GIF Interlacing

GIF files can be interlaced. This means when you download the image from the Internet it will be drawn on screen in phases as the file is downloaded.

How Many Colors Do You Really Need?

If your picture doesn't use many colors, try creating a bitmap that uses less colors. This will make it smaller and so it will download faster. If your bitmap is a masked (transparent) GIF, one of the colors is used for the transparency, so a two color transparent GIF has only one visible color.

Smooth Bitmap Edges

If your final bitmap has see-through areas, it will look better if the edges of the objects in the drawing are smoothed against the background color. See Changing the background. This will create a bitmap with very smooth edges.

To ensure you do not get any strange effects on the edges of your bitmap, align the outlines of objects with the edge of the bitmap you are creating. Do not select the background object when you export the bitmaps. You may find it useful to place the background object in a new, background layer.

In this example, in the left picture, the purple star was exported as a transparent bitmap with a black rectangle behind it. Notice how its edges look great on the black areas. In the right picture, the purple star was exported with a white rectangle behind it, notice how much better it looks on the white background.

Palette Options

You can create completely non-dithered images for Netscape and Microsoft Internet Explorer by using colors from the Browser section in the Color Gallery This gives you access to a full range of colors which will be displayed without dithering in these two browsers (as long as you do not use blends, graduated transparency or graduated fills).

You may find it easier to use the Color Gallery instead of the Color Line to apply colors as you can resize it to show all the colors in a small area.

Alternatively, always create use the bitmap using an optimized palette as this nearly always give exceptional results, but gives slightly larger files.

If you create your bitmap using an optimized palette it will look far better in true color (millions of colors) and high color (thousands of colors) screen modes. You may also find that it looks better in 256 color modes. You nearly always get better results by using an optimized palette, although usually the file is larger.

Pixel Units

Xara LX includes a Pixel unit. If you turn on the grid and use pixels for the page units (see Changing the page units) and for the Grid and Ruler units you can move objects by individual pixels and see all measurements measured in pixels.

Animations

For details on creating animated GIF files for the Internet, see Creating animated GIF files and the Frame Gallery Overview.