12.2 Exercise 2: PNG & GIF vs JPEG

As stated in Exercise 1, photographic images with many colors are saved as JPEG files, and graphic images with few colors are saved as PNGs or GIFs. Following these rules will produce better quality images and smaller file sizes for graphic images.

The GIF and 8-bit PNG formats reduce an image’s sizes by limiting the number of colors in the image to no more than 256 total. This is called an indexed color palette. The fewer colors used, the lower the file size. In combination with some compression algorithms this can create some pretty small files. As you can imagine, however, significantly reducing the number of colors in photographic images would result in a very altered appearance.

PNG also has a 24-bit format that uses a much larger range of color and a compression algorithm to produce true-color compressed images. These have excellent quality but are typically larger in file size than JPEG compressed images.

Both PNG and GIF can include transparent portions of an image. The GIF format only allows one of the colors in its indexed color palette to act as transparency, while PNG can contain a true alpha channel to define transparent or semi-transparent areas in an image. Use of an alpha channel to create transparency allows transparent fades and smooth edges along transparent areas in an image.

1. Use the gear-icon.psd image included in this chapter’s work files and the Photoshop® Export As interface to save an optimized version of this image as an 8-bit PNG, scaled down to a width of 500px. Zoom in and notice how clean the image is (no compression artifacts).Click the Export… button and you should end up with a file named gear-icon.png, make note of the optimized image’s file size (it should be around 16KB). Note: you do not need to export multiple sizes of the image in this exercise, just the 1x size in the Scale All area will be sufficient, and it doesn’t need a Suffix.
2. Now use Export again to see how much compression it would take to get the same file size from this image using the JPEG format. Make sure the Image Size is still 500px and adjust the Quality slider down to your guess of a percentage that it will take to reach the same file size as the PNG you saved. Zoom in and you’ll notice JPEG artifacts around the black edges in the image. Click Export… to save your JPEG version of this image. From this exercise, it should be apparent why JPEG is not the best format for graphic images that have solid colors. As you can see, a much cleaner image results from using the PNG format. You can use the Photoshop® Export As interface to experiment with the GIF format on your own, and you may want to try turning off the background layer to play with transparency in your optimized image. You may also want to experiment with a photograph to see how the different formats create different results in quality and file size.
   Note: GIF (Graphics Interchange Format) was developed in 1987 and makes use of a patented compression method. The PNG (Portable Network Graphic) format was developed around 1996 as a non-patented GIF replacement. The relevant patents expired in 2004, though by that time PNG had become fully supported on the web and a more popular format than GIF. One GIF feature that PNG does not have is animation, which has become the primary use of GIF in modern times.

   That’s all for Chapter 12!

Attribution

“Digital Foundations – Intro to Media Design” by Xtine Burroughs and Michael Mandiberg is licensed under CC BY-NC-SA 3.0 / This is a derivative from the original work. Content is available under Creative Commons Attribution Non-Commercial Share Alike unless otherwise noted.