One of the most frequently asked questions is why do my bitmaps have a visible edge? On this page I'll try to explain why this happens and how you can avoid these visible edges plus some other interesting tidbits relating to Xara's anti-aliasing (smoothing) features.

The three square cow images on the top row are fractionally different in width. As you can see, the first cow image is 150 pixels while the other two images are fractional pixel amounts (less than a whole pixel). The three images on the bottom show how the edges look when placed over a solid colored background on a web page. In addition, each image has a small triangular section enlarged 300% in the upper right hand corner.

The cow that is in even pixel amounts (150 x 150) has a fairly clean edge. The next two which have fractional pixel sizes show a bit more of an edge. Especially the image on the right.

The reason for this is that bitmaps cannot have fractional pixels. A pixel is a specific size and cannot be more or less than the size it is. So in the case of the 149.7 pixel square, Xara has enlarged the image to the closet pixel amount, 150 pixels. It has also Anti-aliased (smoothed) the edge of the square to fill out the extra pixel. And since the image was exported on a white background, Xara has smoothed the edge to white creating the noticeable outline.

To avoid this happening when you export an image to a bitmap format, make sure your selected image is in even pixel amounts. Also, exporting the image over a background the same color was onto which it will be displayed, will lessen the visible edge as well. And make sure your units are set to pixels.

GIFs and 8-bit PNG images with transparent backgrounds are another source of frustration for new users who usually ask why their image has a white fringe such as that seen in the lower left corner in the illustration above.

The cause of this is once again, Anti-aliasing. All bitmap images are made up of a grid of tiny squares called pixels, which can only be one color per pixel. An object like a circle or a thin vertical line has jagged edges when represented on a bitmap. Xara Anti-aliases these edges by creating intermediate pixels of lighter or darker colors to give the impression of a sharp edge. And Xara uses the background color to anti-alias to. If the images are placed over another colored background, such as the black on the top right, then Xara anti-aliases to that color.

In the two examples above the images on top were exported as GIFs with transparent backgrounds, over white and over black. When both images are placed over a black (or any dark background) the white pixels are very apparent while the black pixels blend cleanly into the black background.

So, export your objects, text, etc., over a background or colored rectangle, that is close to the color over which they will appear on the web page. If you are using a colored rectangle, select the objects, text, etc. but do not select the colored rectangle when you export your image.

Lines that are less than .75 points in width (.75 points = one pixel) are Anti-aliased to a lighter color to create the impression that they are actually thinner. This is necessary since a pixel is the smallest width that can be displayed in a bitmap. In the two examples above, I tried exporting the lines at 16 colors and 256 colors to see if it made any difference. As you can see, it did not.

< LAST PAGE       H   1   2   3   4   5   6       NEXT PAGE >