GIF, JPG and PNG - What's the difference?

[ArticleBot]

This is an article discussion thread for discussing the SitePoint article, "GIF, JPG and PNG - What's the difference?"

For a layman I could grasp the essential difference between GIF and JPG.Now I know when and where to use these.

[Waitingforyou787]

I wanted to know the difference.....You didn't really give me the exact answer. I want to be able to find it easily.

PNG doesn't support animations, but another format called MNG supports animations like GIF. But most web-browser doesn't support it... (see w3c)

some times my png and jpeg images have some white around the edges. I don't see this in photo shop but when I convert them to gif this annoying outline will show up. Any Ideas

[omgsteve]

jpg > gif > png , but if firefox was the default browser, it would be the other way around

[Egor]

Originally Posted by Waitingforyou787

I wanted to know the difference.....You didn't really give me the exact answer. I want to be able to find it easily.

The answer is simple. Use whatever looks best for the graphic and has the smallest filesize.

Gif for 256 color or under images that must be crisp. Jpeg for photos, smooth transitions.

[Kadence]

PNG appears to be gaining popularity quite rapidly. Another example of how fast things spread on the web.

WHEN SHOULD I USE PNG?

excellent

[Egor]

I see no immediate need to use pngs. There are all these claims that the file-size is smaller or 'can' be smaller, but I have yet to see it myself.

The only good use for them right now IMO is semi-transparent background tiles for things like menus, and interesting layout effects.

[xhtmlcoder]

PNG-8 is the default replacement/alternative for GIF depending upon the colours used and such the Ping will generally be smaller in file size though typically most graphics applications will use PNG-24 as default when saving *.png.

You should remind people that the transparency in GIFs does not apply to the printed page, only for screen renderings. Some sites rely upon nice-looking printouts, so shouldn't rely upon the transparency of GIFs.

This is a very useful article for students such as myself. Thanks very much for the information.

[X-Factor]

The main diffrence is file size, and picture quality.

Great explanation of differing file formats. It might be helpful for us novices to also indicate what tools (programs) are used to first create and to then access each file type.

[Med]

Jpg files should be used for smooth transitions in photo's

Gif files should be used for line-art, like logo's

Png files kan be used for either photo's or lineart. The advantage is that it support alpha channels. You can have transperancy like gif images but without the annoying white borders, It's much more smooth. Alpha channels also mean the image can be semi-tranparent. But this isn't supported very well by IE. (this all goes for png-24, not for png-8)

[Houdas]

I never used PNGs on a webpage (mainly because IE doesn't support transparency). JPGs and GIFs are enough for me

[someonewhois]

I use PNG's for vectors (Macromedia Fireworks) and for saving screenshots from Paint. When you save a jpeg in paint, it goes all weird, and a gif screws the colors up (paint uses default palletes, unlike Photoshop and the likes which chose the 256 colors you're actually using it). Paint manages to create pngs that are loseless and look good, while still being small.

They don't talk about the major copyright issues with GIF. They mentioned it when they were talking about PNG, but they didn't actually ellaborate on it. GIF is like mp3, and PNG is like ogg. Gif/mp3 are both widely used, and widely accepted, but they have copyrights on them. Things like the GD Library at one point had to remove GIF due to copyright issues -- since then, it's been reinstated, but still. PNG and OGG have similar principals. They both are copyright-free, they both work BETTER than Gif/mp3 (ogg has no loss, and goes smaller, mp3 has loss and not as small), yet due to when they were introduced, they aren't widely used.

[Talkfreelance]

Generally Gif. are used for smaller graphics with less colours, they contain a small file size, backgrounds, plain colours etc should be gifs. Jpgs are used for high resolution, colour photos or images.

I don't know why anyone would still chose to use GIF. PNG is much smaller.

[passion8]

Consider reading this:

http://www.w3.org/QA/Tips/png-gif

[Consider-This]

I think this is a great article because beginners like me don't have instant knowledge about these things, and testing the difference takes a long time... plus, I was never entirely certain about my results because of my tendency to forget precisely what I did, so that things aren't ultimately all oranges, or all apples.

Thank you.

[RodneyB]

A nice addition to the article would be to state what browsers can show PNG files by default and which can't (something I always wonder about when thinking of using PNGs)

[xhtmlcoder]

Most graphical browsers built this century can view PNG it's mainly the Alpha Transparency of PNG-24 that MSIE cannot deal with though it will cope with PNG-8 or binary transparency.