Best Image format

What is the best image format to use for websites?

I am using jpeg and png and gif

Depends…But I personally never use GIFs.

Although things have changed, older browsers did not support PNG so many designers have stayed away from them.

JPG is best for “Photographic” type images or images with lots of colours.

GIF is good for line art or images with fewer colours. (JPG can leave an unattractive filmy look on line art)

A good example of GIF usage is my avatar and logic_earth’s avatar (above)

When in doubt, try both JPG and GIF and compare for viewing quality and file sizes.

Which was but a myth, the lack of support was alpha channels which is not required to use PNGs.

GIF is good for line art or images with fewer colours. (JPG can leave an unattractive filmy look on line art)

Can be replaced by PNGs (PNG-8) which in most cases produces smaller sizes then GIF.

Using a good PNG optimizer can also shave off considerable amount off the file size.

The answer is PNG out of those 3 choices by a long-way… Though you have to choose the “correct image format” for the most appropriate job; horses-for-courses.

Like was mentioned you should nearly always use PNG-8 over GIF for static images and PNG-32 has greater capabilities than JPG - JPG cannot do transparency either.

Usually a JPG photo will be smaller than a PNG due to JPG “Lossy” compression saving (irreversibly discarding data) though it is not always the case that a JPG file will be smaller than “Lossless” PNG for photos.

Therefore where bandwidth matters you have to make sensible decisions which format to use for what purpose and weigh-up file-size verses quality trade-offs.

I think it’s worth pointing out that PNG compression can be as effective as JPEG depending on how you go about the task, based on the quality for compression balance, I’ve always found PNG to be the better format. Though GIF’s still have the benefit for having animations enabled and working cross-browser (animated PNG’s are not widely supported by browsers). It’s rather shocking that people think PNG isn’t supported (when it’s just alpha transparency). :slight_smile:

you are using it already I guess :slight_smile:

And even that is only a problem in IE6 and earlier.

Personally, I use jpeg for most of my web content, but for anything high resolution, I’ll use PNG.

  • PNGs because the fix is worth it for compliant issues. Boo on Trident. The situation has alot to play into the choice, still.