40
22
I would like to know which one of these formats requires less memory for the same quality of the picture, and what are the main differences between these formats.
40
22
I would like to know which one of these formats requires less memory for the same quality of the picture, and what are the main differences between these formats.
54
From What is the difference between TIFF, GIF, JPG, JPEG, PNG, and a BMP file?
BMP - Bitmap. This was probably the first type of digital image format that I can remember. Every picture on a computer seemed those days to be a BMP. In Windows XP the Paint program saves its images automatically in BMP. However, in Windows Vista and later images are now saved to JPEG. BMP is the basis platform for many other file types.
JPG / JPEG - (Joint Photographic Experts Group) Jpeg format is used for color photographs, or any pictures with many blends or gradients. It is not good with sharp edges and tends to blur them a bit unless stored at high quality. This format became popular with the invention of the digital camera. Most, if not all, digital cameras download photos to your computer as a Jpeg file. Obviously the digital camera manufacturers see the value in high quality images that ultimately take up less space.
GIF - (Graphics Interchange Format) Gif format is best used for text, line drawings, screenshots, cartoons, and animations. Gif is limited to a total number of 256 colors or less, so Gif images are relatively small. It is commonly used for fast loading web pages. It also makes a great banner or logo for your web-page. Animated pictures can also be saved in GIF format as a sequence of static images. For example, a flashing banner would be saved as a Gif file.
PNG - (Portable Networks Graphic) This lossless formats is one of the best image formats. It was not always compatible with all web browsers or image software, but nowadays it is the best image format to use for website. I use .png for logos and screenshots. One of its most astonishing abilities is being able to compress images losslessly (without loss of pixels), although the final compressed size varies between image editors.
TIFF - (Tagged Image File Format) This file format has not been updated since 1992 and is now owned by Adobe. It can store an image and data (tags) in the one file. TIFF can be compressed, but it is rather its ability to store image data in a lossless format that makes a TIFF file a useful image archive, because unlike standard JPEG files, a TIFF file using lossless compression (or none) may be edited and re-saved without losing image quality. This file is commonly used for scanning, faxing, word processing, and so on. It is no longer a common file format to use with your digital photos, as jpeg is great quality and takes up less space.
1Would love to see SVGs get added to this answer too. – Hanna – 2015-11-04T20:11:12.443
@porneL: Even truecolor PNGs with 1-bit alpha are displayed fine. It's just the 8-bit alpha channel that has problems in IE 6. – Joey – 2010-11-26T11:29:13.707
4While the answer is good at answering the difference of the picture formats in terms of history and general usage, the original answer asked about relative sizes and quality too... – camster342 – 2011-06-13T11:26:30.227
@camster342: Why do you pick on an old answer dating from 2009? And why, when the poster has accepted my answer, you have decided that he is wrong! – harrymc – 2011-06-13T11:39:49.453
@paradroid: You are welcome to write your own. – harrymc – 2011-06-13T13:29:35.603
TIFF: Does not have "virtually no compression". It either has lossy compression (eg. JPG) or lossless compression (eg. LZW). – Django Reinhardt – 2011-06-13T20:22:42.693
@Johnny W: Thanks. I changed some links and improved the description of TIFF. – harrymc – 2011-06-14T06:44:23.577
@harrymc I didn't see the dates, I just saw an answer that could possibly use a little more info. – camster342 – 2011-06-14T12:56:28.747
1Be aware that without a "hack" of sorts, IE6 still does not support alpha transparency in PNG files i.e. areas of transparency that are semi opaque – Josh Comley – 2009-10-15T11:53:13.927
2
...and a surprising amount of people still use IE6 (http://tinyurl.com/56kp). And MS want to support it until 2014! :( (http://tinyurl.com/qvdyn5)
– Josh Comley – 2009-10-15T12:05:13.4671Richard Stallman once guessed PNG stands for "PNG is not GIF" – Tim Büthe – 2009-10-15T12:25:23.630
jpg allows for different levels of compression. A more highly compressed file will suffer a greater loss in quality. It is up to you to decide how much quality you want vs how big the file is. (You can't regain quality once it is lost.) – Les – 2009-10-15T12:32:57.450
9
BMP: This is not the basis for other file formats. As far as I know the BMP header and file structure are not shared with other formats (contrary to TIFF, for example). JPEG: It was created and existed on the web way before digital cameras became prevalent. Also many digital cameras allow for saving a "raw" format which usually is a TIFF, albeit with vendor-specific contents. GIF: Not restricted to 256 colors per image, only to 256 colors per frame (see http://en.wikipedia.org/wiki/Graphics_Interchange_Format#True_color).
– Joey – 2009-10-18T20:57:26.3074TIFF: The prevalent file and container format for raw images from digital cameras (the non-point-and-shoot ones). TIFF allows for nearly arbitrary data (hence tagged) in it which also means that it supports arbitrary compression methods from LZW (GIF), LZ77 (PNG) to JPEG and others. Also TIFF allows for multiple images (pages) in one file. – Joey – 2009-10-18T21:01:01.730
1TIFF file format is the de-facto format for saving/archiving/transferring of engineering drawings in an image form. They can be extremely large, but do not take up a large. – Lee Harrison – 2013-02-06T21:38:27.510
1@joshcomley IE6 displays paletted PNGs with 1-bit alpha just fine without any hacks. It only has problems with PNG variants that have no GIF equivalent. – Kornel – 2009-12-27T13:48:24.790
76
In xkcd style from lbrandy.com:
3Facebook has for example this 'Always JPEG' policy. I upload a nice 99 KB lossless PNG image and Facebook converts it to an ugly 175 KB JPEG. – Paul – 2014-08-27T11:37:50.120
@Arjan, although the comic looks like it is from xkcd and has the same style of clever tech humor, it was actually made by that other guy-- so he attributed the copyright to himself and not Randall of xkcd. – BradChesney79 – 2018-04-12T14:20:09.583
True, @BradChesney79, but see the edit history https://superuser.com/posts/55706/revisions But as all that is old, I guess I'll remove my comments (including this one).
– Arjan – 2018-04-12T16:48:25.4231The comic is funny, but it doesn’t really answer the question; maybe only one part. – Synetech – 2012-02-17T03:54:09.793
Fantastic answer! – boehj – 2012-03-28T01:38:31.017
4Illustrates the point nicely :) (even if I've never seen anyone advocate such 'Always JPEG!' policy) – Jonik – 2009-10-15T11:47:31.240
7+1 Since this picture illustrates the jpeg problem so well... – Johan – 2009-10-15T11:53:11.073
5I wish I could double upvote! I send this to everybody who sends me crappy jpegs! – Tim Büthe – 2009-10-15T12:00:08.360
Are you sure that's a real XKCD? Please link to the original. – Teddy – 2009-10-15T12:10:26.357
1@Teddy - you were absolutely right. I misread when I copied it, it said xkcd style, not from xkcd. I have fixed the text and link. – Robert MacLean – 2009-10-15T12:17:49.107
3© 2008 Louis Brandy. All Rights Reserved....? – Arjan – 2009-10-15T12:29:01.087
63
You should be aware of a few key factors...
First, there are two types of compression: Lossless and Lossy.
There are also different colour depths (palettes): Indexed color and Direct color.
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 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.
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 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:
This means SVG is perfect for logos and icons you wish to retain sharpness on Retina screens or at different sizes.
Additionally, SVG files are written using XML, and so can be opened and edited in a text editor, that it can be manipulated on the fly, if you wish. 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).
I hope that helps!
1@DjangoReinhardt I know you included an example in your answer, but as far as SVGs vs PNGs are concerned, under what circumstances might we see a bigger SVG (in file size) vs a PNG? – Hanna – 2015-11-04T20:12:37.863
1@Johannes Great question. There are some downsides to SVG, especially if they're particularly complicated (or badly saved -- but that's the author's fault, not the file format's). I'll try and add something that answers this -- although I suspect that an SVG will always be smaller (or equal in size) to a PNG. – Django Reinhardt – 2015-11-05T12:21:06.160
PNG does not support animation. APNG != PNG. Different developers. Anyone can make a custom format that is compatible with PNG decoders; all you have to do is drop the extra features. – jiggunjer – 2015-12-24T02:32:27.393
1Another fun factoid: BMP files have a size similar to PNG if you zip them. – jiggunjer – 2015-12-24T04:29:42.310
Good illustration. Watch out for artifacts caused by compression. I think JPEG like video compression formats has the problem where solid red zones will tend to "bleed" on the edges. – James P. – 2011-06-13T12:16:47.900
Note that in the last page, you could've gotten at-least-equal quality at the same-or-lower filesize with PNG-8 instead of PNG-24 – dtech – 2011-09-26T18:56:09.433
That's true. Plus there's PNG-8 with Alpha Transparency, but I suppose I was trying to show its ultimate strengths. Maybe I'll expand on it. – Django Reinhardt – 2011-09-28T23:29:56.667
1
You're wrong about PNG not supporting animation. PNG can do it fine, most viewers and browsers don't support it. http://en.wikipedia.org/wiki/APNG
Firefox supports it pretty well, it seems. http://people.mozilla.com/~dolske/apng/demo.html
Wow. I never knew that. Thanks for pointing it out! I guess with no Photoshop support (they really don't like PNG do they?) and no Internet Explorer/Safari/Chrome support, it's pretty useless for most purposes. Thanks for sharing, though. – Django Reinhardt – 2012-01-17T23:50:16.563
28
The existing answers include very little technical data, so I'll include that here.
Color Depth
Most computer monitors run at 24-bit color depth. The human eye can distinguish about that many colors. Additional color depth is mostly to be able to retain information from a sensor so that manipulation of a photograph has more data to work with. Trying to represent a photograph in 8-bit color is going to result in graininess.
Compression
This basically refers to how large the final file will be. More compression equals a smaller file. However, JPEG attains small file sizes by throwing data away. This is referred to as "lossy" compression, because you can never get the original uncompressed data back. Its compression is also optimized for photographs where high-contrast edges are uncommon. As stated in other answers, it's a bad choice for anything other than photographs.
Alpha/Transparency
Alpha refers to transparency, but it implies that there's more than one level of transparency. GIF has the ability to define transparent pixels, but it's either opaque or 100% transparent, and "transparent" gets used as one of the 256 colors. PNG and BMP have the ability to mark each pixel as opaque, transparent, or partially transparent, like a piece of colored glass. Most commonly, there are 256 levels of transparency, though PNG can actually have up to 65,536 levels. JPEG has no support for transparency.
Animation
Effectively, of these formats, only GIF has any support for animation. There are specifications for animation with PNG (MNG, APNG) and JPEG (MJPEG), but they are not widely supported. (APNG works in recent versions of Firefox and Opera.) In practice, most animations you see on web pages are implemented in Flash.
APNG is gaining a lot of support. – Phoshi – 2009-10-10T16:37:08.520
Sure enough. I hadn't noticed. – wfaulk – 2009-10-10T17:00:01.967
Well, most modern browsers support it, but it's little known. IE8 doesn't support it, I don't think (but can read it as PNG, so displays the first frame) – Phoshi – 2009-10-10T19:05:51.120
Great thought processing .. – InfantPro'Aravind' – 2009-12-17T04:18:30.200
25
3+1 for practical considerations of when to use each. – Andrew Coleson – 2009-10-10T17:42:49.667
4Be careful about using PNGs. As a lossless format, they're generally unsuited to photographs and the like, due to file size. Definitely not a "modern replacement" for all purposes. Transcoding from JPG to PNG would be really stupid. – Paul McMillan – 2009-10-10T18:47:22.610
@Paul - I agree, it's certainly not useful for all purposes and in particular not for photos, but when used for web graphics it does replace JPG. – Torben Gundtofte-Bruun – 2009-10-10T22:40:12.310
2I don't think there's ever a need for BPM nowadays. – Arjan – 2009-10-15T11:22:32.210
@Arjan, there is need when you're working with low-tech customers (who still use Win2k, for instance). Plus, it's what Windows Paint defaults to, so it will be de facto standard for some time yet. – Torben Gundtofte-Bruun – 2009-10-15T11:57:23.123
Little note, on file size between PNG and JPG. If you can accept a loss, then JPG is a better choice, lighter indeed. However, if you want to save an image without loss, you should prefer PNG over a JPG with "100% quality", because the PNG will be smaller then. – Gnoupi – 2009-10-16T12:59:47.057
1
PNG is almost always smaller than GIF. It has superior compression scheme. When it's larger than same-looking GIF, it's usually fault of lousy software (e.g. Photoshop before CS2). Use paletted (not 24-bit!) PNG and fix them with PNG optimizer: http://imageoptim.pornel.net and you'll never want to waste bandwidth on GIFs again.
– Kornel – 2009-12-27T13:55:30.53713
1Nice overview. But why is BMP marked as "lossless: false" in the table? In the text you state IMHO correctly that BMP is indeed lossless. – mpy – 2014-10-15T18:46:22.497
2I know this is an old thread, and thank you for the answer, but note that BMP is optionally compressed with a very simplistic, lossless, RLE compression. – ysap – 2015-12-17T13:01:31.343
Any other reason why PNG is NOT recommended for photographs, aside from its bigger file size compared to JPEG? I first scanned my old photos in JPEG format, then later re-scanned them in PNG after realizing I was scanning a photo that would be stored in a lossy format. – JAT86 – 2018-05-12T23:41:18.883
4
BMP uses either raw bits with a small header, or Run-length Encoding. JPEG uses Discrete Cosine Transform. See the block at the bottoms of the Wikipedia articles for other compression/encoding algorithms.
Me likey the PCX. Way back when decide to learn assembler, for my first program, I wrote a PCX viewer. It was quite educational. (I did not write a JPG viewer). :-D
– Synetech – 2012-02-17T03:58:31.563
3
Simple guid:
1Actually Alpha Transparency IS supported, provided it's an 8-bit PNG. Weird, but true. – Django Reinhardt – 2011-06-13T20:13:15.893
1IE has supported PNG since some version 4.x (5 on Mac), but just not transparent PNG. – Arjan – 2009-10-15T11:49:12.923
1IE6 actually even supports transparent PNG if it has GIF-like transparency. Only PNG with full alpha isn't supported. – Kornel – 2009-12-27T13:51:16.610
1Not sure how my answer doesn't answer your original question, and how your chosen answer does...? :-/ – Django Reinhardt – 2011-12-11T21:26:55.707
4> which one of these formats requires less memory Um, define “less memory”. Do you mean it takes up less disk space? (JPEG for photos, PNG and/or GIF for screenshots.) Do you mean the compressed file takes less space in memory? (Same as disk space.) Do you mean the decoded image takes less space in memory (None; they are all essentially the same when decoded to raw.) – Synetech – 2012-02-17T03:52:28.780
15
Btw, JPG and JPEG both refer to the same thing (see e.g. http://en.wikipedia.org/wiki/JPEG) so the title could be simplified a little.
– Jonik – 2009-10-10T10:22:03.553