 |
|
|
 Previous Page
|
| How to Optimize Your Photos and Graphics |
Learn About File Formats Used on the Web |
|
 |
|
The last step in optimizing your graphics is to save them using a file format that compresses the image and reduces
file size. Uncompressed bitmaps can be quite large and there are three common file formats used on the web
that can shrink your file size considerably. GIFs, JPEGs, and PNGs are all common compressed file formats.
Lossy vs Lossless
Compression can be lossy or lossless. Lossless compression doesn't lose any image data. GIFs and PNGs are
lossless file formats (although GIFs lose color depth). Lossy compression results in the loss of
image data every time the image is saved. The JPEG file format uses such a lossy compression method.
Each file format has its strenghts and weaknesses. Learn more about each file format below.
|
|
GIF
GIF stands for Graphics Interchange Format, a file format developed by
Compuserve-Unisys. It is one of the main graphic formats displayed
by web browsers. GIFs store bitmaps in patterns of indexed color
(256 colors or less) using a special algorithm called Lempel-Ziv-Welch (LZW).
Using this algorithm, gifs compress the raw bitmaps into smaller file sizes.
GIF vs JPEG
Because of their limited color depth, GIFs are better suited for images made up
of solid colors such as logos, icons, and buttons.
JPEGs are better suited for photographs and images with fine gradations of tone and color.
|
|
|
GIF - 1.2 KB
|
|
JPEG - 1.2 KB
|
|
A logo saved as a 256 color GIF image.
|
|
To get a file size as small as the GIF version of this logo, we had to use a highly compressed JPEG. The result is not
very pretty.
|
|
GIF - 2 KB
|
|
JPEG - 2 KB
|
|
To get a file size as small as the JPEG version of this photo, we had to radically reduce the color depth of the GIF version.
|
|
A photo saved as a JPEG image with Normal Compression.
|
|
|
Optimized Color Depth
If the image you are trying to save has more than 256 colors (like a True Color JPEG),
FotoFinish will prompt you to convert your file to an optimized palette.
The optimized palette is the minimum number of colors (up to 256) needed to preserve
the original look of the image.
Choose Continue on the GIF Options dialog and FotoFinish will
automatically save your image using a diffusion dithering pattern
and an optimal color palette for your image. To manually convert your image
to the appropriate color depth, click on Convert and you will have the
option to choose a dithering pattern in FotoFinish's Change Number of Colors dialog.
Transparent GIFs
When saving a file as a GIF, you also have the option to set the background
color as transparent. The background color refers to the color set on the
Wizard Window under background not necessarily the
actual background color of your image. To set the background color to
transparent, check the box next to Save as Transparent in the Save as dialog.
|
|
GIF conversion prompt
Choose a dithering pattern in the Change Number of Colors dialog
|
|
JPEG
The JPEG (short for Joint Photographic Experts Group) file format is the
best way to compress photographs for web publication.
JPEGs store images in 24-bit color (GIFs only use 8 bits or less) allowing you to save millions of colors.
Consequently, JPEGs are better suited for photographs and images with fine gradations of tone and color.
Most digital cameras also use the JPEG format to store images.
JPEG Compression
JPEGs use a compression method
that sacrifices image information to reduce the file size called "lossy" compression.
FotoFinish offers three levels of JPEG compression: Fine, Normal,
and Compact allowing you to trade-off image quality and file size.
You will have to experiment which one works best for
the particular image you are trying to save. In general, the more you compress an image the more
likely you are to create visible artifacts, unwanted distortions in the image.
Because JPEGs use a lossy compression, every time you save an image as a JPEG, some
of the original image data will be lost even if you use the Fine setting. It's best to keep your images in
a lossless file format like PNG while editing them, and only save to the lossy JPEG format as a last step.
In general, it's a good idea to avoid multiple saves using a lossy compression like JPEG.
Save Multiple Copies of Your Images
When you prepare an image for printing, you want a high quality image with high resolution.
However, when you publish that same image to the web, you need to reduce its
size by optimizing and compressing it. It's a good idea to save at least three separate copies of
an image: the unretouched original, one version for printing, and one optimized version
for e-mailing or publishing to the web.
|
|
Choose a compression level when saving JPEGs
A photo saved with a Fine setting.
File size: 13 KB
A photo saved with a Normal setting.
File size: 6 KB
A photo saved with a Compact setting.
File size: 5 KB
|
|
PNG
When publishing to the web, the PNG (Portable Network Graphic) file format can be a great alternative to GIFs and JPEGs.
PNGs compress bitmaps without loss and also support transparency and 24-bit (True) color.
You can save a photo-quality image as a PNG without losing image information
(like you would with a JPEG) or color (like you would with a GIF). The only drawback
to using PNGs to optimize your images is that not all web browsers support the file format fully.
For an updated status of PNG support by common web browsers click here.
|
|
|
