Professional Documents
Culture Documents
GIF Vs JPEG PDF
GIF Vs JPEG PDF
GIF Vs JPEG PDF
by Taz Tally
Conventional wisdom states that a JPEG should be used when saving a contone image for use on the WWW.
The Rationale
While there are a number of graphics file formats that are Web appropriate, JPEG and GIF remain our staples, even while some formats such as PNG are
more flexible. The reason is simply one of compatibility: Nearly all versions of all browsers support GIF and JPEG.
Conventional wisdom
Conventional wisdom has dictated that we use GIF (Graphic Interchange Format) for flat-colored images, such as logos or other simple graphics, like screen
grabs of cartoons, and then JPEG (Joint Photographic Expert Group gheese what a name!) for contone (continuous tone) images such as photographs.
The reason for this standard division of labor is that JPEG supports more colors (16.7 million with 24 bits per pixel), while GIF is limited to maximum of 256
colors/shades of gray with 8 bits per pixel. (Although, as we will see, we can save GIFs with fewer than 8 bits/256 colors/shades of gray.) Images with many
thousands of colors tend to become posterized when saved and displayed with 8 bits or less in GIF format.
3) Click on the Image Size tab along the lower-right side of the palette area in the Save for Web dialog.
4) Input the dimensions (in pixels) that you would like your final Web image to have under the New Size category of the Image Size tab (here 300 pixels x
225 pixels).
5) Select a sharpening mode from the Quality pop-up menu in the Image Size tab (here Bicubic Smoother my standard for Web images).
Note: I typically use less and smoother sharpening for my Web images compared to the sharpening I apply to print images.
6) Click on the Apply button in the bottom of the Image Size tab. Your image will resize in the Save for Web preview area.
7) Click on the 2-Up display tab in the upper left of the Save for Web window. This will show you the original and the new image with current settings.
8) In the Preset section along the right side of the dialog, select GIF from the first file formats pop-up menu on the left.
9) Still in the Preset section, underneath the GIF pop-up menu you just selected in the previous step, select Adaptive. This will instruct Save for Web to take
grayscale values from the image.
10) Under the Adaptive pop-up menu in the Preset section, select Diffusion (it should be selected by default).
11) To the right of the Adaptive pop-up menu, click on the Colors pop-up menu. Start reducing the number of colors (which will reduce the bit-depth and
file size of the image). While you reduce the colors/bit-depth, watch your images in the 2-Up display. Keep lowering the colors/bit-depth until the image
shows visible degradation. I typically take my grayscale image down to 32 shades of gray (colors), which is a bit-depth of 5, before I see any noticeable
drop in image quality.
Note: You can track the file size of the image in the data display below the preview image.
12) Click Save twice to complete the GIF image-creation process. Check the difference between the 8-bit and the 5-bit image onscreen. Do you see any
differences?
Your monitor is typically far more forgiving than a printer when displaying reduced bit-depth images. This is an effective way to reduce the file size of some
images while avoiding the JPEG-related posterization.