Website Image Formats: Choosing the right format for the right task

Question

When designing a website, what do you consider the best image format to use for a particular task?

I always find myself in a dilemma when trying to figure out what format to use for a specific task...like for example, should I use .jpg all round? or, when and why should I use a .png?

For example, taking Amazon's website, they use .jpg for product images (Example), .gif for this transparent pixel (Example) and .png for their CSS Sprites (Example)

On the other hand, Play.com use a .gif for their website logo (Example), but use .jpg for their website products (like Amazon) (Example) and as far as their main page goes, they dont have any .pngs on it.

So what formats should I use for my websites? and why should I use them?

[UPDATE]

Thanks CruellO for this link for explaining the differences, and also Dustin for giving reasons on what to use.

Pontianak

Useful: https://mcmap.net/q/64209/-what-are-the-different-usecases-of-png-vs-gif-vs-jpeg-vs-svg-closed/199700 – Blackface

Answer 1

JPEGs are for photos. I see JPEGs with text in them occasionally and they just look awful. Text is best for text, otherwise use PNG.

If it's not a photo, but you want a graphic of it, use a PNG. A PNG is almost always smaller than the equivalent gif and will not lose quality like a JPEG file. A PNG equivalent of a JPEG will typically be a lot larger (assuming it's photorealistic). There may be times where this is still desirable.

PNG does allow for 8-bits of transparency, but if you have to support IE, you'll find that they continually refuse to support that correctly. They do support a single bit of transparency in an 8-bit image (essentially the same as gif) as far as I know. There are also numerous hacks to get 8-bit transparency to work in IE. I've never bothered, myself.

In summary:

• Photos → jpg
• !Photos → png

Beamon

Absolutely agree. This is what I tell people in my environment all the time! – Vizcacha

Answer 2

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. If you saved an image in a Lossy format over and over, the image quality would get progressively worse and worse.

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

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-8 - Lossless / Indexed

PNG is a newer format, and PNG-8 (the indexed version of PNG) is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can (well it can, but only Firefox seems to support it, unlike GIF animation which is supported by every browser). Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format. (Damn you, Adobe!) PNG-8 can only store 256 colours, like GIFs.

Good for: The main thing that PNG-8 does better than GIFs is having support for Alpha Transparency.

Important Note: Photoshop does not support Alpha Transparency for PNG-8 files. (Damn you, Photoshop!) There are ways to convert Photoshop PNG-24 to PNG-8 files while retaining their transparency, though. One method is PNGQuant, another is to save your files with Fireworks.

---

PNG-24 - Lossless / Direct

PNG-24 is a great format that combines Lossless encoding with Direct color (thousands of colours, just like JPEG). It's very much like BMP in that regard, except that PNG actually compresses images, so it results in much smaller files. Unfortunately PNG-24 files will still be much bigger than JPEGs, GIFs and PNG-8s, so you still need to consider if you really want to use one.

Even though PNG-24s allow thousands of colours while having compression, they are not intended to replace JPEG images. A photograph saved as a PNG-24 will likely be at least 5 times larger than the equivalent JPEG image, with very little improvement in visible quality. (Of course, this may be a desirable outcome if you're not concerned about file size, and want to get the best quality image you can.)

Just like PNG-8, PNG-24 supports alpha-transparency, too.

Blackface

This more that helps :) Awesome explaination!! – Besprinkle

wonderful comparison. If it's possible, please add "Webp" too. Thanks – Radiator

Answer 3

PNG can be used when:

• You need transparency (either 1-bit or alpha transparency)
• Lossless compression will work well (such as a flat-style icon or logo)

JPEG can be used when:

• Lossless compression will not work well (such as a photograph)

GIF can be used when:

• Animation is necessary, and video is not possible (though you should really try and use video; animated GIFs are poor quality and very inefficient)

Despite myths to the contrary, PNG outperforms GIF in all like for like comparisons. PNG is capable of every image mode of GIF apart from animation, and when using the same image mode, PNG will have better compression due to its superior DEFLATE algorithm compared to LZW. PNG is also capable of additional modes that GIF cannot do, such as 24 bit color, and multi-bit transparency (alpha transparency). Note that multi-bit transparency used to be a problem back when people used IE6.

PNG modes include (this is just a small subset)

• Palette colour of 2 to 256 colors (like GIF)
• Palette colour of 2 to 256 colors, with transparent color (like GIF)
• True color (24 bit color)
• True color with alpha channel (24 bit color + 8 bit transparency)

For best compression in PNG for the web, always use a palette mode. If you find PNG files are larger than the equivalent GIF files, then chances are you're saving the PNG in 24 bit color and the GIF in palette mode (because saving a full color GIF always requires translation to palette mode). Try converting the image to palette mode before saving in both cases.

PNG also has other modes such as palette color with alpha transparency in the palette. Modes such as this work in browsers but software like Photoshop have (or once had) problems with creating or working with them due to not supporting those image modes.

Decurion

I transferred this guide to here as the question I previously posted it to turned out to be a duplicate of this one and was closed. Hope that is an appropriate thing to do. It was my own answer after all. – Decurion

Is there no better solution for image animation at this point? gif used to be a patented format: en.wikipedia.org/wiki/Graphics_Interchange_Format – Richter

For image animation, there's GIF or there's Flash. The GIF patent's expired pretty much everywhere now, the only problem is that it's limited to 256 colours. SVG would be an option, too, but that's not (yet) all that well supported. You could also come up with a creative way to animate images using Javascript and sprites (all frames of animation in single image). – Decurion

Answer 4

If you are storing or presenting a large number of images the new Google WebP format might be worth considering as it is 25% smaller than PNG/JPG. Note this is not supported by all browsers at the moment. NB. This came out in 2010 after this question was posted.

Ilana

Answer 5

JPEG FILE FORMAT

1. Great for images when you need to keep the size small
2. Good option for photographs
3. Bad for logos, line art, and wide areas of flat color

GIF FILE FORMAT

1. Great for animated effects
2. Nice option for clip art, flat graphics, and images that use minimal colors and precise lines
3. Good option for simple logos with blocks of colors

PNG FILE FORMAT

1. Lossless
2. Excellent choice when transparency is a must
3. Good option for logos and line art
4. Not supported everywhere

You can see this infographics for more detailed information, Image File Types: When to use JPEG, GIF & PNG

Telemotor