http://usefulgraphicdesigntutorials.com/get- rid-of-confusion-over- image- formats-once-and- for-all/ April 25, 2013

Get Rid of Confusion over Image Formats Once and ForAll

Caroline Jones

Image Formats: Make them work for youIn this post I’m going to show you how understanding thedif ference between .gif , jpeg and png image formats, can giveyou

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 t ricky out line) and created them in 3 dif ferentimage formats – gif , jpg (or is it jpeg? More of that later) and png. By the way, these are bubblesin water, in case you’re wondering!

They are all of the same quality (pret ty good) and all of the same physical size on the posthere.

Can you tell any dif ference 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 f iles 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 f ile whichmeans it would take less t ime 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 differentThe dif ference 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 lit t le apparentdif ference in them.

However, when we place them on a coloured background, we begin to see them showing theirt rue colours (sorry about the pun )

So what does this all mean?The gif image #1 is lying on a t ransparent background ( that is you can’t see it even thoughit ’s there), there are some white bits showing and the colour def init ion isn’t great.

The jpg image #2 has it ’s white background def initely showing. We’ve all seen this background

on various websites and it doesn’t look as professional as it could do with the whitebackground 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 backgroundfrom 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 t ransparent background, the colour looks goodand there are no white bits showing.

(NB. – you can have a png image that does have a background, however the image size wouldthen be quite large and it would beg the quest ion as to why you would use this over the jpgformat which would be smaller in size).

How to best use these image formatsJpg – this is best where you are using a photo or image that goes right up to the edge andwhere you don’t need a t ransparent background.

What we mean by going ‘right up to the edge’ is like this shot of anemones: an ordinary photothat f ills the f rame.

Png – where you have a complex background and you wantto place an image(s) on it

Gif – Hmm, this isn’t that great for t ransparency and thecolours can be limit ing and to be honest we don’t use thismuch, except for creat ing an animated gif ! Here’s anexample of one Davina made earlier…

PS. And the dif ference between jpg and jpeg? There is no dif ference – they are bothinterchangeable. However, for those people who like the detail, jpeg stands for JointPhotographic Experts Group and jpg stand for Joint Photographic Group. So now you know!

If you’d like to keep abreast of fascinating t itbits of informat ion related to graphics and images,AND be able to make your own graphics, then get hold of our f ree graphics tutorials byCLICKING HERE!

printAbout Caroline Jones

I'm Caroline and I look to help small business owners create their own graphics bywrit ing tutorials and t ips on graphics edit ing software. I live in Wales & am Welshbut sadly I only know rude Welsh words.