GIF, JPG and PNG – What’s the Difference Anyway?

GIF, JPG and PNG –
What’s the Difference Anyway?

The following file formats are not to be used if you are creating a brochure, signage or anything that needs to be professionally printed. Their best use is for the internet.

Question

Are you designing your own website? Are you confused about which type of file to use for your photos, logo and other images?

When working with digital image files, it’s important to know the difference between GIF, JPG and PNG formats so you know how and when to use them!

The main difference between each format is how they’re used and what quality graphics they produce.

Gif (Graphics Interchange Format)
Best Uses: Simple one to two color Logos, Icons, Symbols, Line Drawings, Black and White Images, Small Text, Animated Images

Using a gif for photos is not recommended since gifs are limited to 256 colors – the fewer the colors included in your image, the smaller the file size will be. The gif file format is best used for logos and graphics with solid areas of color.

Gif images are great for creating low resolution files for your website. They load quickly and will also support transparency. Transparency allows you to place the gif image over any color background (or even a photo). For instance, if I have a red background but my company logo is saved on a white background, I can save my logo as a gif image so that it will show up on the red background.

Jpg (Joint Photographic Experts Group)
Best Uses: Photographs and Complex Images

Jpgs (jpegs) support up to 16.7 million colors, which makes them the right choice for complex images and photographs. Jpg files can be relatively small in size, but they still look crisp. With the wide range of colors, you can have high quality imagery without a bulky file size. However, details can be lost if the compression level is sufficiently high, so JPGs are not good for graphics that contain text or high-contract fine detail, such as logos, line art and vector art.

Also, it’s important to note that if a jpg image is regularly edited and resaved, it can lose quality over time. JPG does not work well on line drawings or lettering (the image loses clarity and sharpness).

JPGs can also be used for print when prepped properly. We always recommend that the file be at least 8.5 x 11 and 300 dpi in it’s original form. Scaling up a small jpg to 8.5 x 11 and changing it’s dpi to 300 does not make for a high res image…that’s cheating and your results will be a low quality image. The image has to start at high resolution to be high resolution.

PNG (Portable Network Graphics)
Best Uses: Transparent Images for a Website

PNG is an excellent file type for internet graphics, as it supports transparency in browsers with an elegance that GIF does not possess. PNG files incorporate low-resolution images that load quickly but also look great. PNG supports 8-bit color like GIF, but also supports 24-bit color RGB, like JPG. PNG files are lossless, which means that they don’t lose quality during editing. So while a jpeg will lose quality during editing, PNG files won’t. Because of this, PNG files tend to be larger than jpegs and gif isn’t supported by some (usually older) browsers.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s