DIY

How do I... Compress a GIF or a JPEG graphic in Photoshop CS3?

<img src="http://t.cbsimg.net/i/z/200606/how_110x85.jpg" align="right" border="0" height="85" hspace="5" vspace="5" width="110" />When you prepare graphics for the Web, choosing the proper format for your graphics is the key to ensuring that your Web site loads quickly in client browsers, regardless of the end-user's connection speed. Despite the escalating saturation of broadband connections, it is always a good idea to get your graphic media down to the smallest size possible while maintaining the best quality. I'll show you how Adobe Photoshop CS3 makes this process simple and quick.

When you prepare graphics for the Web, choosing the proper format for them is the key to ensuring that your Web site loads quickly in client browsers, regardless of the end user's connection speed. Despite the escalating saturation of broadband connections, it is always a good idea to get your graphics media down to the smallest size possible while maintaining the best quality. I'll show you how Adobe Photoshop CS3 makes this process simple and quick.

Nearly everyone involved in creating or maintaining a Web site is aware that the two most widely used graphics formats for viewing in browsers and other Web-connected devices are GIF and JPEG. Yet outside of the Web design profession, very few people seem to know which format is appropriate for what kind of graphic.

If you don't own a copy of Photoshop CS3, you can download a fully functioning 30-day trial. This blog post is also available in PDF format in a TechRepublic download.

Small graphics

Start by saving the two graphics files below to your hard drive. The photograph of the woman getting a massage (Figure A) is a JPEG graphic at 100 percent quality -- that is, it has little to no compression. Likewise, the fake Northstar Publishing logo (Figure B) is a GIF format graphic at 100 percent quality.

Figure A

The low-compression JPEG graphic that we'll be using

Figure B

The low-compression GIF file

One of the biggest mistakes most people make is saving a graphics file in a format for which it is not really suited. This leads to graphics with poor visual quality, and worse, graphics that are not saved with a compression scheme that complements their content are more bloated in file size.

An easy way to remember when it is appropriate to compress a graphic as a GIF or a JPEG is this simple mnemonic:

  • JPEG - Just for Photographs and Gradients

JPEG stands for Joint Photographic Experts Group, and its compression scheme operates by dropping information from a graphic and then filling in the missing data with blurry artifacts based on adjacent colors in the picture. JPEG compression is best used for photographs and graphics that feature a lot of gradients.

  • GIF - Graphics with Flat colors

GIF stands for Graphic Interchange Format, and its compression scheme works by dropping colors from a graphic. The maximum number of colors a GIF can hold is 256, and any colors that are dropped in the compression process are gone forever and are not interpolated by the Web browser. GIF compression is best used for graphics that have areas of flat colors with minimal (if any) gradients.

Open the two graphics above in Photoshop. Select the window that has the massage customer and from the File menu, select the Save For Web & Devices option. You will see a large dialog box, as shown in Figure C.

Figure C

The Save For Web & Devices Dialog box
At the top of the dialog box, select the tab that says 4-up. This lets us compare the original photo to three potential compression schemes. We can set different levels of compression in the three new windows and see how the final file will appear and how much it will weigh. (Figure D)

Figure D

The 4up window will let you compare the results of different compression settings.
Click on the magnifying glass tool in the upper-left corner of the dialog box and click a couple of times in any of the four windows to zoom in. All of the views will update. If you need to, click on the hand tool and move the photo in any of the windows until you can see a close-up of the woman's face and some of the rose petals (Figure E).

Figure E

Zooming in and adjusting the view with the magnifying glass and hand tools
Here is where you can see the differences in the varying levels of compression. The first window in the upper left shows the original file. Click on the window immediately to the right and from the Optimization menu, select the JPEG option and set the quality to 100. Repeat these steps for the two views on the bottom, but set the JPEG quality for the lower-left view to 50 and the JPEG quality for the lower-right view to 25 (Figure F).

Figure F

Configuring the JPEG quality for the comparison windows

Look closely at each window, and you will see that as the quality level decreases, the number of compression artifacts increases in each photo. You can also see that Photoshop gives you the file size (weight in KB) of each version of the final compressed JPEG file. Here is where you must consider if you would rather sacrifice quality for file size, or vice versa.

The JPEG setting of 50 quality seems like a good compromise -- fewer artifacts and 23KB -- but let's see what our photo would look like if it were compressed as a GIF. Click the lower-right window to select it and from the Optimization menu, select the GIF option and set the colors to 128, as in Figure G.

Figure G

Setting the Optimization option to GIF
As you can see when you compare the GIF version of the photo to the JPEG versions (Figure H), if you were to save the photo as a GIF, not only would you lose color and detail, the size of the file would more than double, compared to the JPEG photo at 50 quality! This is why the rule of thumb here is always compress photos as JPEGs.

Figure H

Comparing a GIF compression scheme to a JPEG

Select the window in the lower left and then click the Save button at the top of the dialog box. Photoshop will then let you save a copy of the photo using your custom compression setup. The best part of this is that the original photo is left untouched at 100 percent quality, allowing you to compress and recompress the original graphic as much as you need to -- a handy, nondestructive feature.

Now that you are back in Photoshop, select the Northstar logo and open the Save For Web & Devices dialog box again. As you did with the massage photo, open the 4-up view, but this time, since this graphic is a flat black and white drawing, set all three compression views to GIF format. For the view in the upper right, set the Colors option to two. The view in the lower left should have a Color option of 16, while you should give the view in the lower right a Color setting of 256. Now, select the magnifying glass and zoom in on the spiral section a couple of times. Your dialog box should resemble Figure I.

Figure I

The Northstar logo in the Save For Web & Devices dialog box.

As you can see, the two-color GIF takes away too many of the gray colors to give us a smooth appearance to the curves of the graphic, while the 16-color GIF is nearly identical in quality to the original. Yet, it weighs only 5.4KB -- we have a winner! The view in the lower right shows that even though we selected a 256-color compression palette, there are really only 83 colors in the graphic.

But let's see what happens when we save a graphic that should be GIF file as a JPEG. Click the lower-right view to select it and from the Optimization menu, select the JPEG option and set the Quality to 50.

You will see that because you have applied a JPEG compression scheme to a graphic with flat colors, the JPEG compression artifacts are glaringly noticeable; giving the crisp lines a smudgy, dirty appearance. And the file size is double that of the GIF version! (Figure J)

Figure J

The effects of JPEG compression on flat colors

Select the lower-left window and save your new GIF file.

Files that should be GIFs and are instead JPEGs are the most common graphics errors to be found on the Web. But with the fundamental knowledge presented here, you have the means to save your site and your company plenty of bandwidth.

John Lee is a consultant specializing in design and illustration and a freelance technical writer. You can visit his Web site at johnleestudio.com.

34 comments
gdude
gdude

Thx great info

lindamcfddn
lindamcfddn

John Lee. Great. Well spoken and easy to follow. Thank you. Keep these tips a com'n! Rather "mini-turorials". I use CS3 and it's more powerful than a speeding locomotive and I'm in an open boxcar a mile down from the engine with no clue. Can you go over the layers again? You know, putting your client in front of nationl monument with a catch phrase (I know; Real Estate agents and their buy the Brooklyn Bridge thing, sheesh). Thanks again! Linda McFadden

dleippe
dleippe

The save for web tool is also available in Photoshop Elements versions 3 and later, if you don't want to pay for CS. Also, Irfanview will allow you to compress and/or resize photos for the web and it handles and converts just about any image file type. Irfanview is a free download.

adurkee
adurkee

Is there any reason not to use PNG files if you need various levels of transparency? I know the file size is a little larger but it seems to be vital if you're using a logo in front of a background image (unless you include that secion of the background in the foreground image... this only works if the image will be in the exact same location all the time). Are there any concerns I should be aware of (browsers not supporting png, for example)? Thanks.

fmang
fmang

Thank you, I've recently been hooked up with Photoshop and this came at the right time!

scotlee
scotlee

Nice information, thanks!

konservativ
konservativ

Is "Save For Web & Devices" what's left of it in PS CS3 extended?

DOWENS
DOWENS

This was very helpful as I use a lot of images for the web. You have equiped me with more wisdom... Thanks

namkan2006
namkan2006

Thank you very much for your very clear explanation of basic concepts of image handling.. Very useful article Keep it up.

groupavm
groupavm

pls mail me this comment. I am new on cs3 photoshop pls mail me some ideas. how i use photoshop cs3 my email id is groupavm@yahoo.com

BALTHOR
BALTHOR

I found the png file type to be the clearest.I think that when magazines ship their magazine to the printer it's in the PDF format.

rambrandt1234
rambrandt1234

How tautologically obnoxious this Mark Kaelin is when he panders his knowledge as useful. This is a perfect example. He appears to go into detail regarding the quality of a Web page graphic without even mentioning the resolution as the first consideration. After avoiding the meat (and he doesn't look like he would normally), he goes right for the potatoes using plenty of sour cream to make it look appealing and complete, but misses an opportunity to be a truly informative resource by not even mentioning the word "lossy" in regard to JPG, or the PNG file format at all. Of course, if you came to this forum for valuable information, relying on this writer's "knowledge" to enlighten you, and you, in fact, purchased a $500 graphics app for manipulating Web graphics without even knowing about resolution or PNG, than you deserve what you get.

Angel_Tech
Angel_Tech

I've used Fireworks for years and I think is one of the best when it's about compressing Image files to publish on the web, it has had that 'web tool' of CS3 for years.. but oh well.. now they all belong to the same company.. also there's plenty of freeware sw that do this job really simple (for those who dont care about perfection on the detail), specially for photos (digital ones).. I use PixResizer.. it gives you plenty of choices on what format you want to compress or reduce your image to. Cheers :)

hmt
hmt

Png's with alpha transparency will only work in IE7. There are some fixes but i never got any that worked...

egandb
egandb

Imageready was integrated into Photoshop CS3 Extended. You can still create Animations and compress as you used to be able to, it's just not as clear-cut as it used to be with ImageReady.

claire.simonson
claire.simonson

Imageready got folded into Photoshop, and since Adobe acquired Macromedia, apparently Fireworks is gone too (that was M's web-graphics knock-off of Photoshop). The landscape is always shifting....

igtddave
igtddave

Not just compression quality, but color depth can adjust the size of the file. 32-bit, 24-bit, 16-bit, and even 8-bit color can be used on jpgs. Gifs are automatically converted to 8-bit color upon export. The differences are hundreds of colors to millions+. When trying to decide what to use, think of an 8 count box of crayola crayons. If the graphic is made up of primary colors, go with GIF, PNG preferred. If you are looking at a 64 count box of crayons, go with JPG.

Spiritusindomit
Spiritusindomit

1) PDFs encapsulate image and textual data all into one file. Generally the best type of images to put into it are tiff files. PNG fail as they don't support CMYK. 2) PNGs look better than gifs and jpegs as they're lossless, and are really the only solution for transparency anymore, but they're also large if you use them incorrectly. It's important to pick the best format for the job. 3) magazines generally ship one of three filetypes: 1) Indesign 2) Quark Xpress 3) PDF PDFs are convenient, but if you want perfect results, you also include the source files, as it may be neccessary to adjust for different equipment (I.E., an image press will respond well to pdfs, and handle most errors without a problem, but a heidelberg QMDI will falter on some transparency issues). For the record on any who want to nitpick, ryobi and heidelberg autoplaters are the same thing. *IMPORTANT: Do not use save for web for print work, ever.

Dumphrey
Dumphrey

And a lot of it stays in that format all the way to the digital press (or digital plate setter).

iamdeirdre
iamdeirdre

In PS CS3, go to File, then "save for web and devices". Use the window that pops up to find a happy balance between quality and file size, then save.

Mark W. Kaelin
Mark W. Kaelin

Thank you for understanding and appreciating what we are doing here. I am not sure what has rambrandy1234 so upset, but I do enjoy his use of big words. :)

Mark W. Kaelin
Mark W. Kaelin

First, I want to make it clear I did NOT write this article. I am merely your humble host. John Lee wrote this How do I for us. He is a professional artist and knows what he is talking about. The point of the How do I is to show members how to do a particular thing in about 1000 words or so -- some details have to be sacrificed for readability. I cannot fathom what you find obnoxious, but to each his own.

Spiritusindomit
Spiritusindomit

Keep in mind who he's talking to here. If you start throwing out print and rendering terms, people get glossy eyed. It's not useful at all, but it's basics for low end people. That said, resolution doesn't matter on the web, as you're going to murder it to begin with. So long as you start at 72dpi, you're fine, and even then, still doesn't make more than a few pixel's difference.

alieninvader
alieninvader

Hey Rambrandt1234, I still understood the point of the article even without a technical explanation of JPEG lossiness. I was a product manager for Adobe for several years, have been a Photoshop user since Adobe acquired the product and I **still** didn't know this four-up trick. So, chill.

peadar
peadar

Lossy/lossless isn't related to "resolution" (either ppi or pixel dimensions). The main point of the article is that images with continuous color are suited to jpeg, images with flat color and sharp edges are suited to gif. Keeping an image

ddemoya
ddemoya

Dude, you don't even know who the author of the article is.

tdh2112
tdh2112

Huh! The title of the article that I read was "How do I....Compress a GIF or a JPEG graphic in Photoshop CS3?", not "Everything you should know about graphics on the web." I'd be interested in reading any article that you have written with a title along the lines of the latter. Please give me a link to it so that I may learn more about web graphics. I certainly didn't click the link that I received in my email thinking that, after reading the article, I would know all there is to know. If you know so much about the subject, please pass your knowledge along to those who need it. You could probably make some money doing it. Not everyone that wants to learn about a subject can just jump right in to learn everything immediately. Some need to learn a bit, work with it themselves, and then learn some more. Mr. Kaelin, please continue to write your informational articles, there are those of us that appreciate, and learn from them.

Giley
Giley

That's the same reason I am avoiding PNG at the moment. The idea of having a transparent background on a JPEG is good but only if it works universally.

Spiritusindomit
Spiritusindomit

Still exists, and is in production. They split half of image ready's functionality to Photoshop, and recommend using fireworks for the other half.

dave
dave

Among the variations of the GIF format, not always supported by all graphic authoring tools, are the palette selection. Think of the standard palette for a GIF with 16 colors (not 16 bit color!) as being a selection of the 16 crayons from a 256 crayon box which let you best approximate any of the 256 crayons in the box. This leaves no room for subtle shades or gradients of any particular color. 16 colors with a chosen palette allows the compression program to choose any 16 of the crayons from the box of 256 to best fit the particular graphic that is being compressed. This adds a few more bytes to the GIF for the color table, but allows a much better presentation for an image which uses only a few distinct colors, giving you a finer range of shades for those few colors. In some cases, you can even use a 16 or 256 color GIF in which the individual colors in the palette can be chosen from the full range of 16 or 24 bit colors instead of being limited to the standard 256 colors of 8 bit color. This amounts to custom manufacture your own personal set of 16 or 256 crayons customized just to allow you to best draw this particular image.

jkiernan
jkiernan

Maybe he hates Mr. Peabody. The way the web site's headers are laid out, it does appear at first glance that the hosts are the authors of TechRepublic's content.

specialfx63
specialfx63

Mr. Kaelin, Thanks very much for the information! It's concise, and on target for a specific item. One I just happened to need. We're starting up a web site for our small retail business, so graphics are a fairly new thing for us. I compressed a few images that I was having issues with, following the instructions, and it worked great! Thanks again.

Spiritusindomit
Spiritusindomit

1) Only reason not to use PNGs is they get huge. Small alpha images, icons and the like are fine. 2) IE 6 is a non-issue as it's been deprecated. If someone is still on it, that's their problem. If you really want to fix this, append the following markup to your containing object: style="background-color: red; style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image.png', sizing Method='scale');" Subnote: I find the fact that I can use markup and ecmascript here a little disturbing >_

Editor's Picks