png/gif/jpg

piersk

Ok, I know when to use gif and when to use jpg, but I'm stuck when it comes to png.

When should you use this, and is it preferable to the other two?

vaaaska

PNG is superior to gif. It can allow you to do alot of neat transparency effects...like gradients or real shadow effects for instance. Bleh, just another reason to not use IE...

http://www.koivi.com/ie-png-transparency/

I'm not endorsing this or anything, it's just one of the first Google things I found...but it goes through the issues...

dartcol

I was under the impression that some browsers don't support png-24 and that there is limited support for png-8.

I could be wrong, mind you.

goldbug

Originally posted by dartcol
I was under the impression that some browsers don't support png-24 and that there is limited support for png-8.

I could be wrong, mind you.

I've never had a problem with any browser not supporting PNG-24. There's probably some fringe/old browsers out there that can't, but 99.9% of your web traffic probably has no problem with them.

pohopo

I go for whatever keeps my image clean and is the smallest. 94% of the time that is a gif file. JPG is usually for pictures with a large color pallete.

dartcol

Originally posted by goldbug
I've never had a problem with any browser not supporting PNG-24. There's probably some fringe/old browsers out there that can't, but 99.9% of your web traffic probably has no problem with them.

Interesting news. I honestly didn't know this. I experiemented a little and found that pohopo (it took five attempts to write your username!) was right about size.

Thi brings us back to Piersk's original question of when is the right time to use png's. I can imagine them being used when the image effect is the focus of the website page, for example, graphic artists demonstrating their design portfolio and such but other than that it seems to me that the plain old gif is better suited to web graphics. Could be wrong again, mind you!!

vaaaska

Originally posted by dartcol
Thi brings us back to Piersk's original question of when is the right time to use png's. I can imagine them being used when the image effect is the focus of the website page, for example, graphic artists demonstrating their design portfolio and such but other than that it seems to me that the plain old gif is better suited to web graphics. Could be wrong again, mind you!!

Well, I've use png's in tabular data where the backgrounds of each row alternated - can't do that without the ugly anti-aliased edges on gifs. Especially if you allow people to change CSS to their own likings.

PNG's hold a gradient better than gifs in backgrounds.

If you want a reliable shadow effect that works on ALL backgrounds you toss at it then pngs works and gifs simply will not.

I use png's on common images on sites, as I like to use variable background colors. Gif's give things completely different looks to things.

While it is about page design, it's not necessarily a designer only kind of tool.

goldbug

Originally posted by vaaaska
PNG's hold a gradient better than gifs in backgrounds.

Definitely! I've even found high-quality jpegs leave much to be desired in this situation as well (especially when repeat-x/repeat-y is applied), but PNGs always seem to retain quality.

pohopo

the best way is in photoshop you save for web and then you can try and view the image in every format. you then go for the smallest one that meets your quality needs.

Weedpacket

So far the only things I've seen here about when to use PNGs and when to use GIFs has centred on the stuff that PNGs can do which GIFs can't, and vice versa. That doesn't help when it comes to the overlap, which is very large (for GIF): except for animation, there is nothing that GIF can do that PNG can't. Specifically, PNG can do palette-based images with palettes from 1 to 8 bits in size, with or without a transparent colour (not to be confused with a genuine alpha mask).

For something like a 1x1 transparent spacer image, GIF is a few bytes smaller (since PNG requires a bit more fixed-size overhead to implement its overall better compression), but (a) how much difference will that make really, and (b) who uses spacer GIFs these days anyway?

As for using Photoshop, unless Adobe have changed their PNG code recently the PNGs Photoshop produces are generally quite a bit larger than they could be. A program like pngcrush can shrink the typical Photoshop-generated PNG by something like 15% by picking different compression options.

Merve

What davidjam says sounds good to me.

But when I need transparency in images, I use .gif's. Too many people use Internet Explorer for me not to do so.

To expand on piersk's question, are pngs and gifs generally the same size, or is generally smaller or larger than the other?

Weedpacket

Originally posted by davidjam
How about this:

GIF for buttons and icons

Okay; now my question is "why not PNG for these? Why use two image formats when one is perfectly capable of doing the job of both?"

Weedpacket

Originally posted by Merve
What davidjam says sounds good to me.

But when I need transparency in images, I use .gif's. Too many people use Internet Explorer for me not to do so.

Even Internet Explorer can properly render palette-based PNGs with a transparent index.

To expand on piersk's question, are pngs and gifs generally the same size, or is generally smaller or larger than the other?

There is a filesize threshold (which I haven't looked into) below which GIF is smaller (for example, as a PNG I got your avatar down to 338 bytes without trouble, and as a GIF I managed to make it 316 bytes). But the threshold is pretty low, and probably swamped by other issues.

vaaaska

Well, along the same lines...since I'm trying to deal with it...

In my index.php document I have in the style...

.innerbox {
filter:Progid:dXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src='imgs/bg-menu.png');
}
.innerbox[class] {
background: url(imgs/bg-menu.png) repeat;
}
.innerbox {
	height: auto important!;
	height: 100%;
}

which works great. Now, when I move this to the stylesheet as css/style.css and use this:

.innerbox {
filter:Progid:dXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src='../imgs/bg-menu.png');
}
.innerbox[class] {
background: url(../imgs/bg-menu.png) repeat;
}
.innerbox {
	height: auto important!;
	height: 100%;
}

it simply will not work in IE. The paths are correct. ??? Am I not seeing something completely dumb on the paths?

I won't even go into the problems with all of this and trying to place an inline list inside of the innerbox...I may have discovered a bug in Firefox, but oh well...

Edit: had to chonk around with that a little since the forum smilies system was inserting some junk...

pohopo

with gif/png I always set the image to the exact amount of colors of my image for the smallest size with no quality loss. so with Photoshop I set both gif and png-8 to 17 colors and here are the sizes.

.gif = 1.696
.png = 1.907

vaaaska

I don't see this being a debate purely about numbers. It's about relevance...

I've been working for weeks now on two sites that have shifting backgrounds - different images, colors and sometimes even patterns. They are coming along pretty nicely too. The reason we're going this route is by client request - they saw something else I did and wanted to push it further.

I could very easily write a bunch of css rules and create a billion "transparent" gif's to accomodate the scenarios, but it's so much easier to build graphic elements using transparent png's that will work where ever they are needed.

However, on the navigation (on one of them) I still used gif's because the text is pure non-anti-aliased - no need for png's there.

I'm considering offering a special next month:

[FONT=arial]HALF OFF .PNG's SPECIAL*[/FONT]

*Client responsible for additional bandwidth fees

goldbug

Originally posted by davidjam
Good question. So I did some testing (using Adobe Illustrator "Save for web..." on an image-based submit button):

On both these formats the "color reduction algorithm", dither, and transparency were the same.

GIF - 8 COLOR --> 586 bytes --> looks crappy

GIF - 16 COLOR --> 783 bytes --> looks adequate

GIF - 32 COLOR --> 972 bytes --> looks good

PNG-8 - 8 COLOR --> 895 bytes --> crappy

PNG-8 - 16 COLOR --> 1.017 k --> adequate

PNG-8 - 32 COLOR --> 1.186 k --> good

(Note "-8" refers to bit depth, "## color" refers to embedded color palette)

I have been using the GIF - 16 COLOR for my buttons. The question is why would I use PNG-8 - 16 COLOR when there is a 234 byte difference but no improvement in quality??

In this specific situation GIF would be a logical choice, if bandwidth savings are your #1 priority. Just remember it always depends on the content of the image, and more importantly the size.

For example, a 471x183 image created in Fireworks, with the text "This is a Test", size 60 in the middle--black text on white background.

GIF, no AA text: 1414 bytes
GIF, smooth AA text: 2551 bytes
PNG, no AA text: 775 bytes
PNG, smooth AA text: 1996 bytes

What does this show? Absolutely nothing. It all depends on what your image is, and how big it is. So, to sort-of answer the question for piers: Assuming your image editor has export/save as preview functionality, just use whichever you think looks the best, and is the smallest file size you feel comfortable with. If you're really curious about the technical advantages of each, I'd suggest checking out Speed Up Your Site by Andrew King. It's got a pretty decent section on image optimization and format choices.

Edit: some good links for that relevant chapter on Ch.12 part of his site

Weedpacket

I wonder if Illustrator uses the same PNG algorithm that I didn't like about Photoshop? Could you post the PNG? No, not the truecolour one, the palette-based one. We're not going to get into an irrelevant argument about colour mapping and dithering algorithms (which is what all but two lines of your comparsion are about - which also happens to miss comparing different bit depths).

Incidentally, how often is your typical user going to be downloading an image-based submit button?

Originally posted by davidjam
But you see, there is still a 200+ byte difference. That adds up after a while.

Personally, I couldn't be arsed trying to keep track of which format I'm using in which particular instance just for the sake saving a couple of hundred bytes now and then. You do test every image in both formats to make sure you're using the smallest one in every case, aren't you? Otherwise any savings you'd make on one image could be getting wiped out by using the wrong format for another, couldn't they?

Weedpacket

Originally posted by vaaaska
However, on the navigation (on one of them) I still used gif's because the text is pure non-anti-aliased - no need for png's there.

No need for GIFs if it's just text, though 😃

vaaaska

Originally posted by Weedpacket
No need for GIFs if it's just text, though 😃

Be glad you live on another continent otherwise I would dump a truck full of Verdana, Arial, Courier, Geneva, Georgia, Times and Comic Sans (just because) in your front yard. :p