| |
|
File formats and the web....
|
A Guide to Preparing Images for the Web:
|
What format do you choose to save your images for viewing on the web? Which optimization setting should you pick?
If you want to play it safe, just go with the old "rule" that JPEG is best for photographs and GIF is best for graphics. For the most part, this is true. But of course nothing's that simple, darn it, and there are exceptions. For example, what if you have an image that combines a logo AND a photograph? GIF may be a better choice. Or, for really small photos, GIF may actually look better and have a smaller file size than a JPEG. Let's learn more, shall we?
|
What about PNG images, you say?
PNG (Portable Network Graphics) images may be a good option at some time in the future, but not now. The format promises cool effects such as drop-shadows and anti-aliasing against any background, but the lack of browser support for PNG images makes it a poor choice. If you want your image to appear consistent for all viewers, the widely supported JPEG & GIF formats are more for you. Macintosh Internet Explorer 5.0, is evidently the current best PNG-supporting browser available, but my version of IE (4.5) refused to even load most .png images. My 4.7 version of Netscape loaded the .png images but wouldn't display transparency. Mr. Photoshop likes the underdog, but until the "big two" browsers have fully supported PNG's for a while, I'll have to keep using JPEGs and GIFs. You can learn more about the plight (and test your browser's PNG support) at:
http://www.libpng.org/pub/png/ |
|
|
 |
As a web designer, you care about (1) image quality & (2) file size (not necessarily in that order.)
The Save For Web Command, which was new in Photoshop 5.5, actually gives better quality results than the old method of choosing Save As, then choosing your format. It also gives you a good preview and some handy info. In the Save For Web Dialog, you can select from 12 common image compression choices in the Settings: pop-up menu. Watch the results in the image preview to observe changes in quality. Keep your eye in the lower left for info on the file size and an approximation of the time needed for download. There's tools in the upper left to let you do helpful things like sampling colors or zooming in. And a button on the lower right to preview the image directly in a browser. At the top, the useful 2-Up or 4-Up views let you compare different optimization settings side by side. |
|
For 2-D graphics with few colors and crisp edges, such as clip-art, logos, or text, GIF is a good choice. GIF uses 8-Bit Color and a couple different ways to compress the image. With a selective color palette, GIF limits the number of colors in the image. A GIF 64, for example uses only 64 colors. Dithering is sort of like Seurat's Pointillism. It places adjacent pixels of two different colors next to each other in such a way that the viewer "sees" a third color- the mix of the two. Choose dithering for smoother blends. |
|
This image is a GIF 8, 0% dither. I decided the lowest number of colors I could have without sacrificing considerable quality was 8. This brought the file size down form 30.1 kilobytes (the original image) to 1.3K. That's a lot! |
 |
Of course one great feature of GIFS is that they can have transparent areas. Just put the image on an transparent layer and hide the background layer before choosing Save for Web. The Transparency checkbox should automatically be checked. I clicked OK and got what you see to the upper left. It's transparent, but that white jaggedness around the edge looks horrible. I changed the Matte: color to black and got the better result on the right. You can choose a matte color that is close to your html background color or image. |
Bits of Color: one bit can express 2 values (0 and 1); two bits can deal with 4 values; eight bits give you 256 colors; and 24 bits can give you over 16 million colors. |
For photographs or graphics with many colors, JPEG is probably the best bet. JPEG uses 24 bit color and compresses images by getting rid of some data. Experiment with different quality settings to decrease file size and see what you can live with in terms of quality. |
To get comparable quality in a GIF I had to use a 128 color table and dithering. It's a larger file at 6.8K. |
This JPEG uses 60% quality and a tiny amount of blur. It weighs in at 4.2K (as opposed to the original image's 28K) |
 |
 |
|
|
|
Print Article
|
