Website question:- PNG or JPG?

**AtW** · 7 January 2010, 15:40

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.

**Durbs** · 7 January 2010, 15:44

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.

**VectraMan** · 7 January 2010, 15:52

Originally posted by AtW View Post

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.

**d000hg** · 7 January 2010, 15:58

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

**NickFitz** · 7 January 2010, 16:28

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.

**xoggoth** · 7 January 2010, 16:40

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.

**AtW** · 7 January 2010, 17:01

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.

**NickFitz** · 7 January 2010, 17:07

Originally posted by xoggoth View Post

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

**Sysman** · 8 January 2010, 11:59

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).

Website question:- PNG or JPG?