Compression. When to use JPG, GIF and PNG

[Surly]

I see a lot of people using stupid compression for their signatures, and it angers me! ANGRY!!!!! If you'd take the time to learn a little bit about compression, you can achieve the dream of making me happy. I know, it seemed impossible... but now it can be yours for the special introductory rate of "Stop being a dumbshit and listen up!" I won't go into any boring historical bullshit about "why it's called a jpeg" just to prove I have done my homework. If you want a fucking history lesson go to school for this shit.

Lets take this signature image as an example-
http://www.anvilsociety.com/sigs/sig_surly.gif
A .gif file as the finished product. 37.51kb, slightly above what I'd consider average, but I'll explain it later.


JPG
You'll notice that a large number of people on these boards use JPEG images. This is good, and in most cases ideal for minimal size. JPEG is a lossy compression method that does perceptual blending as you reduce its quality. Photoshop and other programs can apply a blur during the compression process to reduce the noticability of the blur.

Example:
http://www.anvilsociety.com/test/badjpeg.jpg
Here's what the image looks like with a #333333 background compressed as much as it possibly can be compressed. It doesn't look that bad, though, huh?! The thing about JPG compression is, like any other compression, the amount of colors in it influences what it looks like after compression very heavily! 4.5kb, amazingly tiny! That's great news, but it doesn't look very clean.

Here it is again with what I'd call "ideal" compression:
http://www.anvilsociety.com/test/goodjpeg.jpg
10Kb this time, with a quality of 35 and a slight blur applied during compression. The final product is pretty clean, and I'd settle with it right here and now! Your goal in compressing a JPG for a 150px by 500px image should probably be somewhere around 20-25kb depending on the range of colors you have in it. Obviously, this signature has less color variation and can go even lower (10kb is quite nice!). I can also get away with much larger compression because of this. I used a quality level of 35, wheras more colorful signatures will likely want to stay around 60-65.

Problems with the JPG Format-
JPEG images there have another limitation - no transparency. This isn't an issue at all for signatures that use up their entire rectangular box, but for cases like this you have to apply a faux background to them before compression. This makes the signature useless on any forum that doesn't use a #333333 background.

GIF
The next option for you is the long standing de facto transperancy image format known as GIF! With GIF, you can specify transparent pixels to show the background of the document they are applied to. The problem with a GIF is that it has only 256 possible colors (one of which is used for transparent pixels), and every pixel can have only one color applied to it. .gif images are very popular for images smaller than 100px by 100px because they offer the best quality and size compression at that level (excluding the newer png-8 which is replacing it, but I'll get into that in a second).

Basically, if you want a signature image to be truly transparent, and not "fake transparent" you're going to want to use .gif in most cases. GIF images can be used on any forum regardless of their background colors or textures.

Compressing in GIFs is a simple matter of choosing which colors you want to use. For BEST compression, always use an amount of colors that are powers of 2 (2, 4, 8, 16, 32, 64, 128, or 256).

Lets take a look!
http://www.anvilsociety.com/test/badgif.gif
Here we've reached our previous "good" record of 10kb. You can see, quite obviously, that GIF images are an inferior compression for images of this size. Unless you're really looking for this sort of "effect" its best to use more colors with your gif.

Again, I'll stress, the only reason to use GIF over a JPEG with a background color is for versatility. If you want to use it on many different forums, AND it has transparency effects, THEN consider gif.

You already know what a good .gif looks like, as I posted it as the original, so lets go to PNG.

PNG
This is the portable network graphic, the newest form of compression on the intarwebs. PNG comes in two forms. PNG-8 (directly competitive to gif), and PNG-24 (the lossless compression everyone seems to love so much). PNG-24 is lossless, AND it supports transparency. What is lossless? Lossless means that your original working image will look exactly the same as your compressed product. Tempting, huh? But let me explain why you should NEVER EVER use PNG-24!

PNG-24 is a format designed for sending photographic material and important documents that cannot afford to be compressed in a lossy fashion. Don't be such an arrogant dick to think that your piece of shit signature is so goddamned important that you should force me to download 150kb+ of data just to view the fucking thing. Your signature sucks, stop hogging my fucking bandwidth! GODDAMNIT.

Additionally, PNG-24 is INCOMPATIBLE with most browsers. Firefox is the only browser that supports it. Here, lets look:
http://www.anvilsociety.com/test/bigpng.png
o noes! 110kb just to get the same quality as the original gif i posted. and additionally, if you're using anything but firefox right now you're going to see some shitty grey background around it.

now PNG-24 with no transparency compared to the original gif:
http://www.anvilsociety.com/sigs/sig_surly.gif
http://www.anvilsociety.com/test/biggerpng.png
Ah, now that's a little better. Still 90kb. And it'd be up to 250kb depending on how many colors are in it. Don't force people to download a quarter of a megabyte just to view the piece of shit you vomited out into your fucking photoshop screen. It's crap, and it's annoying. And fuck you for considering it.

For those of you who can't tell, the one on the top is the gif.

The last option for you to consider is PNG-8. It is, again, higher quality than gif, but it isn't visible with the naked eye. For images larger than 50px by 50px, PNG-8 shouldn't even be considered. Example:
http://www.anvilsociety.com/test/crappng.png
This is as close as I can get to 10kb with PNG-8 and still retain some similarity to the original image. PNG-8 is shit for images of this size. Unlike gif, however, PNGs handle color variation much better. If you have an image where you absolutely MUST have super duper quality... well ok, fine, consider PNG-8 if you think your abomination of a sig is worth the quality.

Here it is in 256 colors on PNG-8:
http://www.anvilsociety.com/test/goodpng.png
Very clean, nearly lossless... it's an "ok" compression. You're still a prick for using it because the file size is still too big for virtually (read: you can't SEE the difference) the same quality product, but at least 40kb is tolerable.

It is also possible but unlikely that your sigs may be smaller in PNG-8 than GIF, so it's worth looking at if nothing else. Generally though it's never of use, and png compatibility is an issue with many browsers.

So that does it, quit making over-sized pieces of shit. I have my settings on this forum load up 100 posts per page rather than the standard 10, so after clearing my cache I'm downloading 5mb or more on every fucking page view thanks to people like BENSIDHE =D

[Stark]

In photoshop, instead of going to "save as" go to "save for web", you can have top quality at a minimal size.

[Spinewire]

lol mine is 62kbs

When i get my PC back i'll make it smaller just to make you happy.

I can already see the artifacts round the hair as it is tho and they make me want to vomit.

.Gif also make me want to vomit and PNG-24 is just rude.

[Metal Wolf]

I use a very high quality Jpeg setting for my sigs. They end up in the 20 to 40 range. However for one particular person I made a 127kb png just so he could plauge people with this sig, stuff like that makes him happy.

For Photoshop and Correl there are several modes of .jpeg you can save with. I much prefer the 4:4:2 and 4:2:2 to the standard 2:2:2 meathod. the first two are also known as optimal or similar words in other Photo programs. They're just higher quality compression ratios that produce a slightly larger image than satandard. And I try to avoid the progressive jpeg save like the plauge as it has bad quality and a larger file size on average for small images.

Sig below is a bit on the largeish size but its got a ton of colors in it, full orange, red spectrum and a good deal of the blue to black. If your not an egotist use the 24k pallet instead of the 32k and the save size will drop a ton.

[Bensidhe]

LOL, point taken Surly . I use the Firefox browser, have my settings set to the standard 10 per page and cache set to 50megs . I also have a very fast ISP connection ( 5 MB +) so it takes nothing to see whats here or on any forum . Why set yours to 100 per page? God, thats self imposed torture dude . Anyway I have a problem with .gifs as they suck for visual quality and usually use .png for all the transparencies I put into them . jpgs work, but not too well in the GIMP, so using Corel is my other option . Thanks for the info though and its time to cut your browser #s per page down to maybe 25 ..ow . my eyes ! :eek:

One other point my grumpy dwarven friend, never use the colorful metaphors anywhere but here if you ever teach a class down the road . Your students will A) walk out on you, b) gank you in the teachers parking lot c) both of the afore mentioned . I have a thick skin, I have waded through hours of verbal and mental abuse at the hands of some of the best in North America .Others here have not and may take it to heart . Just a sidenote you may want to keep in mind :)

[Surly]

The thread wasn't directed at you! You big-sig-having bastard. Who said anything about schooling? This wasn't a goddamned pre-school lesson, it was a fucking force-fed lecture backed up by a bent steel pipe and an arsenal of curse words. If they can't take it, they can kiss my ass. I never asked them to attend my class.

Mr. Pain is the best teacher, just no one ever wants to take his classes.

[Celerity]

Good post. I know your focus was on compression, but you could expand on the details of GIF transparency for those who've never used it before. I'm bored, so allow me:

In a GIF, since transparency is a color and pixels have only one color, a pixel is either transparent or it isn't. There's no partial transparency. The result of this limitation is that you can't have an anti-aliased edge bordering a transparent zone.
http://img310.imageshack.us/img310/3939/cplain9ov.gifAn ugly, aliased circle.

There are two ways around this (both available in the Save For Web dialog):


1) You can specify a transparency dither effect, but it creates a rough edge which is only slightly better than the original.
http://img513.imageshack.us/img513/3069/cdiff9jp.gifDiffusion Transparency Dither. Eeew.


2) You can specify a Matte color for semi transparent pixels. Basically it renders the semi-transparent pixels as if that color were behind them:
http://img78.imageshack.us/img78/2305/cgm0tf.gif#333333 Matte. Looks good!
This is what you need to do, but it only works for one color of background, so you have to make different versions of your sig for different sites. Otherwise you end up with a nice halo:
http://img78.imageshack.us/img78/5322/cwm9un.gif#ffffff Matte


This is why the alpha transparency ability of PNG-24 is so coveted, but as mentioned the files are too big for things like forum signatures.

Hopefully someone finds this information useful.

[Solini]

Thanks Surly! I learned from your post.

What I still wonder tho is, how do you get such a nice gif, just by not using more then 256 colors right when creating the image?? is that all? I know I am newb!! I made some sigs in the past and then I wanted to make it gif and it became crap.. Really I never realized I shouldn't use more then 256 colors when creating the image :bang: How can I make sure that I do not use more then 256 colors in Adobe when creating the signature?

Ooh and I see my sig is to big as well :bang: 50 kb I will do something about it when I have the time (now I am at work and I can't)

[Surly]

Well, GIFs and PNG-8 are limited to a max of 256 colors. If you WANT to limit yourself to 256 colors ahead of time you can get a decent color pallet rather easily and apply it to your "Indexed Colors" in the "Image -> Mode -> Indexed" mode.

Personally, I make them all in RGB mode (as opposed to CMYK). Every color in the RGB spectrum can be used by GIF images, it's just limited to 256 of them maximum. Photoshop's compression software is good shit though, so selecting which colors you want during compression is easy as hell. If you want to use RGB mode (which you probably are, by default) go to Image -> Mode -> RGB. Make sure, as Stark pointed out, you are using File - Save For Web instead of "Save As" to compress these images!

Is that what you're asking?

My guide didn't go in-depth very much because it was an idiot's guide to not-being-an-idiot. I can write you a motherfucking thesis on this if you want, but technical-speak is lost on most people... and I hate writing shit that way to boot.

[Solini]

Also thanks Celerity! I missed your post.

And yes Surly your answer was usefull to me.

[Pavlos]

Hey Surly, your current sig is smaller as a PNG file... (27855 -> 22991)

[Nehemia]

Don' even` ask my signatures' size. *laughs*

[Surly]

Hey Surly, your current sig is smaller as a PNG file... (27855 -> 22991)I have two responses for you. Don't read #2 until you've completed #1.


#1 - Oh yeah? Prove it!


#2 - Hahaha, sucker! I don't give a fuck if it's smaller. As I stated numerous times in my original post, all forms of PNG have compatibility issues with transparency in different browsers so I will not be using them until the newer Cascading Style Sheet standard is adopted by browsers uniformly! At that point I'll be all about the .PNG. It's a good compression, I like it, it has its uses. It's just not good for transparency yet. So don't sass me you fuckin' dick!!! If you simply must use PNG, as I said, PNG-8 is best. By personal preference I will stick to .GIF (unless the size difference becomes huge) for the sake of compatibility.

[Surly]

Good post. I know your focus was on compression, but you could expand on the details of GIF transparency for those who've never used it before. I'm bored, so allow me:

In a GIF, since transparency is a color and pixels have only one color, a pixel is either transparent or it isn't. There's no partial transparency. The result of this limitation is that you can't have an anti-aliased edge bordering a transparent zone.
http://img310.imageshack.us/img310/3939/cplain9ov.gifAn ugly, aliased circle.

There are two ways around this (both available in the Save For Web dialog):


1) You can specify a transparency dither effect, but it creates a rough edge which is only slightly better than the original.
http://img513.imageshack.us/img513/3069/cdiff9jp.gifDiffusion Transparency Dither. Eeew.


2) You can specify a Matte color for semi transparent pixels. Basically it renders the semi-transparent pixels as if that color were behind them:
http://img78.imageshack.us/img78/2305/cgm0tf.gif#333333 Matte. Looks good!
This is what you need to do, but it only works for one color of background, so you have to make different versions of your sig for different sites. Otherwise you end up with a nice halo:
http://img78.imageshack.us/img78/5322/cwm9un.gif#ffffff Matte


This is why the alpha transparency ability of PNG-24 is so coveted, but as mentioned the files are too big for things like forum signatures.

Hopefully someone finds this information useful.You didn't cover Pattern Dither, which is really pretty good. Mattes are always better, but less versatile. If you're using the image on a lot of different colored backgrounds, go with the pattern transparency dither!

Also a note about Mattes: You can use a matte that is "close" to the background color and it'll still look great. Want evidence of it? Just look into the quote box which now has a #666666 background, the #333333 matte looks fine!

[Stark]

So don't sass me you fuckin' dick!!!

I steal lines from you, IRL.

[Celerity]

You didn't cover Pattern Dither, which is really pretty good. Mattes are always better, but less versatile. If you're using the image on a lot of different colored backgrounds, go with the pattern transparency dither!

Also a note about Mattes: You can use a matte that is "close" to the background color and it'll still look great. Want evidence of it? Just look into the quote box which now has a #666666 background, the #333333 matte looks fine!

http://img516.imageshack.us/img516/1526/cpd9jb.gifPattern Dither.

Maybe I'm missing some settings, but that looks pretty crap to me. :p I suppose it depends on the shape of the edge and the color of the background.

Yeah, getting a matte color close is usually good enough. The difference in edge quality is only noticeable if you get two inches from the screen.

[Surly]

Sweet jesus, that's the worst pattern dither I've ever seen in my life! lol, ok, don't use pattern dither on plain black circles! It's usually great for straighter edges (like, if your sig is a rectangle with some parts sticking out at places, those pieces that stick out are usually straight-edged). I used a pattern dither on all of my sigs in the original post, though. Guess the best thing to do (as usual) is "fuck with it 'til it looks right"

[Pavlos]

#2 - Hahaha, sucker! I don't give a fuck if it's smaller.
[/quote]
Hey, I don't give a fuck if your dick is smaller as well.



Not knowing something is OK but claiming you do while you don't is not.

As I stated numerous times in my original post, all forms of PNG have compatibility issues with transparency in different browsers so I will not be using them until the newer Cascading Style Sheet standard is adopted by browsers uniformly!

The PNG transparency issues you mention are not what you think. GIF-like transparency (one transparent color) is handled fine by both Mozilla and IE. The problem is with IE's inability to handle the alpha channel in PNGs, if present, something that .gif can't do at all.

Also, CSS has nothing to do with PNG. That's a different thingy.

At that point I'll be all about the .PNG. It's a good compression, I like it, it has its uses. It's just not good for transparency yet. So don't sass me you fuckin' dick!!! If you simply must use PNG, as I said, PNG-8 is best. By personal preference I will stick to .GIF (unless the size difference becomes huge) for the sake of compatibility.

Sure.

[Surly]

I know that you fuck! CSS compatibility with internet explorer is coming out with the same version that supports PNG (and I don't know what they call that "update"). So sue me, I'm still right. When CSS3 compatibility is around, PNGs will work... why the fuck are you being so nitpicky? do I even know you?

CSS3 allows for alpha blending of images, which IE can't handle. It's all packaged together and if you didn't know that... then don't get all pissy with me.

[Bensidhe]

Hence, the reason they call him Surly . IE 7 beta 2 is out, but I haven't had a shot at it yet . It requires me to have SP2 and that shit will never see any space on my HD . Too much like a virus, once it gets in, its a real bastard to get rid of . If anyone else knows about web design and such don't be afraid to step up . You have plenty of eyes and ears to watch and listen here . Its all good in whatever context its given . :D

[Surly]

You know, I think Pavlos designed www.oromea.com so despite the fact I'm a giant prick I think he's a great designer.

[Pavlos]

Actually, I didn't design the site but thank you :)

[Rashick]

Cheers for the valuable information Surly, and it's nice for a refreshing straight to the point approach.

Personally i always used simple default JPG compression because i was never fully aware of the subtle quality differences (and my sigs are constantly shite quality anyway, nothing complex), but thanks to that kick-in-the face-post i'll be sure to have a go at .Gif, and .Png seeing as 99% of my sigs have no transparency in them.

Thanks to Celerity aswell for the Matte advice. That was something else i previously overlooked but will be examining more in future. I only have a basic Paint Shop Pro trial for graphics software right now (no wonder the crappy sigs, eh?), and ill be sure to grab myself a copy of Photoshop.

[UknowsI]

It is also possible but unlikely that your sigs may be smaller in PNG-8 than GIF, so it's worth looking at if nothing else.
The size of a png image depends on your compression algorithm. If you use pngout (http://advsys.net/ken/utils.htm), the picture in your example will be lossless compressed to 32 KB or 5911 bytes less than the original GIF. So if you want to use png, then this is a nice program to have.

[Spinewire]

The size of a png image depends on your compression algorithm. If you use pngout (http://advsys.net/ken/utils.htm), the picture in your example will be lossless compressed to 32 KB or 5911 bytes less than the original GIF. So if you want to use png, then this is a nice program to have.
That is some sexy shit right there..

I'll give that a try when my PC is working.

[Jarlaxle[mezzo]]

.BMP for the win.

[snowbert]

luckily mine is textbased :rolleyes: