JPG or PNG?

[Dylan Parry]

Spake The Doormouse unto thee:

When I have SWF and SVG available?

Neither of which are supported by all browsers without some sort of
external plugin. At least _most_ browsers support 256 colour PNG or GIF
images.

 

[Toby Inkster]

The basic problem is that there is no compelling reason to switch to
[PNG].

How about:

- smaller file sizes than GIF, and thus:
* less space required on the server;
* less bandwidth used by your server; and
* faster page rendering for your visitors.

- supports more colours than GIF.

- supports more colours than JPEG.

- better image quality than JPEG (though larger in most cases).

- alpha blending (though browser support for alpha blending is
limited).

- it is the *only* image format suitable for delivering
very high quality digital images without requiring plugins.

I can work without it just fine.

I don't doubt it. But don't you want to aim higher than "just fine"?

 

[The Doormouse]

- smaller file sizes than GIF, and thus:

Eh. I will consider using it. I have Photoshop, so there is no harm in
trying it.

- alpha blending (though browser support for alpha blending is
limited).

That's a killer. If IE, netscape and Firefox support it, fine.

- it is the *only* image format suitable for delivering
very high quality digital images without requiring plugins.

JPG is fine for that.

I don't doubt it. But don't you want to aim higher than "just fine"?

True, true.

What browsers choke on PNG? That is really important for me to know.

The Doormouse

 

[Toby Inkster]

That's a killer. If IE, netscape and Firefox support it, fine.

It's not properly supported in IE/win, but there is a hack to get it to
work in IE 5.5+.

It's supported in IE/mac 5.x (except for background images), Netscape 6+,
Opera 6+ (IIRC), Mozilla (any version), Firefox (any version), Safari (any
version), Konqueror 2.mumble+ and various other browsers.

JPG is fine for that.

No. I said *very* high quality. JPEG is limited to 24-bit colour and uses
lossy compression. PNG allows up to 48-bit colour and uses non-lossy
compression.

What browsers choke on PNG? That is really important for me to know.

On those few browsers that don't support PNG (Netscape before v4.04, IE
before 4.0, etc) the browser should happily display the alt text (i.e. it
won't "choke")

 

[The Doormouse]

It's not properly supported in IE/win, but there is a hack to get it
to work in IE 5.5+.

Functionally, PNG does not support Alpha transparency for my needs. Users
can not be expected to change their system settings.

I tested PNG just a few minuees ago, and IE6 will not support
transparency as shipped. That is, the file format supports transparency,
but my browser of choice (MS Lemmingware) does not without modifications.

On those few browsers that don't support PNG (Netscape before v4.04,
IE before 4.0, etc) the browser should happily display the alt text
(i.e. it won't "choke")

Thank you.

I spent a couple minutes testing the PNG format - both PNG-8 and PNG-24.

Test images were:
A photograph of a person
A rainbow gradient
A rainbow gradient with a randomly drawn, transparent brush stroke

There are no compelling reasons, functionally, for me to consider
switching at this time. I was unimpressed with the results overall.

I am going to play with this some more, and see if I cannot get any
better results. As it is, sometimes the GIF format was smaller than the
PNG, and just as good for my web-based needs.

You had me going for a bit there, thinking that PNG might be worth
something.

The Doormouse

 

[Dylan Parry]

Spake The Doormouse unto thee:

Functionally, PNG does not support Alpha transparency for my needs. Users
can not be expected to change their system settings.

The hack doesn't change the settings in IE, but uses scripting to allow IE
to make use of the alpha channel in the PNG.

 

[The Doormouse]

The hack doesn't change the settings in IE, but uses scripting to
allow IE to make use of the alpha channel in the PNG.

I would need to rely on clever scripting to get a graphic to function? How
much coding are we talking about to duplicate the functionality that I can
get other ways?

The Doormouse

 

[Sam Hughes]

I would need to rely on clever scripting to get a graphic to function?
How much coding are we talking about to duplicate the functionality
that I can get other ways?

You have 'other ways' of using images with alpha transparency on the Web?
Please go into detail.

 

[Jeffrey Silverman]

I would need to rely on clever scripting to get a graphic to function? How
much coding are we talking about to duplicate the functionality that I can
get other ways?

The Doormouse

Do you even know what Alpha transparency is?

 

[Toby Inkster]

I would need to rely on clever scripting to get a graphic to function?

No, the graphic would still be there with scripting disabled, but it would
not have fancy alpha-blending.

Kind of like the menus at http://devedge.netscape.com/ -- they work
perfectly in Gecko and Opera 7, and also perfectly in "IE-with-scripting"
but degrade to something functional, but not quite as good in
"IE-without-scripting".

 

[Leif K-Brooks]

The loss is often unnoticeable, and the file size benefits are wonderful.

Mind giving an example of a line drawing (not a photo) which is smaller
as a JPEG than as a PNG, and where the JPEG losses aren't noticeable?

 

[Toby Inkster]

The loss is often unnoticeable, and the file size benefits are wonderful.

Take a look at this tiny little PNG file:

http://examples.tobyinkster.co.uk/tiny-little.png (401 bytes)

Download it and convert it to JPEG. Notice how much smaller the PNG was?

Now use the compression options in your graphics editor to shrink it down
a bit. Notice how the fine detail in the centre section of the original
becomes a horrible blur when you try to save it in JPEG?

My example is horribly contrived (it's very unlikely you're going to want
an image like that on your website!) but illustrates the point that for
many images PNG will give you much smaller file sizes than JPEG.

 

[Toby Inkster]

http://examples.tobyinkster.co.uk/tiny-little.png (401 bytes)

My example is horribly contrived (it's very unlikely you're going to
want an image like that on your website!)

Come to think of it, might look good on the home page of an abseiling club.

 

[WebcastMaker]

No, the graphic would still be there with scripting disabled, but it would
not have fancy alpha-blendin....

Kinda got to go with doormouse on this one. Why would I want to use
something that does not work as designed on 80% of the visitors with out
scripting?

Sure you can save a few bytes of bandwidth and server space, but it is
still not compelling enough reason, especially if your design wants
transparency.

 

[Dylan Parry]

Spake WebcastMaker unto thee:

Kinda got to go with doormouse on this one. Why would I want to use
something that does not work as designed on 80% of the visitors with out
scripting?

The problem with PNG is not that IE doesn't support the transparency - it
does in fact support single colour transparency in exactly the same way
that you would use a GIF image. That is, when the PNG is a 256-colour
indexed image, then the transparency will work just fine with IE. It's
when you use the PNG as a JPEG with up to 48bit colour that transparency
won't work with IE - this is a situation that is unlikely to occur unless
your design specifically needs a photo-quality transparent image, in which
case a GIF wouldn't be the answer anyway!

 

[Leif K-Brooks]

Kinda got to go with doormouse on this one. Why would I want to use
something that does not work as designed on 80% of the visitors with out
scripting?

IE supports simple binary transparency for PNG, just like it does for
GIF. It's just translucent (50% opaque, for instance) images that IE has
trouble with, and GIF can't do that at all.

 

[The Doormouse]

You have 'other ways' of using images with alpha transparency on the
Web? Please go into detail.

SVG has transparency. I was playing with it earlier.
A SVG file can be far, far smaller than GIF or PNG.

The Doormouse

 

[The Doormouse]

Do you even know what Alpha transparency is?

Yes.

The Doormouse

 

[Dylan Parry]

Spake The Doormouse unto thee:

SVG has transparency. I was playing with it earlier.
A SVG file can be far, far smaller than GIF or PNG.

but SVG has even less support than PNG!

 

[The Doormouse]

Mind giving an example of a line drawing (not a photo) which is
smaller as a JPEG than as a PNG, and where the JPEG losses aren't
noticeable?

Apples and Oranges.

I have SVG and GIF for line drawings.
SVG files can be MUCH smaller than PNG.
GIF can be about the same size.

So, PNG is "extra". Unneeded. Superfluous.

The Doormouse