GIF vs JPEG, Grafika
[ Pobierz całość w formacie PDF ]
GIF vs JPEG
by Taz Tally
Web Contones are NOT Made by JPEG Alone
Sometimes GIF is a better choice than JPEG even for Contone Images
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.
The problems with JPEG and GIFs
One of our key goals when creating Web images is the pursuit of small file sizes and increased display speed. This pursuit can display quality problems, as
two of the key methods used to reduce file size (bit-depth reduction and compression) involve loss of image data. While JPEG format supports many more
shades of gray/colors than GIF, it also employs a type of compression, known as “lossy” compression, which actually removes data from an image though
averaging of pixel values. GIF alternatively uses “lossless” compression, which does not remove image data, but instead, depends more on bit-depth
reduction to accomplish a reduction in file size. So in the pursuit of small files each format degrades images in different ways. GIF reduces shades of
gray/colors, while JPEG removes image data through lossy compression. Both can result in posterization. You'll want to evaluate your images based on
which format will do the least damage, while providing you with a small enough file size to be used effectively on the Web. Hence it is okay to challenge the
conventional wisdom of using JPEG for contone images, if its use leads to unsightly JPEG compression-related posterization (see the Fig 1).
The GIF Contone Alternative
If you are unhappy with the look of your JPEG images, and you are saving a grayscale contone, or a color image containing only a few colors, try the
following:
1)
Open the image you would like to prepare for use on the Web (here a grayscale image).
Note:
Grayscale contones are particularly good candidates for this technique.
2)
Select the Save for Web command: File>Save for Web.
Note:
It is not absolutely necessary to manually create a copy of your image, as the Save for Web tools will make a copy for us, leaving the original image
unaltered!
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.
More tutorials by Taz
|
Tutorials Index
|
Back to Top ^
Privacy policy
|
© 2005 National Association of Photoshop Professionals. All rights reserved.
Photoshop is a registered trademark of Adobe Systems, Inc
[ Pobierz całość w formacie PDF ]