Image Formats: Make them work for you
In this post I’m going to show you how understanding the difference between .gif, jpeg and png image formats, can give you
- more professional looking images
- faster loading web pages
- and images that move!
These images all look the same!
Take a look at these.
I’ve used the same image (one with a bit of a tricky outline) and created them in 3 different image formats – gif, jpg (or is it jpeg? More of that later) and png. By the way, these are bubbles in water, in case you’re wondering!
They are all of the same quality (pretty good) and all of the same physical size on the post here.
Can you tell any difference between the 3?
No, I can’t either.
Okay, so lets just take a look at the detail of the size of these images.
Here’s a view of the files on my computer
As you can see
- the gif is the smallest
- the jpg is the middle size and
- the png is the largest size
So, let’s just use the image in the gif format for our Blog, since it is the smallest file which means it would take less time to load on the website, which means happy viewers. Right?
Well, yes. In theory that would be correct, however, there’s a bit more to the story.
Here’s what’s different
The difference comes with what background you want to put them on.
In the image above, all 3 images were lying on a white background. There is little apparent difference in them.
However, when we place them on a coloured background, we begin to see them showing
their true colours (sorry about the pun ;))
So what does this all mean?
The gif image #1 is lying on a transparent background ( that is you can’t see it even though it’s there), there are some white bits showing and the colour definition isn’t great.
The jpg image #2 has it’s white background definitely showing. We’ve all seen this background on various websites and it doesn’t look as professional as it could do with the white background removed! If you’d like to know how to get rid of a white background on an image, then we have just the video for you. Take a look at this ‘How to remove a white background from an image‘ here.
And by the way, an image in the jpg format will always show a white background.
The png image #3 looks great. It’s lying on a transparent background, the colour looks good and there are no white bits showing.
(NB. – you can have a png image that does have a background, however the image size would then be quite large and it would beg the question as to why you would use this over the jpg format which would be smaller in size).
How to best use these image formats
Jpg – this is best where you are using a photo or image that goes right up to the edge and where you don’t need a transparent background.
What we mean by going ‘right up to the edge’ is like this shot of anemones: an ordinary photo that fills the frame.
Png – where you have a complex background and you want to place an image(s) on it
Gif – Hmm, this isn’t that great for transparency and the colours can be limiting and to be honest we don’t use this much, except for creating an animated gif! Here’s an example of one Davina made earlier…
PS. And the difference between jpg and jpeg? There is no difference – they are both interchangeable. However, for those people who like the detail, jpeg stands for Joint Photographic Experts Group and jpg stand for Joint Photographic Group. So now you know!
If you’d like to keep abreast of fascinating titbits of information related to graphics and images, AND be able to make your own graphics, then get hold of our free graphics tutorials by CLICKING HERE!