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

, ,

6 Responses to Photoshop Save for Web: JPG, GIF, or PNG?

  1. I recently upgraded to Photoshop CS3. And I CANNOT get the colour displayed in Photoshop to match the Save-for-web (jpg,png,gif..etc) pictures…!

    In PS CS2, I used proof color – monitor RBG, and the colors used in photoshop would match the jpg (save-for-web) that was made from it.

    I’ve tried different combinations of proof colour settings, but the colors just do not match.

    Greatly appreciate if if anyone knows how to get the Photoshop colors to match the save-for-web colours!

    Also, how to set that setting as default (if possible), so I dont have to select proof color for every new file!!

    • Paul Erdman January 7, 2013 at 10:58 am #

      Unfortunately I do not have CS3 installed (I’ve got CS5 & CS6 currently), so I can’t test your version. Older versions of the software did have some issues with things like this that have been improved in newer versions, so upgrading to CS6 would be advisable. I’ve listed some recommendations below, but I can’t guarantee they’ll all work in your version.

      Generally this is an issue with photoshop using a custom RGB color profile that differs from what you’re using in the Save-For-Web dialog. Some things to check:

      1. In the Save or Web dialog, is “Convert to sRGB” turned on? Having this on ensures best compatibility and color consistency when displayed on a wide range of screens and browsers, but might cause changes to the color if the sRGB color gamut is more restrictive than your working colorspace.

      2. Is the original image RGB? What is your RGB Working space (Edit: Color SettingS)?

      Usually, IF you set your working space to sRGB, convert your original image to the sRGB working space (edit: convert to profile), and then saved for web with convert to sRGB checked, then you would not see any color change, because the color space is not changing. I would recommend trying this as a test.

      Many designers prefer to work in the Adobe RGB colorspace because of its larger gamut, or they use a custom RGB space. In this case, some change in color when converting to sRGB for the web versions of the images can be expected.

      Something else that some users report: when using custom color settings, images may appear differently when viewed in photoshop vs. viewed in some other viewer (i.e. a browser window) on the same screen. Is this happening?

      Feel free to e-mail me.

  2. Panos February 4, 2014 at 8:56 am #

    Hi there Paul,

    great article! I really mean it!

    Allow me to share with you my adventure of saving my CV.

    I’ve created a psd CV in CS6 that includes a selfie, some vector graphics and mostly text. It’s two pages long.

    Each page in PSD format is about 10 MBs.

    Now I want to save my CV as a two-page pdf.

    I also want the vector graphics quality to be retained
    (it won’t bother me that much if my selfie gets a bit pixelated)
    and I want my text to be highlightable.
    I also want my pdf to include web links.

    Here comes the tricky part: Most of the online forms or websites for CV uploads support files smaller than a couple of MBs, some even less!

    How is it possible to have all of the above features and keep it as small as 2-3 MBs ?

    I’ve tried Bridges, I’ve tried Save for Web, I’ve tried Save As Photoshop PDF. Every way lacks of one or more of the above features.

    I’d like to hear your thoughts on this! Thanks for hearing me out.

    Regards,
    Panos

    • Paul Erdman February 10, 2014 at 6:05 pm #

      Unfortunately, my advice to you would be to not use Photoshop. If you have InDesign, it would be the ideal tool for a document like this. I would recommend NEVER using Photoshop for page layout. It’s cumbersome, and as you are finding, it doesn’t make very tidy files if you want to preserve type and keep file size small. You could export your file as a nice small web-ready PDF from InDesign and easily meet your file size requirements. All type will stay type (with fonts embedded), vectors would stay vector, and you could control the size and quality of the raster graphics in the exported PDF during the export process.

      • Panos February 11, 2014 at 6:52 am #

        Thanks for the tip, I’ve d/l InDesign.
        How easy is it to transfer my psd document to InDesign though?
        As I see, InDesign won’t read psd files…Does that mean I should start from scratch?

        • Paul Erdman February 11, 2014 at 10:15 pm #

          Unfortunately, no, it’s not easy. Not completely from scratch, in that you can copy your text out and place the raster vector elements from the PSD, but all the text formatting will be from scratch, sorry. You can speed it up a bit by using paragraph and character styles, hopefully, and, for what it’s worth, ultimately your typography will look better in Indesign.

Leave a Reply