Website question:- PNG or JPG?

[Sysman]

Thanks all.

xoggoth:

I had a a bit of a gag on some of the IE png results ( time!), but as long as I avoid 4097/4098 sizes should be OK.

Nick:

pngcrush is a nifty find, thanks. I've just run a few images through it and got 11% reduction for a complex image, 20% on a Mac desktop snapshot (the starry one), and 28% for the screen I am composing in now.

Since this is a tutorial for a Mac program, I initially wasn't too bothered about the IE side of things. However it suddenly struck me that if I had a Windows system sitting next to a Mac, I'd probably be using that to display the tutorial while working on the Mac.

(I knew that last bit really, since I already get visitors from corporate addresses on my own web site, but it's worth remembering).

[NickFitz]

Recall a few problems with not seeing pngs on a laptop a few years ago (2003 ish?) and Google indicated I was certainly not the only one. May be issues with older browsers?

Google "cannot see png". Issues with IE6 and IE7.

IE6 doesn't support alpha channel transparency on PNGs (except via an ugly hack), which shouldn't be a problem for screenshots. IE7 upwards do support alpha. Furthermore IE6 had a bug preventing the display of PNG files whose size is precisely 4097 or 4098 bytes

IE generally is such a bug-ridden pile of crap that it wouldn't surprise me if a number of problems were actually something else... and lo, Google searches for "cannot see gif" and "cannot see jpg" also turn up lots of results relating to IE. The usual cause seems to be a screwed-up registry, in combination with an application overwriting file type associations; or alternatively that long-standing cause of so many problems, Norton Internet Security

[AtW]

IE6 has got transparency problem with PNGs that use it. However if you avoid using transparency then PNG is perfectly fine.

Save a few screenshots in both formats and visually check them - if JPG is smaller *and* doesn't look tulipe then pick it. Otherwise stick with PNG.

[xoggoth]

Recall a few problems with not seeing pngs on a laptop a few years ago (2003 ish?) and Google indicated I was certainly not the only one. May be issues with older browsers?

Google "cannot see png". Issues with IE6 and IE7.

[NickFitz]

Definitely PNG for screenshots. It's worth running them through pngcrush to minimise the file size too - but don't overwrite the originals, just in case.

[d000hg]

I always prefer PNG. Is Jpeg a free format, I remember a kerfuffle over GIF a few years back.

[VectraMan]

JPG should be better format for photographs etc, PNG of anything that requires lossless image.

For screenshots I'd go with PNG - JPG would not look sharp enough.

WHS. Depends what the screenshots are of, but if you were talking about an application with a lot of small text, controls, and straight edges, JPEG would tend to make it all look a bit blurry. If you're talking about a website with lots of photos of young ladies, then JPEG is your friend.

[Durbs]

You'll be fine with either. Only issue with .png is loss of alpha transparency in old browsers but for screenshots this isn't an issue as you wont be using it.

[AtW]

JPG should be better format for photographs etc, PNG of anything that requires lossless image.

For screenshots I'd go with PNG - JPG would not look sharp enough.

[Sysman]

I'm planning on whipping up a few web pages with screenshots (possibly thumbnails which can be expanded by clicking on them, not sure yet), and find that the screen shots I already have are PNG files.

Converting them to JPG is not a problem, and I could regenerate the original screen shots as JPG straight off.

What is the general advice here, please?

It's a tutorial thingy.