JPG or GIF: Which to Use ?

About Saving Images in JPG and GIF Format: JPGs are wonderful for saving photos and complex graphics that have many colors and lots of shading. You can leave your graphic in 16 million colors, rather than having to reduce to 256 as you do for gifs. Your file size for complex images will often actually be smaller as a jpg than as a gif. The only drawback with jpgs is that you must compress (lose) at least 1% of your clarity each time you save and re-save the graphic. You cannot "undo" this compression. That means it's best to save your original in the .psp format, then make a copy and save the copy as a jpg. That way you still have an original (psp) that has full detail. In PSP5, when you select .jpg as the file format for saving a graphic, you'll notice a little button at the bottom of the save dialog that says "options." Click on it. There you will see you can choose between two styles of saving, progressive and standard. Progressive means the file will start showing on a web page fuzzily, then clear up gradually to the final graphic. This SEEMS to load faster than the Standard, but it actually takes longer....it just gives the viewer an idea of what's coming sooner than the Standard format, which downloads more slowly but with the clarity already in place. Since the progressive format also creates a larger file size, I prefer using the Standard format on my own pages. The other choice area is indicated by the slider bar where you can choose the amount of compression to use. The lower the compression (ie, 1%) the clearer your saved image--in this case, you would still have 99% of your original detail in the graphic. The higher the compression, the poorer your saved image will look--but the file size will be much smaller than the 1% compressed file. 30% is about the most I've ever compressed a file, and I very seldom use that much. At 50% most graphics are too fuzzy to be useful at all. The more you compress, the more the colors will "smear" into each other and sharp edges will blur. The "art" of using the jpg format is deciding how much clarity you can (or are willing to) sacrifice in order to gain file size savings. Some images are not acceptable (to me) even at 5% compression; others stand up well compressed much more (and resulting in a much smaller, thus faster loading, graphic). I believe there are programs that you can use to help you choose the amount of compression, but I usually "do it myself." What I usually do (especially with large--over 200x200pixels--images) is create my graphic in PSP5 and save the original as a .psp file. Then I make a few copies of it. I save one copy as a gif (this one has to be reduced to 256 colors), then the rest as jpgs--one at 1% compression, one at 5% compression, one at 10%, one at 20%, one at 30% (these are the numbers I use by choice; you can try others if you want). I use the same main name for each version, but add the number to it so I know which is which (i.e., daisy1.jpg, daisy5.jpg, daisy10.jpg, etc.). Now open Windows Explorer and look at the image information there. The file size indicated there is the actual graphic's size. The file size information you see in PSP5 itself includes extra information about creation of the graphic and is often 3, 4, even 5 times as large as the actual graphic--so always check Explorer to see what the web download size of the image will really be. Then I open each of these versions in my browser to compare them. Often the jpg at 1% is just too large a file for practicality on the web. Unless you're specifically making an art image for a gallery, you don't want to go over 50k on a page (and that's pushing it sometimes!). On the other hand, most of the time the image at 30% is too "smeared" looking, with what are called "artifacts" of one color blurring and swirling into another, especially in any large areas of solid color. Sometimes the gif looks better than any of the jpgs; sometimes the gif has just lost too many colors to look right. This is where your eye (and acceptable file size) must give you the answer as to which to use. When I've made my choice, I usually delete all versions EXCEPT my original .psp file and the one .jpg (or .gif) version I like. You must compress at least 1% (at least in PSP and any other program I've worked with) to save as a jpg. Each time you open that image in a graphics program (PSP) afterwards, you must remember to simply CLOSE it to keep it from degrading more. If you hit "save" instead, you will lose another percentage of clarity (amount depending on what you have set in the "options" at that time). A few times of doing this can render your image unrecognizable. Aaargh! That kind of accident is why I recommend always saving an original in the .psp format before saving a copy as .jpg (or .gif). (If you need to make any changes or revisions, do so on this original, then save a copy of the changed original as your .jpg file.) Often, when people are concentrating on file size (or haven't found the options button!), the jpg compression option is set too high for a specific image, somewhere between 15 and 30%. This is especially true of images that contain text on a solid background ,where you can often see the artifacts around the lettering. Some color combinations, such as red lettering on white background, are especially vulnerable to creating artifacts. Often you will find this combination unsatisfactory for .jpgs, even at 5% compression! If you must use jpg (because other parts of the image are complex or need high color resolution) you might experiment with making and saving copies at different low compression rates to see what it takes. You might have to settle for something less than satisfactory, change to .gif, or even alter some of the (offending) colors to tone down the artifact production. GIFs don't have this problem (and you don't lose any detail saving as .gif). That's one of the reasons gifs are much better for saving images with large areas of single colors and those with sharply defined lines and edges. You can also save gif images with a transparent area , whereas you cannot do so with jpgs. You can also use gifs to create animations, where you cannot do it with jpgs. I always leave my GIF option settings on 89a and Non-interlaced. That means any gif I make can contain a transparent color or be animated. An added advantage of the GIF format is that you can use a couple of other means to reduce your file size to the minimum. Sometimes this is a critical consideration! Check to see the number of colors used on your image. If it is less than 256, you can specify the exact number in PSP by choosing the Colors: Reduce to X colors option. Also, if you want to eliminate dithering in your .gif web images, you can use the web-safe colors. Dithering increases file size and frequently creates unwanted patterns in solid areas of your graphic. There's lots of information available about the what and why of web-safe colors, so I won't go into detail here. What can help YOU in saving your images is the fact that PSP 5 has a built in palette that will instantly transform your image to web-safe colors. Sometimes the changes are not acceptable; but most of the time the images are very similar, if not identical, to your original color scheme...shading just a "hair" different here and there. If you want to explore this option, just have a copy (yes copy...never experiment on your original!!!) of your image up in PSP5. Now press Shift+o (letter o). This brings up a dialogue box with "Safety.pal" already in it. [Note: if you have saved or imported other palettes, they will be in this dialogue box also; but the one you want is this one!] I usually leave "Nearest Color" set as my default in the 3 choices near the bottom. Now simply double-click "Safety.pal" in the window. Voila! Your image is now "browser safe!" If you save it now, it will look the same on any browser, whether the viewer has it set to 256 colors or higher resolution. It's a good thing to remember for buttons, backgrounds, anything that is viewed frequently by a variety of browsers. I have seen several corporate sites lately where the designers seem to have forgotten this...or assume that everyone is viewing in high-color. The dithering patterns can be very distracting! A "safe" gif can be a real plus in some situations. Use your judgment! But with gifs you can only use 256 colors at most; that can be a real roadblock with some images. Sometimes a gif version of an image will be larger than an acceptable jpg version, sometimes it's the opposite. Each image is unique, so comparing various versions is still the best way to decide which format, and how much compression (if jpg), to use. I hope this "lesson" on choosing and using file formats for web graphics is helpful. Let me know if you have any more questions about it, okay? If you have comments, questions, or would like further information, please sign my guestbook or contact me at my e-mail address. Thanks!

5acreart@usa.net

All original graphics on this site
Copyright 1999
by Diane at
Five Acre Graphics