PNG or GIF?

I have absolutely no idea where to ask this question, so I've come here for help. I like to make sprites, but I've been saving all of them in the GIF format. It has come to my attention that PNG can also do transparencies and animations, but I can only save my animations in GIF anyway (I use Jasc Animation Shop). If this is all painfully obvious to you guys, I'll just say sorry in advance, but I've just had to learn as I go.

Anyway, I have tested both formats out, but the only difference seems to be file size. Which format is best for saving transparencies? I've tried to read up on the differences, but every single god damn article is in crazy nerd talk, so it tends to go over my head at times. I hope someone might respond here.

The special thing about PNG is Alpha colors. Alpha colors are colors that are only part transparent(ie: a 50% transparent block of red)
Should be noted though that IE 6 does not support Alpha colors. IE 7, Firefox, and Opera does.
PNG is also great for vector type of images.
Unless you meet either of these usages, theres not too much of a reason to use it other then if the image size would be smaller.

Main differences: PNG can't do animation, GIF doesn't support more than 256 colors.

As for transparency, GIF support single bit (ie, a pixel either has color or is transparent), and PNG support a full alpha channel (ie, you can have semitransparent pixels).

PNG

http://en.wikipedia.org/wiki/Mng

MNG - the animated version of PNG.

GIF blows. Just from my memory: PNG supports 16, 24, 32, 48 and probably more color depths, short palettes (when not all colours used), alpha channels, extra layers, colour profiles, offers much better compression, and is completely free and open. Use MNG for animation.

GIF sucks sure it supports animation, but it only supports 256 colours, it's full of legacy, and it's PATENTED, which means that it's PROPIETARY.

>>6
gif is free as of october 1st.
gtfo.

png's are HUEG

>>7
256 colors vs 16 million colors. no duh

>>7
Adobe tard. PNGs are way smaller than GIF files, except if your image editor sucks. Don't rely on Adobe Photoshop to save PNGs. Use Paint Shop Pro, or use the wonderful PNGOUT.EXE (works fine under Wine too) to reduce your files until it can't save 0.125 bytes, that's right, 1 bit. For example:

Santa1.jpg, A.I. Love You colour page, 660×896, reduced to 256 colours for faGIF.
GIF size: 234403 bytes
PNG size: 190107 bytes

logo.gif, Google's logo, 276×110, 256 colours.
GIF size: 8858 bytes
PNG size: 7729 bytes

master.png: Master for a digital photo, 3072×2304, 24 bpp.
GIF size: ??? PROFIT oops

>>9
LOL PSP

Adobe does just fine with PNG if you use Imageready, Fireworks is fine too.

GIF is good enough, better compression is not much of a reason to use PNG. However, 256 limit sucks in many cases so unless you're saving low-colour pixel art, you'll probably want the 24-bit support or proper 32-bit alpha support PNG offers - only downside is that IE fucks things up. I personally use PNG but serve out .gif equivalents to people with older IE user agents on my site, and use PNG a lot for other things. GIF wins on compatibility though - stuff like AIM still doesn't support PNGs as inline images, etc.

Wow, thanks a lot for all the replies everyone! I really appreciate all your input. I'm not making anything fancy (such as vectors), I'm just extracting silly psx sprites.

>>5
I read that page and looked up more information about that. It really doesn't seem very widely supported, so I guess I'll have to stick with GIF to animate things still. Maybe that will catch on someday...

>>7
I know next to nothing about this stuff, but the PNG really was smaller, as >>9 stated (I also use PSP). See for yourself:

GIF: http://tinyurl.com/y6j8mx
PNG: http://tinyurl.com/yxrjva

>>10
LOL PSP
This proves you're a moron. You still think it's PSP 3, or some sort of Deluxe Paint. I'd like to see your face the day you try PSP X or XI.

GIF is good enough, better compression is not much of a reason to use PNG.
You're a fucking retard. Not only GIF doesn't support anything you'd need other than your shitty obnoxious animations, but better compression is vital for internets, only you won't notice it in your stupid web sight in a cheap ISP your daddy pays for because nobody visits it.

only downside is that IE fucks things up
There are workarounds for this that will enable transparency. And let MSIE morons fuck themselves anyways. Just detect the HTTP User-Agent and serve goatse if they're using MSIE.

>>12
LOL PSP

Also, as the difference in a low-colour GIF example and the comparable PNG version is often only a matter of 10-20%, even in your examples, no, I don't think it matters that much about the size difference. It's an advantage, but one that becomes less and less important when many websites are being designed for broadband connections, where a 5kb PNG isn't going to make much of a difference from a 7kb GIF except on browsers that don't support the PNG right. (Did you notice that IE4-IE6 gets the gamma or something wrong and so the colours in even non-transparent PNGs aren't reproduced properly, too?)

Also the IE workarounds are fucking horrible from a hacky shitty code standpoint and not very many people use them. Again, are your two saved kilobytes worth the effort (and precious bytes of ASCII characters!!) if you have to code in that horrible DirectX filter override thing into each of your pages? Oh yeah okay just block the most popular browser on the internet, that'll really show those MICRO$HIT assholes! MORAN.

PNG is a better format but if you're doing something that GIF supports (low colour, no need for transparency) it's not a bad idea to consider GIF, as it still has the advantage of being more widely supported.

>>13
LOL PSP
Lol >>13

Also, as the difference in a low-colour GIF example and the comparable PNG version is often only a matter of 10-20%
If 10%..20% is not a big difference for you, you haven't done anything serious.

Did you notice that IE4-IE6 gets the gamma or something wrong
Of course. The PNG gamma is broken (as almost anything) in MSIE. However, if all the images of your site (at least all the UI images) are PNGs, it'll look consistently wrong, and that's more than MSIE users deserve. Don't come replying that you want colours to look this or that way because they'll NEVER will; even if MSIE had proper PNG support, their monitors, graphics drivers and room light conditions will be differently adjusted than yours and colours will not be the same.

Also the IE workarounds are fucking horrible from a hacky shitty code standpoint and not very many people use them.
Since not very many people use them, you won't use them? Wow smrat.

Oh yeah okay just block the most popular browser on the internet, that'll really show those MICRO$HIT assholes!
As much as I'd want to tell MSIE idiots to fuck off, I can't, because I'm doing serious business with it. Were it not so, I wouldn't know about MSIE's issues and workarounds.

PNG is a better format but if you're doing something that GIF supports (low colour, no need for transparency) it's not a bad idea to consider GIF, as it still has the advantage of being more widely supported.
Except animations, which are terrible and every time I see them I want to kill the faggot who used it (doesn't happen though, as I banned them in my real browser), there's not a single feature GIF supports that MSIE doesn't support for PNG, and the only side effect is the slightly different gamma, which, as I explained, is not a big problem.

>>14
10-20% often isn't much of a big difference, no. For the type of graphics I'm arguing that GIF is useful for (no transparency, 256 colour) it's doubtful you're going to have anything large enough for the PNG compression to mean anything, and the second you put a photo JPEG or anything else on a page you've probably already dwarfed that tiny size advantage to be even more of a moot point. I value small webpages, but I don't see "GIF bloat" as a significant factor in any webpage sizes.

As for colours, yes, colours on the web are shitty and hard anyway, but I'm just saying it's another disadvantage of PNG compared to GIF. My point is not that GIF is superior to PNG, but that PNGs advantages in these low-colour no transparency images are small compared to the compatibility advantages of GIF which works everywhere (including old old browsers and apps like AIM) and it retains the right gamma.

I am not arguing for my usage of GIF, simply general usage of it by people like the OP. For this reason it's important to note that nobody uses the PNG transparency hacks because it's often unviable because of inconvenience, lack of technical knowledge, lack of access to page code, and hideous ugly hacky code clutter. It's a poor excuse for the negative PNG not having real transparency support in IE~6.

My point about IE was (terrible) sarcasm, of course it can't be ignored and blocked unless you're a complete fucktard. All I'm saying is that GIF is still a valid and sane choice for certain types of images, as it is more compatible and still compresses pretty well. PNG is slowly eclipsing GIF in the few cases GIF remains superior, but for now it's still a fine choice to use either.

By the way, I'm a stupid fag and I don't understand how to do that indented quote thing you're doing. How?

bumping a shitty thread is like saging all the threads above it

>>15
You can quote stuff with a single greater-than sign followed by a space, then the text you want to quote (without line breaks).

10-20% often isn't much of a big difference, no.
Not for my pet's home page, for sure, but I make bread with this.

For the type of graphics I'm arguing that GIF is useful for (no transparency, 256 colour) it's doubtful you're going to have anything large enough for the PNG compression to mean anything
Some 100 images from different parts of a portal, saving enough  bandwidth (size * number of downloads) to care. For once, for one fucking time, the widely-supported standard supports the best compression. Bloody hell, why don't take advantage of about the only most-efficient-in-its-class standard in the world? (Note: I'm aware that there are even better solutions than PNG for some cases of lossless compression, but they are not free so they are out of the question.)

the second you put a photo JPEG
JPEG is out of the question as it lossy. What you want in JPEG you don't want in GIF/PNG, and what you want in GIF/PNG you don't want in JPEG unless you want it to look like utter shit blocky grainy DCTed crap.

As for blocking MSIE idiots, I'd gladly do that on personal stuff (or at least, include an extra HA HA ENJOY YOUR MALWARE banner), but not when I'm getting paid. And part of my job is getting stuff to work with MSIE, so in a way, I profit from it, even if it's not the most pleasuring part of the job.

>>17
You can quote stuff with a single greater-than sign followed by a space, then the text you want to quote (without line breaks).
Amazing. Thanks.

Your point about PNG starting to save significant bandwidth on a page with 100 images on a portal is fair, but when it comes down to that I'd say you'd more likely save bandwidth if you modified the portal to not be as image heavy, which is usually better for accessibility and usability as well. As I said, I don't see the small PNG savings as significant or worth the time in most cases, and it's quite possible the compatibility advantages of GIF (or simply ignorance about PNG) aren't enough to make using GIF a braindead decision. It's valid, and people shouldn't be berated for using it.

>>18
Let's agree to disagree (wow, polite discussion on 4chan). BTW, the 100 images are not served in the same page, of course (I'd kill myself if I came up with a 100 images layout). They're application buttons and such.

They're application buttons and such.
Use SVG.

>>20
If you're >>18: You talk about using GIF over PNG because of compatibility, and then mention SVG!?

>>21
NO I'M >>18 (and Spartacus)

SVG has the potential to be great, in 5 years and if they fix the packaging format so it works more like GIF and JPEG and doesn't require shitty <object> tags. For now we wait until IE supports it, because it's useless until then.

>>22
SVG can be embedded in any XML document (eg XHTML). For external references, object is actually a much better element than img, because it allows fallback. So you have an object element reference an SVG file, and a nested object reference a PNG file, and a nested object inside that with just text, and the browser will pick the first one it supports. Although IE probably doesn't support it at all (but that only matters if you want idiots to use your websight).

>>23
Is that the rationale, backwards compatibility? Still seems odd to me - semantically that's not quite right, to put an <img> inside an <object>, and why wasn't this done with PNG when it came on the scene as a new format?

It just seems awkward and overblown to me. SVG looks like an image, it should work like one. Either that or XHTML2.0 should abandon <img> for <object> if it's so good - it's dumb to be selective about it.

>>24
img is being phased out, but object support isn't good enough yet. I don't really remember what they're planning for XHTML2, but I recall a long time ago there was talk of leaving img out of it.

Ideally, the user should not be able to distinguish between:
<object data="test.png">alt</object>
and
<img src="test.png" alt="alt"/>
(although img alt text can be decorated with a border or smt)
(also data seems to have become src in XHTML2)

Currently this seems to work in Opera and Firefox at least, but IE6 just displays alt for the object even if the data is valid.

I ordered these shoes when it collapsed. http://www.comeboot.com/ugg-classic-metallic-boots.html  Metallic UGG. http://www.comeboot.com/ugg-classic-metallic-boots.html  Metallic UGG I ordered these shoes by mistake was originally booked is not available. The price was the same, so I took a chance. http://www.comeboot.com/  Cream UGG Boot. http://www.comeboot.com/  Cream UGG Boot I'm glad I did. http://www.comeboot.com/ugg-classic-knit-boots.html  Classic Knit ugg. http://www.comeboot.com/ugg-classic-knit-boots.html  Classic Knit ugg When I ordered in time for