Welcome! I am Paul Erdman, Adobe Certified Instructor and owner of Creative Progression. The new Creative Progression website provides a venue for me to share valuable information usually included in my training. I hope you find the content useful. If you are in need of training or document design services, contact me!
Dec
05
2011
Photoshop Save for Web: JPG, GIF, or PNG?
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.
JPEG
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.
GIF
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:
- Transparency
- Animation
- 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.
PNG
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.
BMP
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.
Summary
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 |
Nov
11
2011
New Site Navigation, Search, Subscription
I’m happy to announce several improvements to the site today, including improved navigation, search, and subscription widgets!
- Category-based navigation: I’ve removed the old tag cloud widget and created a new category structure for all articles. The new category navigation widget shows only the important article categories and omits categories like “Administrative” (which would include posts like this one) so that the emphasis is on useful content. I will add additional sub-categories as needed in the future as I continue to write more articles.
- Search: As the number of articles has now exceeded 50, it occurred to me that I really needed to add a search function. So here it is, on the right hand side of the screen with the other widgets.
- Subscription widget: Thanks to all of you who have subscribed to the site already. Not only is it possible to subscribe to the RSS feed, I’ve installed an easy-to-use e-mail subscription plugin. Previously, visitors had to click on the “Subscribe” page; the page is still there, but the updated plugin now has a widget available, so I’ve added that widget to the sidebar on the right side of the site to make it easier to find. E-mails are stored securely and are not used for any purpose other than to inform you of new posts.
Contact Creative Progression
- Adobe software training
- Specialized InDesign project consultation
- Document design for print, web, & eBooks
Based in Portland, Oregon
Phone: 503.888.4715
eMail: info@creativeprogression.com
