Get Rid of Confusion over Image Formats Once and For All

Image Formats
ShareThis:
Facebooktwittergoogle_pluspinterest

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.

Understanding image formats

 

 

 

 

 

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

Image file sizes

 

 

 

 

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 ;))

Image formats on different backgrounds

 

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.

Anenomes

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…

 

Animated Gif

 

 

 

 

 

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!

 

ShareThis:
Facebooktwittergoogle_pluspinterest
About The Author

Caroline Jones

I’m Caroline and I look to help small business owners create their own graphics by writing tutorials and tips on graphics editing software. I live in Wales , love Tartan and Coffee Ice Cream. You can read more about me here

  • Hello!

    I found you through Kate’s podcast, and learned so much in the above tutorial. Thanks so much for sharing. Have bookmarked your blog and will check out your content.

    Very impressed so far! 🙂

    – Carol

    • Hey Carol – thanks for popping over here. I guess you mean Kate Luella from marvellous Melbourne? I just spotted you on g+ so am going to hook up there. Enjoy and if you have a request for a tutorial, please let us know.

  • Love the clear explanations, Caroline! I know Facebook recommends using PNG images over other types.
    Every program is different and may have special requirements and best practice information, it’s definitely good to know!

    • Hi Delia – I don’t think I was aware that Facebook recommends using the png format. What I do know is that they do ‘compress’ the images a LOT, which is why some colours – reds, pinks etc can look a bit fuzzy even when using the right size etc.

  • I have used each of these type of images, but I’ve never known what the difference was. Thanks!

    • Tamara – glad to have been able to point out the difference to you! 😉

  • Thanks Caroline. Makes so much sense when you know why! Will need to bookmark and come back to visit again!

    • Tamsin – ooh, we lurve being Bookmarked! Hope to see you again. Soon.

  • Really useful post thank you – I find the whole image format thing very confusing and this has helped to clear the fog!
    Rosie

    • Rosie! If you do have any more questions about image formats or even about Fog, then do ask us! 😉

  • This is really helpful information!! Definitely will be back to visit you again…following you now!

    • Hello Michelle – great to see you over here and very glad this has been useful. See you soon!

  • Susan Johnson

    This is excellent information! One of the basic pieces of information that people don’t really understand at first. It took me a long time to figure out what transparency is and the difference between a.jpg and a.png file.

    • Susan! We meet at last.:)
      This can be tricky for most of us and I think it’s one of those sorts of things that’s assumed people know. So here’s hoping this will go some way to clearing the fog!

  • A .jpg file is also going to carry more meta data with it, which only comes into play if you want to display that info, like what sort of camera was used and such. And a .gif won’t look very good on a retina display, which so many mobile devices have now. Plus, .png offers a more lossless compression. It is a bigger file size, but a much sharper image.

    • Excellent points MaAnna – couldn’t have put it any better myself!
      Going to have to take a look at your post ‘Make Google Front Page Over & Over’…

  • This is a fantastic post to share. I’ve been trying to get one of my clients to send me pngs, but he keeps creating jpgs. I’m sharing this with him and on my Facebook page. 🙂

    • Marilyn – this is a tricky sort of thing to understand and to be honest many people just use jpegs, which is fine in the right circumstances. Here’s hoping..;)