GIF vs. JPG vs. PNG

There are many different choices for graphic file formats when compressing images, the most common of which are .gif (GIFF), .jpg (JPEG),and .png (PING). There are different reasons why someone would choose to use one file type over another. First, you might ask yourself, "Why compress?" For use on a website, images usually need to be compressed so that they can load quickly on a web page. Large file sizes take a long time to download, especially for those who are using slow Internet connections. So, when compressed, some amount of image data gets thrown away, making the file size smaller and the load time quicker. Images may also be compressed for other (non-web-related) purposes, such as inserting into a Word document or a PDF file.

Transparency & Quality

Please note that in the images above, the JPG image has a white background. The GIF and PNG files have transparent backgrounds, so the dark color that you see is actually not part of the graphic but is actually the background color of the web page that you see coming through the graphic; the JPG format does not support transparent backgrounds. As you can see above, the PNG image is much higher in quality in comparison to the GIF image. Many people often ask why use the PNG format, and this example should hopefully illustrate the answer pretty clearly; however, notice that the PNG image has roughly double the file size of the GIF image.

When to Use

What works well in one situation does not always work well in other situations.

• Website: If you wanted to use one of the above graphics for use on a web page and you wanted for the background color of your web page to be displayed behind your graphic, the PNG version would be the best choice to use.
• Word Document: If you were to insert the three graphics seen above into a Word document (view example), you would not see much difference between them.
• PDF: If you were to convert the Word document that is linked above to PDF (view example), you would find that the JPG image would be the only one that would convert and maintain adequate quality.

So what does this mean? We will be posting various sizes of JPG and PNG images for use on websites, Word documents, and PDF files.

Screen vs. Print Graphics

You may be familiar with the terms RGB and CMYK:

• RGB refers to the three colors (Red/Green/Blue) that are used to produce the millions of colors that are displayed on your computer monitor.
• CMYK is a four-color print process that mixes Cyan, Magenta, Yellow and Black to formulate any color that would be used in a print process, whether printed on paper, cloth, or any other sort of medium.

[ Back ]