To PNG or not to PNG

These days you have three options for including images on your web pages:

  1. JPG (pronounced jay peg)
  2. GIF (pronounced jif like the peanut butter, though often mispronounced with a hard G as in gift)
  3. PNG (pronounced ping as in ping pong)

So, which should you use and when? Let’s start with GIF and JPG as they have been around much longer than PNG.

When deciding between GIF and JPG, the rules of thumb are:

GIFs are better for:

  • Line drawings and clip art.
  • Graphics with large areas of uniform color and the total number of colors is fewer than 256.

JPGs are better for:

  • Photographs.
  • Images without text.
  • Drawings with a lot of gradients.

So what about PNG?

PNG officially stands for Portable Network Graphics and unofficially for PNG’s Not GIF.  It was designed as an open format to replace GIF, which was patented. The PNG format would likely have become more popular more quickly had Internet Explorer 6 supported it more fully.  This, unfortunately, is still an issue as many people still use IE6. Otherwise, I would recommend using PNG over GIF every time.  However, you’ll have to make that choice based on the browsers you want to support.

One further note about PNG is that it doesn’t natively support animation (arguably a good thing).

So, web pages require JPG, GIF, or PNG image types. For the widest support, JPG is your best choice for photo images and GIF is best for graphic images.

Of course, the choice is yours. Whichever format you choose, remember the most important rule of all: SAVE THE ORIGINAL!

To hear about the latest Adobe news, blogs, and training, subscribe to our newsletter. Click here to subscribe.

We cover saving files for the Web in our Advanced Photoshop class and Fireworks  Web Integration class.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.