jpeg vs png

Hi Fieran, [:)]

Only png and gif can have transparent backgrounds.

But png has some issues with browser compatibility so if it is for the web, gif is the better choice.

If you are not using a transparent background and you want higher quality and more colour depth, jpg is better than gif.

all the best,

-k.s.

Never heard of transparency using .jpg - only .gif

New to me!

-M.
$i

JPEG doesn't support transparency. The format is aimed very much at photos and similar images with smooth continuous tones.

GIF is for line graphics ('toons in other words). It supports a simple form of transparency but there's no real reason to use it any more because PNG does everything it does better.

TIFF is also basically a photo format, but it differs from JPEG in that it's non-lossy. Both are compressed but JPEG loses information along the way so the images aren't as good. On the other hand JPEG compression is MUCH better, and TIFF is not as widely supported so for web pages basically nobody would ever use a TIFF.

PNG is a replacement for both GIF and TIFF (in other words, any kind of image).
The original reason for that is that GIF & TIFF used a compression algorithm called LZW which was patented and legally couldn't be used freely. However, as it turns out it's also just technically better than either of those. Compared to JPEG, PNG is better quality but not as efficient (a top quality JPEG is typically a quarter of the size of the most compressed PNG).

Summarized: for the web you should almost always use either JPEG or PNG and nothing else. For other things (storing your photo collection) you might want to use only PNG.

Oh, one caveat. IE doesn't display transparent PNGs very well. In fact, to most people it looks like it doesn't do transparency at all. You can blame Microsoft's disdain for standards for that, as usual. Supposedly it actually does handle transparency, but only if you encode your PNG in one particular way out of the many it can handle.

You can't have transparency in JPEG.

Also, JPEG is good for photos (soft overtones), and GIF (or PNG) for technical drawings (sharp lines, points, etc.).

and now my more educated take

1 - png is the most awesome format since the invention of formats ... except that - IE is broken and does not support png style transparent pixels

2 - gif is a terrible format if you have any interest in colour depth.

3 - jpeg is the starndard but as stated does not support transparent pixels.

4 - best course of action - shun the IE users and use pngs anyway

5 - if you can't make that sacrifice, don't design a site which uses transparent pixels and requires high colour depth, these things are incompatible.

6 - if you insist on doing things this way, which by the way is madness - you need to flaten your photoshop mockup first, and then chop up solid picks.

7 - don't use backgrounds if you can avoid it, it is very hard to deal with background and transparent pixels at the same time.

8 - well I am sure I could post more of my recent experience if I had time and patients, but for now I need to get back to my homework.

F

With transparent gif, i find it better to have anti-alias and double check to see if the transparency did show when you put it on a colour background. sometimes, there's the white colour outline on the transparent gif.

some outer glow can usually solve the issues.

Jpeg - Photos
Gif - transparency or single colour background tile, or animation gif, like some of the banner ads on this site
png - transparency and also used on the OS X
Tiff - file proof when you send you files to printers or submit artwork to printers/ ad agency.

On 8/16/2006 5:26:20 PM, fieranmason wrote:
$i

Not quite - JPEG is really only good for photos and things like photos (with continuous tones). For line graphics and drawings and such (ie things with sharp edges and few colours) JPEG will not be as good as PNG or even GIF.

Which one is the best format for graphics that are a mix of photo-like stuff and text (ex banners)? Good question! The answer is PNG.

4 - best course of action - shun the IE users and use pngs anyway

IE 7 should (one hopes) fix this stupid problem so that actually is a pretty good option now, yes.

Personally, when I ran into this problem in the past I solved it by using PNGs for my line graphics, without transparency.

Well thank you all for so much info - I am still working on that site, but some other things have come up that will be taking up time for a while, so I will see when I get back to it .... hopefully IE7 will sort out that issue and I will be able to display the site as I had intended. Otherwise I will have to play with cutting up flattened images again which was a real pain, expectially considering the non-linear layout choices I made.

F

Update -
This may be a better solution, but I have not tried it yet.

PNG Transparency Solution

F

Looks like a solution [:)]