Optimize Your Graphics

Gary L. Simmons

rev 06/17/03

webwonks.org/WebBuilding/OptimizeGraphics.html

Home

Optimize Your Graphics!

Fresh from the fat farm to talk about reducing the size of your web graphics is our resident graphics guru, me. You can tell we don't pay very well here can't you? This Nugget O Knowledge will help you to reduce the size or your graphics using both PhotoShop and GraphicConverter. Smaller is better whether you are talking about a hypodermic needle, a pill, a gunshot wound or a cool graphic. Nothing blows greasier chunks than a long wait for a huge graphic. Most of us are on dial up modems and those of you on DSL's, Cable modems and T1's can just kiss our... well, I won't go there. Class envy is beyond the focus of this exercise and best left to liberal politics. What is important is to realize that the bulk of your audience will not

have the swiftest of connections. Have mercy. A word about file formats first. Use GIFs or JPEGs. GIF (Graphical Interchange Format) is a platform independent file format developed by CompuServe. These are best for bitmapped graphics like banners or other simple graphics with a lot of color blocks. JPEG (Joint Photographic Experts Group) is a file compression scheme that reduces the size of image files by up to 20 times. This is at the cost of slightly reduced image quality though. Use JPEG for photos or other complex color blended graphics. Stick with these two main graphics type for the web or "They" will come to get you. "They" will not be very happy to see you and "They" will most likely be wearing butchers aprons to keep "It" off of them.

In PhotoShop:
Cut the fat Use your Crop Tool to select only the portion of the GIF or JPEG you really really want to see. If there is a border around the graphic, hack that sucker off. If you want a border around it, use a single cell of a browsers table to frame the graphic. There is no download time that way. If you want to embarrass your friend with that stupid photo you have, select that portion of the JPEG that highlights that which makes him a dork, such as his Furbie costume, not the primo chick standing next to him. Once you select the portion of the graphic you want to keep, select "Crop" from your "Image" menu. Does it have to be actual size? If it was a large graphic to start with reduce the size a bit. Under your "Image" menu select "Image Size...". Make sure your "Constrain Proportions" check box is checked and experiment with changing the size of your image either in the Pixel Dimensions or Print Size text boxes. Keep the resolution at 72 pixels per inch. Reduce the color table Your GIF will have a CLUT, a color look-up table. You need to remove the unused colors because it is these extra unused colors that add bulk to the size of your images. Under your "Image" menu select "Mode" "Indexed Color...". You will get a dialog box, here you can reduce the number of colors used and therefore the size. Keep in mind you will need to do a lot of experimentation here to make sure that the changes you have made are consistent in both NutScrape Navigator and Internet Exploder or whatever the heck weirdo browser you have on hand but these two for sure. This can be a pain. Just keep changing the color depth until you have something you can live with. Keep in mind that dithering will make an image a larger size. Saving or exporting your work If you are working with a JPEG and you have used reduced the number of colors you cannot save it as a JPEG in PhotoShop. Just save it and convert it to JPEG later with GraphicConverter. Mmm K? If you are working with a GIF or converting to a GIF then from the "File" menu select "Export" and "GIF89a Export..." Here you can do a little more color adjusting such as selecting which color in the table is invisible to your browser. Sorry guys, it won't make clothes invisible. Selecting the "Interlaced" check box will cause the graphic to load in stages giving the viewer something to look at as it loads. Click "OK" and you will have a save dialog.

In GraphicConverter:
Cut the fat Use your Marquee Tool to select only the portion of the GIF or JPEG you really really want to see. If there is a border around the graphic, hack that sucker off. If you want a border around it, use a single cell of a browsers table to frame the graphic. There is no download time that way. If you want to embarrass your friend with that stupid photo you have, select that portion of the JPEG that highlights that which makes him a dork, such as his Furbie costume, not the primo chick standing next to him. Once you select the portion of the graphic you want to keep, select "Trim Selection" from your "Edit" menu. Be careful because you cannot undo this with out closing the file without saving and then reopening the same file. Does it have to be actual size? If it was a large graphic to start with reduce the size a bit. Under your "Picture" menu select "Size" and "Scale...". Make sure your "Keep Proportions" check box is checked and experiment with changing the size of your image either in the Dimension or Size text boxes. Keep the resolution at 72 pixels per inch. Reduce the color table Your GIF will have a CLUT, a color look-up table. You need to remove the unused colors because it is these extra unused colors that add bulk to the size of your images. Under your "Picture" menu select "Colors" and change it to a smaller color depth. The color depth it is presently at will be checked so you will know where to start. Better yet is the "Change Bit Depth Dynamically..." selection under the same menu. Here you will have a slider bar that will reduce the colors as you watch the effect real time. Very slick. Keep in mind you will need to do a lot of experimentation here to make sure that the changes you have made are consistent in both NutScrape Navigator and Internet Exploder or whatever the heck weirdo browser you have on hand but these two for sure. This can be a pain. Just keep changing the color depth until you have something you can live with. Keep in mind that dithering will make an image a larger size. Saving or converting your work. You are in GraphicConverter buddy, save it as whatever you want it to be, JPEG to GIF or back or PICT or BMP to your Grannies hinney. GraphicConverter can do it. Just pay attention to the options in the "Save As..." dialog. Remember now, for the web, JPEG or GIF formats only.

In Adobe ImageReady:
Criminy Awww hell bud what is there to tell you?? Just drag and drop your graphic on the "Convert to GIF" or "Convert to JPEG" drag and drop apps and everything is done automatically for you better than you could possibly do yourself after 2 days of screwing with it!! No kidding, this is the way to go. It will optimize your graphics for both NetScape and Explorer. You can even do it one handed if that is the kind of graphics you are working with.

In General:
The Bottom Line Almost all computer monitors are 72 pixels per inch and will be for a long time. Always make your web graphics that resolution. JPEG Format - (Joint Photographic Experts Group) Use this format for images that are photographic, have gradients, or gradual color changes. The JPEG reduction formula works best to reduce the size of these images while maintaining a look that is truer to the original image. JPEG does not produce images well that have blocks of color or lines or shape with sharp edges. Visual artifacts occur around the edges of sharply contrasting colors and can be distracting. JPEG reduction throws away visual data in order to reduce the size of the image. You cannot retrieve this data later. GIF Format - (Graphical Interchange Format) Use this format for images with blocks of a single color, sharp lines or edges. GIF encoding does not handle gradual color changes well and will add distinct bands to a color or shading gradient. With the GIF format you can more closely dictate the number of colors used in an image. The fewer colors the smaller the image because a color table (CLUT) containing the colors is included in the GIF image. Reduce the number of colors used as much as possible while avoiding removing too many and causing banding and dithering. Dithering is the mixing of two pixels such as yellow and blue to create a shade of green, the result being a grainy looking image. GIF compresses images best if they have long continuously-colored pixels arranged horizontally. For example these two images have the same dimensions. One with horizontal stripes and another with vertical stripes yet look at the tremendous difference in the file sizes of the two when compressed with the GIF codec!