By now you've probably heard the terms GIF and JPEG tossed around a bit. If not, it's time to understand why one is used over the other, and why the rules aren't as strict as they seem. Typically, you can assume that you should save photos, large files with gradients (places where colors blend into one another), and highly detailed colorful images as JPEG files.
On the other hand, you usually save images with solid blocks of color, line drawings, transparent images, and animations as GIF files. Experimenting will show you that, occasionally, you can cross the line between the two. Sometimes you need to try them both to see which will look the best for that particular image and which will give you
the best compression (reduce the file so it loads faster on the page).
If you look closely at the GIF file in the first row, you will see that it is pixelated in places-- it's spotty. The JPEG file does a much better job at preserving the image. In the second row, the JPEG has made the large blocks of colors swirly (a new technical term). The GIF image handles the solid colors better. What Do All Those Letters Mean?
JPEG stands for Joint Photographic Experts Group. It is a lossy compression technique, which means that it eliminates redundant information in order to compress the file into as small a space as possible without losing its integrity. Because you will lose data when you save an image as a JPEG, you should not open and resave JPEGs. Losing data
with each save will degrade your image's quality. Always work with a copy so that you can go back to your raw image if you want to make more changes.
GIF stands for Graphics Interchange Format. With GIFs, you are restricted to 256 colors or less, unlike JPEGs, which allow millions. If you look closely at a GIF image, you may see a bunch of dots in certain areas. This is due to "dithering." Since GIFs only work with a certain number of colors, they shift the dots around from the colors they have in order to create-- to fake-- the colors they don't have.
It is not a good idea to save an image in one format and then again in another. Keep originals of your images so that you can go back to make changes without crunching already crunched images.
A lot of factors contribute to an image's file size. By following these steps, you can reduce your images' size and lessen their download time. Before you play with any attributes at all, make sure your image is no larger than 72 dpi. The resolution of your monitor is 72 dpi and higher resolutions are redundant.
Don't make your image any larger than it has to be. Larger image size adds greatly to the file size. It's better to show your visitors a smaller image than have them abandon you
while your large graphic is still trying to download. Use fewer colors. If you are creating
the image from scratch, use a set palette of colors. The fewer colors, the smaller the size.
Graphic Crunching Utilities
Gif Cruncher is a website that offers an online GIF and JPEG cruncher. You can either use an image already on the Web, or browse to find the image on your hard drive. The website then offers you several versions of your image with different color depth and dithering levels, providing you with size information on download time and crunched
percentages. You don't have as many options or as much control as you would with higher-end programs such as ImageReady, and a 28K modem will show you how Slow
it can be. But for free utilities, these are pretty good. JPEGCruncher GifCruncher
Adobe offers a similar online graphic cruncher that allows you to compare JPEG and GIF, or to choose the quality of the file to crunch. You are also provided with an estimated upload time.
If you are interested in trying out an inexpensive graphics program, try Smart Saver Pro by Ulead.
If you want to get fancy, get Adobe's ImageReady, which only comes bundled with PhotoShop 5.5 or higher, or Macromedia's Fireworks. Fireworks has more options, but they are reflected in the $299 price. You can try these out by downloading a free trial version.