A new Xara user recently posted in the Xtreme Conference asking why his web page creation program did not accept Xara's *.XAR file format. Of course the friendly and helpful older forum members provided the correct answer, Export to one of the file formats supported by the Web: GIF, 8-bit PNG, JPEG or SWF (Flash ).

Your editor (that's me) thought well surely this must have been covered in one of the Workbooks. Wrong! Oops. Not sure how something this important could have escaped my notice. I'll do my best to clarify.

The World Wide Web (www) was developed to make content over the Internet as accessible to as many people as possible with support for all computer platforms. Certain protocols were established and certain file formats for web graphics were approved. There are dozens and dozens of image file formats, but the formats listed in the first paragraph are the ones approved for use on the web and supported by most web browsers (such as Firefox and Internet Explorer).

Another question that comes up often in the forums is what file format is best? Good question. In the three examples shown above, you could use GIF or 8-Bit PNG, which gives you 256 colors to work with, or JPEG , which supports up to 16.7 million colors, give or take a few. One might expect that JPEG would create a much larger file size. But this is not always the case. Each of these file formats uses a compression scheme to keep the file size low.

For my money, I would use GIF or 8-bit PNG for the first two examples and JPEG for the second or third examples. But it is not always easy. So we'll look at the export process and then the results

Select your graphic and then select Export from the File menu.

An Export dialog will appear with a list of file types shown above. The formats highlighted in green are ones you can use for the web. We'll cover PDF and Flash a little later on. Pick a file format and then click Export.

NOTE: The Xara *.web file format used to be a scalable graphic format (similar to Flash's *.swf format) that was perfect for displaying Xara's vector images on web browsers that had the Xara plug-in to view these files. Xara has not supported this file format for some time now but hopes to support it again in the future.

 

For this example I have selected JPEG and set the JPEG Quality slider setting in the Options tabbed section to 70%. (0% is total compression and 100% is no compression. A setting between 60-90% is best).

You can preview the image at different settings in the preview window. As you change the settings the file size changes to reflect the difference. In the example above the file size is 36,630 bytes or 36K. Click Export and your file will be saved.

Here is the result of all three examples saved as a JPEG image with 70% compression. The gradient fill in the second image and the text and photo in the third image all look pretty good. But the first example with the solid green background shows why JPEG is not good for solid fills. The green is all lumpy and the text is not sharp. So your editor's rule of thumb is if your graphic has areas of solid color, red is the worst, do not use JPEG.

I refer to 8-bit PNG (256 colors or less) to differentiate from PNG TrueColor (24-bit color—16.7 million colors, or True Color + Alpha, 32-bit color with 8 bits of color for transparency).

The 8-bit PNG format is very similar to GIF which is also 8-bit. Both are supported by all current browsers though in the early days of the web PNG was not supported by all browsers.

When you export a bitmap image, Xara displays two preview windows. You can use these side-by-side windows to test number of colors (16 colors vs 256 colors), Error Diffusion Dithering, and other related things. In the above example I have auditioned two file formats, GIF and PNG.

One of the problems with 256 colors is gradient fills often show banding which you can see top right. On the left I used Error Diffusion Dithering, which smoothes the gradient but which also creates a larger file size, though in this case only about 3K which is not a big deal. The PNG file on the right has no Dithering and you can see the banding.

GIF and 8-bit PNG are very similar file formats. PNG creates a slightly smaller file size than GIF where the same settings are used.

NOTE: In the screen shot shown above, the wine glass icon enables and disables the transparent background option. When the icon is in the down position transparency is enabled.

In the example above all three samples were exported as GIF (left) and PNG (right). The GIF image has Error Diffusion dithering which is most noticeable in the gold gradient fill. Error Diffusion smoothes out the gradient on the left while the banding is very evident on the right. The text on the photograph is much cleaner than on the JPEG example and considering the palette is restricted to 256 colors, both the GIF and PNG images present a very clean and colorful photo image. Also, notice how clean the green background is on the top example and how crisp and sharp the text is.

While the photo on the bottom looks pretty terrific as a GIF or PNG at a bigger size, the file size will be much larger than a JPEG. So for a larger photo I would recommend JPEG unless you have areas of solid color.

Another two options are PDF, which is perfect for documents to be viewed on the web, and SWF, the Flash scalable image file format.

When you select the Flash *.swf export option the dialog above opens. The default setting is SWF6 because it is installed on most browsers. SWF8 supports more features but may require the visitor to download an updated Flash plug-in filter. Flash files are exported as vector images and as such can be scaled in the browser by zooming in or out. But Flash does not support Xara's bevel or shadows, so if your file contains these things, Convert to Editable Shapes first to convert the bevels or shadows into bitmaps. The best use of Flash is with non-bitmap vector objects. This results in a very sharp image and a very small file size.

When you view a Flash *swf image on the web with the Flash plug-in filter, you can right click on the file and zoom in very tight. The tiny 2pt text shown here is readable only when you zoom in, and it is possible to zoom into the very words themselves without losing any detail or sharpness.

Here is the actual Flash banner. Right click on the image and select Zoom In several times and you will see the how razor sharp the very tiny type is.

If you have any more questions, refer to Xara's excellent HELP files.