Saving and Exporting

Saving a graphic file is the same as saving any other digital file; the saved version is in the same format as the original. Exporting, on the other hand, allows you to change the file format (you can export a graphic as a .jpg, .gif, .png, or any other file format supported by your editor). When you choose to export, you may also be able to choose the amount of compression applied to the image file, trading off file size for image quality. This section of the tutorial takes you through some common file export dialogues.

An uncompressed file (.bmp, .tiff, .pict) will be quite large; these are the formats often used by scanners, screen capture programs, and the like. These formats contain all of the data associated with each picture element (pixel). But in most images, some pixels will have the same values (an expanse of blue sky, for example, may contain hundreds of identical, or nearly identical, blue pixels). Compressing an image takes advantage of this redundancy. But different formats compress differently.

.GIFs, for example, compress images by looking at and comparing horizontal rows of pixels. The compression scheme used in .GIFs (called LZW compression) is lossless and works best for images with large areas of the same color. GIFs can only handle 256 colors (although they do allow one of the colors to be set as transparent, creating some very useful effects). Line art, text, and simple animations work well in the .GIF format.

.JPEGs, on the other hand, supports millions of colors. But the compression used is lossy. Most graphics editors which support .JPEG allow the user to set the amount of compression used (often expressed as a "quality" percentage). 75-80% quality is usually not noticeable online, and creates a much smaller file. .JPEGs are best for photographic images, or anything which uses more than 256 colors.

.PNGs are a new format, developed after Unisys said it would enforce its patent on LZW compression. PNGs compress across rows and columns of pixels, and use a lossless compression scheme. PNGs can display more colors, allow better transparency, and generate smaller file sizes than .GIFs or JPEGs. PNGs are best for complex web graphics.

(For more information, see the Yale Library Pros and Cons of Image Formats page.

Examples

Let's take a large scanned image (in this case, the temple.jpg from earlier). The original, high-quality .JPEG was 352K.

To save this as a web-ready graphic, we'll need to reduce the file size. We can do this by compressing the file.

Open the file in your graphics editor

In Fireworks®, select Export Preview from the File Menu
Choose .GIF as the export. Notice you have various color palette options. Here I've used the default web palette (128 colors).
or choose .JPEG   Notice that you can select the level of compression (I've selected 80%). I've also selected "Progressive"—this allows a file to display more quickly online(it will begin to display while downloading). It also creates slightly smaller files.
Or choose PNG With this format, you can choose 8, 26, or 24 bit color. The 8-bit color palette is the same as that used for the GIF (Web adaptive 128 colors)

Here's the file as a .GIF (128 color web palette) (file size 67K)
And as a .JPEG at 80% (millions of colors) (file size 32K)
And as a .PNG (128 color web palette) (59K)

Comparison of different levels of compression (text and graphics)

Artifacts are areas where the colors look "blocky" or broken. This undesirable effect is most noticeable in the GIF 126-color Web Palette