Image Formats JPEG vs. PNG vs. GIF


What is the difference between all the image formats and which one should I use?


Short Answer:

Use PNG’s for all your website image needs!!!


Long Answer:

JPEG (Joint Photographic Experts Group) Pros and Cons

Pro: Great for simple graphics – JPEG allows you to create relatively small file sizes. The JPEG format is the most well known format.

Con: A lot of “cheap” image software programs create JPEG’s that are not properly supported. You see “JPG” which is different then “jpeg”. Which often results in the image not showing accross all Web Browsers. JPEG’s cannot have a transparent background -which is very important in today’s web-design.

Example: Typical JPEG (notice white background)


PNG (Portable Network Graphics) Pros and Cons

Pro: PNG builds on the idea of transparency and allows the control of the degree of transparency, known as opacity. Saving, restoring and re-saving a PNG image will not degrade its quality.

Con: You need premium image editing software ($$) to create high quality PNG’s

Example: PNG with Transparent Background (see another example of transparent background images in use)


GIF (Graphics Interchange Format) Pros and Cons

Pro: GIF images can be put together for animated images. GIF also supports transparency, where the background color can be set to transparent.

Con: The compression of GIF’s results in some quality loss

Example: Animated Gif with Transparent Background: