JPEGs, GIFs and PNGs. Which image format should you use?

image format

Richard Cowdery

Digital Developer

Posted on November 18, 2015

At some point during every day here at Talisman – and probably during your day too – image files will feature in some way. The image files we come across are likely to have been saved in a variety of different formats. Adding our company logo to a PowerPoint slide may not involve the same sort of file as uploading photos of an event to Facebook, for example.

There are dozens of recognised, widely used formats in existence, but, thankfully, the vast majority of us only need to concern ourselves with three.

In this blog, we’ll be taking a closer look at JPEGs, GIFs and PNGs – the three image files you probably use most. By understanding the difference, we’ll help you see that which format you use does matter, and help you make sure you’re using the right file type for the right purpose.

What do we mean by an image format?

An image format is a particular way of storing and organising the data of a digital image. Even if the end goal is the same – to display an image digitally on a screen – each image format stores data in different ways. How it has recorded colour, compressed data, and even transparency effects and other information are all stored along with the image.

Let’s look at some of these common file formats and see how, and when, they should be used.

JPEG (or JPG)

JPEG stands for Joint Photographic Experts Group (a useful fact to have handy for your next pub quiz) and it is mostly associated with photographic images that need to store millions of different colours.

JPEGs are useful because they use a lossy compression method: it takes its image and, through compression, reduces the file size to something far more manageable.

Why? Because storage usually comes at a premium. Your mobile phone’s storage would soon hit its maximum capacity if stored images uncompressed. A typical uncompressed 12 Mega Pixel camera image takes up approximately 36MB of space. A compressed JPEG of that image, on the other hand, might weigh in at about 3.6MB. Quite the difference.

jpeg image format quality example

With JPEG, you can specify the level of compression to reduce the storage demand even further, but this ‘lossy’ compression comes at the cost of quality, as it will throw some of the image data away. The untrained eye is unlikely to notice the effect of this loss of data, but the more the compression increases, the poorer the JPEG will look.

We get to make a choice on whether to prioritise space or quality at the point at which we save a JPEG, saving it as a high quality (low compression) or low quality (high compression) file.

Pros

  • 24bit colour (can use millions of colours)
  • Good for photographic images
  • Large images can be compressed to manageable files sizes

Cons

  • Not good for logos (images with sharp contrasting edges)
  • Lossy compression (throws away image data)
  • Doesn’t support transparency
  • Can’t be animated

GIF

The Graphics Interchange Format (GIF) has a smaller colour palette: only up to 256 colours, which seems quite limited compared to the JPEG boastful ‘millions’. However, don’t dismiss the GIF yet: those 256 colours can be chosen from several million colours, too. You just have to prioritise and pick which ones.

GIFs can show photographic images with just 256 colours if you want it to, but they really begin to excel when far fewer colours are needed to show flat areas of continuous colour.

Icons and logos are the perfect examples of this. Imagine a simple, black and white logo that we need to place on a webpage. The chances are that we’d only need a few colours to show off that image well: black and white, obviously, and maybe a few shades of grey to allow some aliasing around the edges of the logo to make the edges appear nice and smooth.

In this example, we could reduce the pallet to 16 or maybe just 8 colours in total. This will have a big effect on the size of the file – significantly smaller than a JPEG. The animation below shows how you can cut the numbers of colours quite significantly before you can start seeing a drop in image quality.

gif image format example

The GIF format also allows us to define a colour that is transparent. That way, if we place a GIF in a document or on a web page with a background colour or image, you’ll be able to see right the way through the GIF to the colour below.

gif image format transparency example

Finally, a GIF can incorporate animation! We can create different frames for an image and specify how we display them. The image we used earlier in the JPEG section of this blog, for example, showing the effects of compression, isn’t a JPEG itself, but an animated GIF.

Pros

  • Good for logos and icons
  • Lossless compression
  • Allows animation

Cons

  • Display a maximum of 256 colours
  • Not good for photos (images that have millions of colours)

PNG

The Portable Network Graphics (PNG) format comes in two flavours: PNG-8 and PNG-24. PNG-8 like the GIF format can only store a maximum of 256 colours at any one time while PNG-24 can store millions of colour. That being said, we still need to choose the right one for the job – logos and icons should probably use PNG-8 while PNG-24 is more suitable for photos. Unlike JPEGS, however, the PNG format uses lossless compression so it doesn’t throw image data away as you compress the image.

Its most interesting feature compared to the other two formats is its ability to use alpha channels. What’s one of those? Well, think of each pixel in a PNG image having four values. One value defines the amount of red, one the green and one the blue – the unique mix of those three values make the colour. The fourth value specifies how see-through that pixel is to allow much greater subtlety in transparency than GIFs, as you can see in the following image.

png image format example

A GIF file can only say whether a colour is transparent or not. Either you can see the background colour behind it or you can’t. For a PNG file, alpha channels allow you to specify how much of the background can be seen through each pixel.

Pros

  • 8bit and 24bit support (256 or millions of colours)
  • Can do both photos and logos and icons well
  • Lossless compression
  • Alpha channels for better transparency control

Cons

  • No animation
  • Not supported by older web browsers or email clients (although this is proving to be less of an issue as time marches on)
  • Slightly larger file size when compared to JPEG

Which one to use?

Broadly speaking, photographs should be JPEGs as they allow millions of rich colours and offer excellent compression options.

Icons, logos and diagrams should be GIFs because we can significantly reduce the number of colours in the file without losing quality, and we can have simple animation if we need it.

And PNG is great for when you need to have some alpha transparency going on in your work – overlaying images on top of each other, for example.

It really doesn’t need to be more complicated than that.

Download our free white paper
Ten must-have features for financial services websites
Download now »

Sign up to receive our latest blogs and ideas

* This field is required
* This field is required
* Please enter an email address

Every now and then we’d like to send you information via email which contains content we feel may be of interest, or to promote our services. Submitting your details tells us that you’re ok with this and that you agree to our privacy policy and cookie policy. You can opt out at any time.