What web graphics formats to use?

Question

Web sites can contain JPEG, GIF, and PNG format graphics. Which ones should be used, and when?

Answer 1

When to use JPG

• photographic imagery
• when compression doesn't matter

When to use PNG

• when you need transparency
• when you have patterning (backgrounds)

When to use GIF

• when you need animation^†
• when you don't need transparency and have patterning (although png is preferred)

† Although animated gifs may be used attractively in web design in certain case scenarios, exceptions are very rare, so it's best to just avoid them.

Answer 2

(migrated from duplicate question)

This totally depends on the kind of image you want to store.

• PNG is a lossless compression format best suited for "vector-like" bitmap graphics (i.e. graphics with large, regular areas with the same colour and clearly defined edges; graphics containing clear text).

• SVG is a vector format, best suited to contain vector graphics (in short, collections of geometrical elements instead of collections of pixels). SVG is limitlessly scalable, while bitmap graphics lose quality when enlarged.

• JPG is a lossy compression format (among other things, it removes nuances in the image invisible to the human eye to save storage space). It is best suited for photographs; due to its compression method, it is not well suited for vector illustrations or text.

Browser compatibility:

• PNG Graphics are supported across browsers, with the exception of IE 6 if the PNG contains alpha transparency (the transparent portions will be rendered as a solid grey), and all versions of IE if the PNG is inside a HTML element with opacity less than 100% (but that's an edge case).

• SVG is not always an option yet because browser support is not 100% at the moment. There may also be other behavioural differences to a normal <img> tag. Use this only if you know what you're doing.

• Standard JPG is supported across all browsers as long as saved in RGB mode rather than CMYK (if your program doesn't make the distinction, it probably is the default).

Answer 3

JPG :

Advantages :

• A lot of different compression level available
• Easy to manipulate with all images editor

Inconvenients :

• Compression artifacts

Uses :

• Large photos or images with lots of colors
• When high compression is needed

PNG :

Advantages :

• Transparency with alpha !
• Lots of colors
• Can replace jpg

Inconvenients :

• Less compression than JPG (but not that much)
• Incompatible with IE6 (and 7 I believe) - must use patch or hack for this. But who cares? A must use ;)

Uses :

• Small or medium photos/images with lots of color
• A must use if you want gradient transparency
• Icons
• Logos

GIF :

Advantages :

• Can be animated
• Very light if you use just some color (like 8 - 16 or 32 different colors)
• Transparency

Inconvenients :

• Can't have more than 255 colors.
• Animated gif can make people flee
• No alpha for transparency (it's transparent or not !)

Uses :

• Animated gif (I use them mainly in newsletters)
• Icons
• Animated favicon \o/
• Logos

Answer 4

You should use .jpeg for photographs or images with a lot of colors. The .gif file type is useful for animated images or where transparency is needed, but it is decreasing in use. The most popular format is .png, which can also offer alpha transparency and greater range of colors than the .gif file type. For a more detailed overview, check out Jonathan Snook's article, Which Image Format Is Best.

Answer 5

A nice formula could be to use JPEG for photos and PNG for everything else.

Of course, if you have graphics that don't need alpha transparency and have less than 256 colors, GIF might save you some bandwidth but it's definitely on its way out.

Answer 6

Here's a BMP vs GIF vs JPG vs PNG comparison for you.

You should be aware of a few key factors...

First, there are two types of compression: Lossless and Lossy.

Lossless means that the image is made smaller, but at no detriment to the quality. Lossy means the image is made (even) smaller, but at a detriment to the quality.

There are also different colour depths (palettes): Indexed color and Direct color.

With Indexed it means that the image can only store a limited number of colours (usually 256) that are chosen by the image author, with Direct it means that you can store many thousands of colours that have not been chosen by the author.

---

BMP - Lossless / Indexed and Direct

This is an old format. It is Lossless (no image data is lost on save) but there's also little to no compression at all, meaning saving as BMP results in VERY large file sizes. It can have palettes of both Indexed and Direct, but that's a small consolation. The file sizes are so unnecessarily large that nobody ever really uses this format.

Good for: Nothing really. There isn't anything BMP excels at, or isn't done better by other formats.

---

GIF - Lossless / Indexed only

GIF uses lossless compression, meaning that you can save the image over and over and never lose any data. The file sizes are much smaller than BMP, because good compression is actually used, but it can only store an Indexed palette. This means that there can only be a maximum of 256 different colours in the file. That sounds like quite a small amount, and it is.

GIF images can also be animated and have transparency.

Good for: Logos, line drawings, and other simple images that need to be small. Only really used for websites.

---

JPEG - Lossy / Direct only

JPEGs images were designed to make detailed photographic images as small as possible by removing information that the human eye won't notice. As a result it's a Lossy format, and saving the same file over and over will result in more data being lost over time. It has a palette of thousands of colours and so is great for photographs, but the lossy compression means it's bad for logos and line drawings: Not only will they look fuzzy, but such images will also have a larger file-size compared to GIFs!

Good for: Photographs. Also, gradients.

---

PNG - Lossless / Index and Direct

PNG is a newer format, and is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can. Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format.

Here's what's good about it: Unlike GIFs, PNG files can store thousands of colours, if need be. That means that it can have nice smooth gradients. It also supports a nifty thing called Alpha Transparency which means that you have things like smooth drop shadows, even on Indexed color images. Most of the time, the file sizes will be smaller or equal to a GIF equivalent. Using extra features (like thousands of colours or alpha transparency) will increase the filesize, though.

Essentially using PNG just gives you greater options and flexibility.

PNGs, however, are not intended to replace JPEG images, despite allowing thousands of colours and having compression. A photograph saved as a PNG will likely be at least 5 times larger than a equivalent JPEG image, which very little improvement in visible quality. (Of course, this may be a desirable outcome if you're not concerned about filesize, and want to get the best quality image you can.)

Good for: Logos, line drawings, and images that require alpha transparency.

I hope that helps!

Answer 7

I use PNG for pretty much everything, as it doesn't have the compression artifacts that JEPG does, and it's nigh-universally compatible these days (I've seen a couple of site editors that don't take well to it, such as the desktop version of Homestead's SiteBuilder software, but that's about it).

Answer 8

You should choose your image in base at the level of compression/quality you want to achieve.

Web is all about speed in downloading information, and lesser is a size of an image, better it is for speed of loading a page.

JPG: For images with million of colors (photography)

PNG and GIF: For transparency and few amount of colors. I use it only under 64/128 different colors, but generally under 256. (icons, vector images that need to be raster, high contrast color, gradients with few colors)

How to choose between PNG and GIF?

First of all Check the compression/quality optimization, and choose who give you better result for less weight. I still use broadly GIF, and it is better sometimes than PNG for same kind of images. Do not discriminate one format for another, simply check the one that looks more suitable for your optimization.

• Choose GIF: for animated images at no more than 256 colors
• If you don't need animation, you might choose the PNG. Chose the right PNG: There are 2 kind 8bit and 24bit. 8bit it tend to be a better version of the GIF without animation for quality/compression (but like I said not always, check it out when you Save for Web). 24bit has no compression (so use it scarcely for some special graphic effect), and has the alpha vaule for using color transparency (Old IE browsers are not supporting this, if you don't apply a special filter or .htc behaviour to the page).

Answer 9

In an ideal world, it would come down to this:

JPEG - For raster images and photographs

PNG - For vector graphics (eg. logos, etc)

Unfortunately, Internet Explorer 6 (still, unfortunately, a large number of users) does not support transparency in PNG images. So if you PNG contains transparency, it may run into issues. Luckily, there is a hack that can be used to bypass this issue, although not in an elegant way:

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(EDIT: Also, I think even IE 7 has issues with some features of PNGs.)

GIFs only have two advantages over PNG:

1. (Almost) perfect browser support (although no transparency, so this isn't much of a bonus)
2. They may be animated, however animated graphics should be used sparingly in web design.

EDIT: PNG is always preferable to GIF where it is supported and usable, since PNG is an open format.

Answer 10

As most pointed out, JPEG is good for photography and PNG good for graphics with texts and graphs. GIF has the only advantage, that it supports animation, that should be used very careful.

A good tip is, to export your image as JPEG and PNG. Nearly always the format that is better for your graphic results in a smaller file. Photographs get smaller as JPEG and graphs smaller as PNGs. So if you unsure which to choose, that can be a good decider.