Xara Webster - Creating JPEG Files

GIFs and JPEGs

GIFs are best for graphics produced by an illustration package such as Webster unless you use complex color graduations and shading. It is particularly suitable for simple graphics with only a few colors. JPEGs are best for photographs and graphics with complex color graduations. The JPEG format uses 16million colors (GIFs have a maximum of 256 colors) and so graphics with a lot of colors look better in high color screen modes. However these are only recommendations - you may need to try both formats to find which is best for your graphic.

Progressive JPEGs

This is similar to interlacing in GIFs. That is, a low resolution image is loaded quickly and then detail is built up as more of the file is downloaded. This is particularly useful for large files which can take some time to load over a slow web connection.

Progressive JPEGs are relatively new and not all browsers support them. Latest versions of Netscape Navigator and Internet Explorer can load them. The image below is a progressive JPEG which we've included so you can check whether your browser supports this format.

(the left-hand image is a normal JPEG, the right-hand image is a progressive JPEG)

JPEG Quality slider

JPEG format compresses files by discarding fine detail. (The technical term is JPEG is "lossy".)

Because detail is lost from the file, you should try not to JPEG compress a JPEG format file. The extra loss of data can be noticeable. If you have to JPEG compress a JPEG file use a high Quality setting.

Making JPEGs download quickly over the Internet

JPEGs compress the data in the file so the complexity of the graphic matters more than the physical size. A simple graphic with large areas of flat color compresses very well. Complex shading and lots of colors compress less well. These are things to consider as you create your graphic.

When you save the JPEG:

Export the bitmap at 96 dpi, the resolution of the monitor screen on a PC. Saving at a higher resolution increases the file size without increasing quality.
Try different Quality settings. The lower the Quality setting, the more detail is discarded. At low settings this detail loss may be noticeable and you need to re-export at a higher setting. We suggest saving several versions of the graphic with different settings and then viewing the results in a web browser. Only you can decide the best compromise between file size and quality.

Checking the saved file in a browser

The easiest way to check the graphic is to drag-and-drop the saved file onto a browser window. This loads the graphic and displays it in the window. This method is simple to use and lets you quickly choose between several different files.

The IMG HTML command

If the IMG command includes the width and height of the graphic, the browser can load the text first and than load the graphics. This doesn't load the page faster but it lets the viewer start reading the text whilst the graphics download. It just seems quicker.

The IMG command should look like this

_______________