591

When should certain image file types be used when building websites or interfaces, etc?

What are their points of strength and weakness?

I know that PNG & GIF are lossless, while JPEG is lossy.
But what is the main difference between PNG & GIF?
Why should I prefer one over the other? What is SVG and when should I use it?

If you don't care about each and every pixel, should you always use JPEG since it's the "lightest" one?

TylerH
  • 19,065
  • 49
  • 65
  • 86
Faruz
  • 9,691
  • 10
  • 44
  • 65

13 Answers13

1425

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.

  • Indexed means that the image can only store a limited number of colours (usually 256), controlled by the author, in something called a Color Map
  • Direct means that you can store many thousands of colours that have not been directly 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.

BMP vs GIF

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 for most use cases, 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.

GIF vs JPEG

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.

JPEG vs GIF

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.

PNG-8 vs GIF

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 bigger than JPEGs (for photos), and GIFs/PNG-8s (for logos and graphics), 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 a equivalent JPEG image, with 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.)

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

SVG - Lossless / Vector

A filetype that is currently growing in popularity is SVG, which is different than all the above in that it's a vector file format (the above are all raster). This means that it's actually comprised of lines and curves instead of pixels. When you zoom in on a vector image, you still see a curve or a line. When you zoom in on a raster image, you will see pixels.

For example:

PNG vs SVG

SVG vs PNG

This means SVG is perfect for logos and icons you wish to retain sharpness on Retina screens or at different sizes. It also means a small SVG logo can be used at a much larger (bigger) size without degradation in image quality -- something that would require a separate larger (in terms of filesize) file with raster formats.

SVG file sizes are often tiny, even if they're visually very large, which is great. It's worth bearing in mind, however, that it does depend on the complexity of the shapes used. SVGs require more computing power than raster images because mathematical calculations are involved in drawing the curves and lines. If your logo is especially complicated it could slow down a user's computer, and even have a very large file size. It's important that you simplify your vector shapes as much as possible.

Additionally, SVG files are written in XML, and so can be opened and edited in a text editor(!). This means its values can be manipulated on the fly. For example, you could use JavaScript to change the colour of an SVG icon on a website, much like you would some text (ie. no need for a second image), or even animate them.

In all, they are best for simple flat shapes like logos or graphs.

I hope that helps!

Chuck Le Butt
  • 43,669
  • 58
  • 179
  • 268
  • 26
    Excellent answer. You may want to add thet [JPEG can be lossless](http://en.wikipedia.org/wiki/Lossless_JPEG), too (although the lossy variants are mostly used). – ypercubeᵀᴹ Feb 07 '12 at 08:32
  • @porneL Nice! It seems like that's more of a hack to filter out unnecessary detail before saving the file, though. So for example, if you saved the file again, you wouldn't lose any more data (unlike JPG). Is that right? – Chuck Le Butt Aug 19 '13 at 19:47
  • 1
    @DjangoReinhardt the filter hack would introduce even more loss when you re-save the image. However, I don't think that's a good definition of lossy format or encoder, AFAIK JPEG's DCT is reversible, so a good encoder *could* re-save JPEG without introducing further loss. – Kornel Aug 19 '13 at 22:28
  • @porneL That is actually the very definition of lossy, so I guess that hack *would* make PNG lossy. (Every attempt to use reversible DCT in JPEGs is an attempt to make the format lossless, btw: http://worldwide.espacenet.com/espacenetImage.jpg?flavour=firstPageClipping&locale=en_EP&FT=D&date=20010227&CC=US&NR=6195466B1&KC=B1) – Chuck Le Butt Aug 20 '13 at 10:55
  • I've read that computers can render BMP much more quickly than anything else since it's uncompressed, making it useful for very tiny images on websites. I can't find the article I read; it was a long time ago. – sudo Jun 05 '15 at 18:04
  • @9000 The article must have been written 20 years ago. There is no speed gain using BMPs any more! I don't believe most browsers even support BMP any more! – Chuck Le Butt Jun 08 '15 at 09:52
  • 2
    @sudo No, BMP sure is easy to decode from a processing perspective, but unless it's stored locally on an SSD, I'd assume getting the file to the CPU to process will be slower than just processing a JPG, especially on a properly-written JPG decoder that uses hardware instructions that have been available for a decade or two. – Camilo Martin Feb 03 '16 at 11:48
  • @CamiloMartin Good points. But a BMP can be smaller than a PNG. I just made a 4x4 image with all different-colored pixels. PNG was 170 bytes; BMP was 118 bytes. The article probably was old because only IE can render BMPs. But anyway, for small images where the BMP ends up being the same size or only slightly larger, there are probably cases where BMP is faster. It must require less setup time to render. – sudo Feb 04 '16 at 02:31
  • @sudo I must say that's not a very practical test... but I replicated it anyway. The PNG was 108 bytes, the BMP was 104. Two bytes difference in an example that doesn't reflect the real world. Go bigger and you'll see BMP balloon in size as it doesn't have any compression... which will slow a website down because of the size of the file it needs to download. It will be quicker to render because of the lack of compression, but even this, in the real world, would be a difference of nanoseconds (thanks to modern processors). – Chuck Le Butt Feb 04 '16 at 10:15
  • @sudo The browser has the PNG decoder loaded in RAM all the time. Also, if you want a very small image beacon like 1x1 pixels, the HTTP headers are bigger than the image (heck, the URL may be bigger than the image). Also, [according to Wikipedia](https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support), Chrome, Firefox, Safari and Opera support BMP too, so I don't know what you guys are talking about. "Supporting BMP" is almost as easy as just blitting the file. But don't forget the machine you're using can perform *billions* of instructions/second, and I/O still sucks :) – Camilo Martin Feb 05 '16 at 05:57
  • @CamiloMartin Yes, I guess given how easy it is to support BMP I shouldn't be surprised the major browsers still support it. Still zero reason to ever use that format, however. – Chuck Le Butt Feb 05 '16 at 11:32
  • what about webp? –  Apr 29 '17 at 22:20
  • @3.1415926535897932384626433833 It's currently only supported by Chrome and Opera (http://caniuse.com/#feat=webp), making it a lot of work for relatively small gains at the moment, but I should probably add it, you're right. – Chuck Le Butt May 12 '17 at 11:12
  • given svg has no concept of resolution, what is the size at which you store the logo for your assets? i am assuming too big means large file size and math – PirateApp Dec 12 '17 at 12:38
  • 1
    @PirateApp Edited to hopefully address your question – Chuck Le Butt Dec 12 '17 at 17:43
  • If we're nitpicking / adding details, I'd like to add that [BMP can be compressed](https://msdn.microsoft.com/en-us/library/dd183383) (using RLE), but _only_ the 8-bit and 4-bit indexed formats. – Nyerguds Mar 07 '18 at 10:51
  • I would add two things: PNG and GIF can be lossy. Modern image editors let you reduce the number of used colors (to improves the "compressibility" - reduce file size) with a tiny loss of quality. SVG is more like PDF, it can contain JPG, PNG and GIF raster images inside it (as image URIs with base64 encoding). – Ivan Kuckir Oct 23 '18 at 08:32
  • @IvanKuckir That doesn't mean PNG and GIF are lossy. Adding dithering or reducing the color map size aren't related to lossyness. That's a user choice when saving in that format. With JPG, the user gets no choice: The image had detail removed no matter what the setting. Interesting about SVG - I didn't know that, but it's not really "like PDF". – Chuck Le Butt Feb 06 '19 at 19:59
  • Not sure if it's true anymore, but I thought OCR worked better on bmp. – 1934286 May 12 '19 at 07:34
  • @fredsbend OCR will work better on any format without (heavy) compression, so a format like PNG 24 would work just as well. – Chuck Le Butt May 13 '19 at 09:56
  • just for anyone wondering, the term ”color map“ is described at [wiktionary](https://en.wiktionary.org/wiki/colormap#Noun) and [wikipedia](https://en.wikipedia.org/wiki/Palette_(computing)#Terminology). – myrdd May 17 '19 at 13:25
48

JPEG is not the lightest for all kinds of images(or even most). Corners and straight lines and plain "fills"(blocks of solid color) will appear blurry or have artifacts in them depending on the compression level. It is a lossy format, and works best for photographs where you can't see artifacts clearly. Straight lines(such as in drawings and comics and such) compress very nicely in PNG and it's lossless. GIF should only be used when you want transparency to work in IE6 or you want animation. GIF only supports a 256 color pallete but is also lossless.

So basically here is a way to decide the image format:

  • GIF if needs animation or transparency that works on IE6(note, PNG transparency works after IE6)
  • JPEG if the image is a photograph.
  • PNG if straight lines as in a comic or other drawing or if a wide color range is needed with transparency(and IE6 is not a factor)

And as commented, if you are unsure of what would qualify, try each format with different compression ratios and weigh the quality and size of the picture and choose which one you think is best. I am only giving rules of thumb.

Community
  • 1
  • 1
Earlz
  • 57,517
  • 89
  • 275
  • 484
  • 3
    Good answer, but I would like to add the following: If you are unsure, try each and see how good the picture looks and how big the file is. – Jesse Weigert Feb 25 '10 at 18:27
  • See, at the end you figured out the question and gave a great answer. thanks. I didn't know about the transparency issues with IE6, you gave a lot to think about. – Faruz Feb 25 '10 at 18:31
  • GIF is pretty much outdated and I would not recommend it for anything. For animation there are many modern approaches (videos, Flash, JavaScript + SVG). PNG transparency can also work (not perfectly, but equal to GIF) down to IE 5.5. – Tronic Feb 25 '10 at 18:35
  • IE 5.5 and 6 actually support 8 bit PNG transparency the same as GIFs, just not the alpha channel transparency of 24 bit PNGs. – Graham Conzett Feb 25 '10 at 18:49
  • @Tronic, my arguments are: HTML5 is not supported by any IE browsers, Flash does not work on my (OpenBSD) system, SVG is not supported by IE browsers(without a plugin)... – Earlz Feb 25 '10 at 19:00
  • @Faruz: It's not our job to "figure out the question". We're just guessing. You, on the other hand, *know* what you need. It's your job to clarify the question by fixing it until it's perfectly clear. – S.Lott Feb 25 '10 at 19:14
  • @Earlz, one could also create GIF-like animation by a series of PNG images, animated by JavaScript. – Tronic Feb 26 '10 at 00:35
  • 1
    @Tronic, that is true, but that isn't "easy" – Earlz Feb 26 '10 at 01:08
7

I usually go with PNG, as it seems to have a few advantages over GIF. There used to be patent restrictions on GIF, but those have expired.

GIFs are suitable for sharp-edged line art (such as logos) with a limited number of colors. This takes advantage of the format's lossless compression, which favors flat areas of uniform color with well defined edges (in contrast to JPEG, which favors smooth gradients and softer images).

GIFs can be used for small animations and low-resolution film clips.

In view of the general limitation on the GIF image palette to 256 colors, it is not usually used as a format for digital photography. Digital photographers use image file formats capable of reproducing a greater range of colors, such as TIFF, RAW or the lossy JPEG, which is more suitable for compressing photographs.

The PNG format is a popular alternative to GIF images since it uses better compression techniques and does not have a limit of 256 colors, but PNGs do not support animations. The MNG and APNG formats, both derived from PNG, support animations, but are not widely used.

David Bridges
  • 81
  • 1
5

JPEG will have poor quality around sharp edges etc. and for this reason it is unsuitable for most web graphics. It excels at photographs.

Compared to GIF, PNG offers better compression, larger pallette and more features, including transparency. And it is lossless.

Konrad Garus
  • 50,165
  • 42
  • 145
  • 220
5

GIF is limited to 256 colors and do not support real transparency. You should use PNG instead of GIF because it offers better compression and features. PNG is great for small and simple images like logos, icons, etc.

JPEG has better compression with complex images like photos.

Desintegr
  • 6,411
  • 1
  • 20
  • 17
4

There is a hack that can be done to use GIF images to show true color. One can prepare a GIF animation with 256 color paletted frames with 0 frame delay and set the animation to be shown only once. So, all frames could be shown at the same time. At the end, a true colored GIF image is rendered.

Many software is capable of preparing such GIF images. However, the output file size is larger than a PNG file. It must be used if it is really necessary.

Edit: As @mwfarnley mentioned, there might be hiccups. Still, there are still possible workarounds. One may see a working example here. The final rendered image looks like that:

full-color-gif-image

Community
  • 1
  • 1
MTSan
  • 269
  • 6
  • 10
  • Many apps that display GIFs will have a minimum frame delay, so in practice a bunch of frames with 0 delay will not tend to be rendered simultaneously, sadly. See for example, https://webmasters.stackexchange.com/questions/26994/why-is-this-gifs-animation-speed-different-in-firefox-vs-ie# – mwfearnley Aug 18 '20 at 20:35
3

png has a wider color pallete than gif and gif is properitary while png is not. gif can do animations, what normal-png cannot. png-transparency is only supported by browser roughly more recent than IE6, but there is a Javascript fix for that problem. Both support alpha transparency. In general I would say that you should use png for most webgraphics while using jpeg for photos, screenshots, or similiar because png compression does not work too good on thoose.

HalloDu
  • 907
  • 1
  • 7
  • 16
3

GIF based on a palette of 256 colours per image (at least in its basic incarnation). PNG can do "TrueColour", i.e. 16.7 Million colours out of the box. Lossless PNG compresses better than lossless GIFs. GIF can do "binary" transparency (0% opacity or 100% opacity). PNG can handle alpha transparencies.

All in all, if you don't need to use Alpha-transparent images and support IE6, PNG is probably the better choice when you need pixel-perfect images for vector illustrations and such. JPG is unbeatable for photographs.

Pekka
  • 418,526
  • 129
  • 929
  • 1,058
3

As of 2018, we have several new formats, better support for previous formats and some clever hacks of using videos instead of images.

For photographs

jpg - still the most widely supported image format.

webp - New format from google. Good potential, though browser support is not great.

For Icons and graphics

svg - whenever possible. It scales well in retina screens, editable in text editors and customisable via JS/CSS if loaded in DOM.

png - if it involves raster graphics (ie when created in photoshop). Supports transparency which is very essential in this use-case.

For Animations

svg - plus css animations for vector graphics. All advantages of svg + power of css animations.

gif - still the most widely supported animated image format.

mp4 - if animated images are actually short video clips. Twitter / Whatsapp converts gifs to mp4.

apng - decent browser support (i.e. no IE, Edge), but creating it is not as straightforward as gifs.

webp - close to using mp4. Poor support

This is a nice comparison of various animated image formats.

Finally, whichever be the format, make sure to optimize it - There are tools for each format (eg SVGO, Guetzli, OptiPNG etc) and can save considerable bandwidth.

aarjithn
  • 1,076
  • 7
  • 17
1

The main difference is GIF is patented and a bit more widely supported. PNG is an open specification and alpha transparency is not supported in IE6. Support was improved in IE7, but not completely fixed.

As far as file sizes go, GIF has a smaller default color pallet, so they tend to be smaller file sizes at first glance. PNG files have a larger default pallet, however you can shrink their color pallet so that, when you do, they result in a smaller file size than GIF. The issue again is that this feature isn't as supported in Internet Explorer.

Also, because PNGs can support alpha transparency, they're the only option if you want a variation of transparency other than binary transparency.

Dan Herbert
  • 90,244
  • 46
  • 174
  • 217
1

If you opt for JPEG, and you're dealing with images for a website, you may want to consider the Google Guetzli perceptual encoder, which is freely available. In my experience, for a fixed quality Guetzli produces smaller files than standard JPEG encoding libraries, while maintaining full compatibility with the JPEG standard (so your images will have the same compatibility as common JPEG images).

The only drawback is that Guetzli takes lot of time to encode.. but this is done only once, when you prepare the image for the website, while the benefits remains forever! Smaller images will take less time to download, so your website speed will increase in the everyday use.

Marco Fontani
  • 676
  • 6
  • 5
0

GIF has 8 bit (256 color) palette where PNG as upto 24 bit color palette. So, PNG can support more color and of course the algorithm support compression

Abdul Munim
  • 17,662
  • 7
  • 48
  • 59
0

As pointed out by @aarjithn, that WebP is a codec for storing photographs.

This is also a codec to store animations (animated image sequence). As of 2020, most mainstream browsers has out of the box support for it (compatibility table). Note for WIC a plugin is available.

It has advantages over GIF because it is based on a video codec VP8 and has a broader color range than GIF, where GIF limits to 256 colors it expands it to 224 = 16777216 colors, still saving significant amount of space.

bsound
  • 722
  • 7
  • 16