Date: October 26th, 2007
can you buy viagra without a prescription
Author: John Lee
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 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.
