The Absolute Beginner’s Guide to Digital Images – JPGs and GIFs and PNGs…oh my!

Digital images come in a number of different formats and each are good for different purposes. There are special formats for printing, special formats just for the computer screen, and special formats good for the web. For the web, there are three different formats that you need to be familiar with; JPG, GIF, and PNG
Image Formats for the Web

JPG- (pronounced, “jay-peg”) this image format is short for Joint Photographic Experts Group. All images that are in a JPG format end with .jpg or .jpeg. As you might have guessed from the name, the JPG format is used for displaying photographic or “true color” images. So any image that’s scanned from a photo or slides must be in JPG format. If you are taking pictures with a digital camera those images will be in JPG format.

GIF- (pronounced “Gif”) this image format is short for Graphics Interchange Format. All images that are in a GIF format ends with .gif. Unlike JPGs, which can display millions of different GIFs can only display a range of 256 colors. Because GIFs only display 256 colors, GIF files tend to be smaller than JPG files and will load up faster on your web page. So GIF are best used to display images that have a limited range of colors, like non-photographic logos, animations, buttons, and icons. GIFs can also be used when you need part of your image to be transparent (I’ll discuss transparency in later posts).

PNG – this image format is short for Portable Network Graphics. All PNG images ends with .png. The PNG format was specifically created for the web with the purpose of replacing the GIF format. Unlike the GIF format, PNGs can display a much deeper range of colors and PNGs can also handle transparency better than GIFs can. Unfortunately, not all web browsers can display PNGs and all of it’s features properly.

What to use
When it comes to picking the right format for your images use these simple guidelines:

• Use JPGs for photographic images
• Use GIF for images with simple colors like buttons and logos
• Use PNG for simple non photographic images that have elements like color gradients, drop shadows, and transparency

One of the biggest mistakes I see in those just becoming familiar with designing for the web is using the wrong image format for the type of image.

Here’s an example of using the GIF format on a photographic image….

Not pretty huh? Remember that GIFs can only display 256 colors. If the image contains a color that the GIF format can’t display, it will replace it with the closest color available, which results in these bands of color throughout your image.

Here’s the same image in JPG format.

…much better.

You don’t see such a dramatic difference when you save what’s supposed to be a GIF type image as a JPG, but there are still problems.

Here is the blog’s logo in JPG format…

Here’s the blog’s logo in GIF format…

When you look closely at the JPG image, notice that there appears to be some fuzziness that you don’t see in the GIF format. These are known as “compression artifacts” and it’s a result of how JPG formats saves images. I’ll explain the process of compression in later posts on this series, but bottom line is, when you’re saving images in JPG format, you’ll always have to be aware of these compression artifacts.

Next time:
I’ll discuss image resolution and file size and why you should care.