Toward the end of my Photoshop classes we cover saving images for web, and I tell a not-so-amusing anecdote of how someone lost a design gig because they did not know the proper uses of JPGs vs. GIFs and PNGs. In that particular case, the client needed a very small file size web graphic that only used a few colors; the designer had saved the artwork as a small JPG at low quality compression, which caused ugly artifacts to appear in the image. The client fired the designer and came to me to help. I took the same artwork and simply saved it as a small GIF with a reduced color palette instead of a JPG, and it looked beautiful.
Using “Save for Web” in Photoshop
Proper understanding of the various web image formats is crucial. Failure to use these formats properly can damage the integrity of your images and even, as in the case above, cost your work and money.
First and foremost, NEVER save your working file in any of these web formats. Always save your work in Photoshop as a native Photoshop file, especially if your work entails layers. This ensures that your work will be preserved in a non-destructive, editable manner.
When you are ready to save a web-ready version of your artwork, use the “Save for Web” option in the File menu. This option is great because it allows you to do several things simultaneously:
- you can resize the saved copy without resizing the original. I always set the size first to help it go faster, especially for large originals.
- you can select the kind of image to save (JPG, GIF, PNG, etc) and related options
- you can customize options for different slices of your artwork, if using the slice tool
- regardless of the original color mode, the output image will be converted to sRGB
Lossy vs. Lossless Data Compression
Images require a lot of data. Imagine, for a moment: each pixel requires 3 bytes of information; 1 for the amount of red, one for the amount of green, and one for the amount of blue. Now, for simplicity’s sake let’s imagine a 1 megapixel image that is 1 thousand pixels wide by 1 thousand pixels tall. Our sample image would require 3 million bytes of information, or 3MB, of storage space. And that’s not even a very big picture.
Data compression algorithms exist to package large amounts of data in reduced sizes for transport. Lossless algorithms, such as ZIP and LZW compression, work well when the integrity of the data must be perfectly preserved, such as in the case of text data or software programs. However, if the exact integrity of the data does not need to be preserved, the file size can always be further reduced through the use of lossy compression algorithms. Lossy compression is frequently used for image, audio, video, and other types of data in which the file sizes of uncompress data would be enormous. Lossy compression comes at the cost of “artifacts” or “noise” which, if the compression is done to excess, will be perceptible by the audience in the final file.
The JPEG (an acronym for the Joint Photographic Experts Group, which created it), or JPG, uses lossy data compression to reduce the file size of an image. It is most commonly used for full-color photographs and images with a broad range of color. The format does not support transparency.
When saving as a JPG in Photoshop’s Save for Web dialog, you will be presented with a quality slider and drop down menu. Notice that when you change the dropdown from “Maximum” to “Very High” you’ll see the file size get cut approximately in half, but you’ll see no perceptible change in the preview image when viewed at 100%. Thus, you’re getting a dramatic reduction in size at no perceptible cost in quality! (This is very good.) Now, slide it down again to “High.” You’ll notice your size got cut again approximately in half, and again, a barely perceptible reduction in quality. Now if you try going down to “Medium” you’ll begin to see obvious, ugly JPG artifacts in your images.
During the years of dial-up connections, medium quality JPG compression was the standard. And it was an ugly time for the Internet. In fact, it’s still common to find such images on the Internet today. However, it is my opinion that you should consider your potential audience and unless you suspect a high number of dial-up visitors, use high-quality compression for all your JPG images. It makes a huge difference in the quality of your site; those JPG artifacts can be really distracting.
At the same time, I don’t foresee a need to go much higher than “high” quality. At times you might want to use the quality slider to fine-tune the quality, but don’t move it too far to the right. In most cases, “high” should be sufficient for great looking web graphics.
The Graphics Interchange Format (GIF) reduces image size by using an indexed color palette. Rather than allowing a full range of millions of colors, as a JPG does, it has a maximum of 256 colors, and might use even fewer. In addition, GIF files support these additional features:
- Optional additional lossy compression
This makes GIFs ideal for logos, illustrations, line-art, and other cases requiring high image clarity without high color depth. It is also the only image format that supports frame-based animation.
Portable Network Graphics (PNG) use lossless compression and were developed primarily as a replacement for the GIF format. They also support Transparency, and in some cases support it to a greater extent than GIF files. The Photoshop “Save For Web” utility allows two options for saving PNGs:
PNG-8 is analogous to GIF, in that it uses 8 bits (hence the “-8″) for a maximum of 256 indexed colors. It supports transparency in the same way that GIF does: each pixel can either be visible or invisible. File sizes are often slightly smaller than GIF. PNG-8 is often preferred over GIF.
PNG-24 is analogous to JPG, in that it uses 24 bits per pixel (8 for red, 8 for green, and 8 for blue) for a full range of color possibilities. It also supports full alpha-channel transparency, meaning rather than representing each pixel as either fully transparent or invisible, it can properly represent partially transparent pixels. File sizes are much larger, so this format should be used sparingly. However, in cases where full-alpha transparency is required, this is the format of choice.
The Windows Bit Map format (BMP) is not not well compressed and should not be used on the web. I wish it wasn’t included in Photoshop’s “Save for Web” dialog at all. Don’t use it.
In summary, all this information can be boiled down into some pretty simple decision points when using “Save for Web”:
- If it’s a color photo or artwork with wide range of color not requiring transparency, JPG would probably be best.
- If it’s a logo, line art, or graphic with narrow color range, GIF or PNG-8 are the best choices. GIF has wider support (especially with older browsers), but PNG will probably get smaller file size and is quickly becoming the preferred format.
- If your image has a transparent background, you must use GIF or PNG.
- If you wish to preserve partially-transparent effects in your image, you must use PNG-24.
- If you’ve made a frame-based animation in Photoshop, GIF is your only option.
The following table compares the various web graphic formats with the features discussed in this article.
|Color Depth||Compression Type||Transparency||Animation|
|JPG||24 bit (millions of colors)||lossy, variable quality||NO||NO|
|GIF||8 bit indexed (256 max)||lossless (optional lossy)||1 bit (each pixel on/off)||YES|
|PNG-8||8 bit indexed (256 max)||lossless||1 bit (each pixel on/off)||NO|
|PNG-24||24 bit (millions of colors)||lossless||8 bit (full support of alpha channel)||NO|