What’s the Difference between GIF, JPEG and PNG?

When you’re editing your website, you’ll undoubtedly want to use pictures - but the two most popular picture formats - GIF and JPEG - can be confusing.  Which one do you use, and when?  And what about PNG files? When can you use those? Today’s post will help clear up the confusion.

GIF files are popular for pictures with a limited number of colors.  Items like clip-art, banners, icons and other navigational elements on your web page work best (and load faster) when they’re saved as a GIF file.   Logos and line drawings are also ideal for GIF files to handle.

An additional feature of GIF files over JPEG is their ability to have a transparent background.  You can place a transparent GIF file over any other color, and it will blend right in to the background.  GIFs are also used in animated graphics as well.

The downside of using GIFS is that you can occasionally get transparent files with pixilated edges around the border (known as “jaggies”) - careful image editing should remove most of those extra pixels.

JPEG is a format designed for images with lots of different colors and is ideal for photographs and gradients (gradually fading from one color to another).  JPEGs are often used on web page backgrounds (like this one at ielectrify.com) that fade from dark to lighter blue. 

Even though you’re only fading from what seems like one color to another - there are lots of shades “in between” that a GIF file just can’t handle.

Since JPEGs have to process so much information, they are generally larger in file size than GIFs, so if you have a lot of them on one page, your page may load slower as a result.

PNG is a relatively “new” format (introduced in the late 90’s - compared to the GIF, which came out around 1987!) that takes all of the things people liked about the GIF format, and turned it into a well-oiled graphics format. 

In addition to letting you create images with a transparent background, PNG (pronounced “ping”) also creates a richer-looking image because it can “hold” more colors than a GIF.

Now that you know the differences, and when to use which format, you can bet you’ll be able to create more stunning graphics with ease!  If you still need graphic design help - iElectrify is just a free quote away!

Recommended Tools and Resources

• Add Audio to Your Website
• Wordpress Tutorials