JPEG vs PNG vs BMP vs GIF vs SVG - Super User most recent 30 from 2019-03-21T10:20:56Z 39 JPEG vs PNG vs BMP vs GIF vs SVG Narek 2009-10-10T09:36:56Z 2017-06-29T14:25:53Z <p>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.</p> 25 Answer by Torben Gundtofte-Bruun for JPEG vs PNG vs BMP vs GIF vs SVG Torben Gundtofte-Bruun 2009-10-10T09:44:01Z 2009-10-10T09:44:01Z <ul> <li>Use GIF if the image has few colors (like icons). Can also be used for animated images (like ad banners).</li> <li>Use JPG if the image has many colors (like photos). JPEG is the same thing.</li> <li>Use BMP if you want to save the image without compression. Much larger filesize!</li> <li>Use PNG if you want to publish the image on the web and be up-to-date on modern standards. Pros: Suitable as modern replacement for both GIF and JPG, and is an open standard, and allows transparency. Cons: Not supported by older software, and file size can be larger than comparable GIF or JPG.</li> </ul> 52 Answer by harrymc for JPEG vs PNG vs BMP vs GIF vs SVG harrymc 2009-10-10T09:46:54Z 2015-11-20T21:10:21Z <p>From <a href="" rel="noreferrer">What is the difference between TIFF, GIF, JPG, JPEG, PNG, and a BMP file?</a></p> <p><a href="" rel="noreferrer">BMP</a> - 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.</p> <p><a href="" rel="noreferrer">JPG / JPEG</a> - (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.</p> <p><a href="" rel="noreferrer">GIF</a> - (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.</p> <p><a href="" rel="noreferrer">PNG</a> - (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.</p> <p><a href="" rel="noreferrer">TIFF</a> - (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.</p> 28 Answer by wfaulk for JPEG vs PNG vs BMP vs GIF vs SVG wfaulk 2009-10-10T15:31:57Z 2009-10-10T17:00:55Z <p>The existing answers include very little technical data, so I'll include that here.</p> <ul> <li><strong>JPEG</strong>: up to 24-bit color (possibly more?), variable (usually high) compression, lossy, no alpha support</li> <li><strong>PNG</strong>: up to 48-bit color, moderate compression, lossless, alpha support</li> <li><strong>BMP</strong>: up to 24-bit color, very little compression, lossless, alpha support</li> <li><strong>GIF</strong>: up to 8-bit color, little compression, lossless, transparency support, animation support</li> </ul> <p><strong>Color Depth</strong></p> <ul> <li>8-bit color == 256 colors</li> <li>24-bit color == 16,777,216 colors</li> <li>48-bit color == 281,474,976,710,656 colors</li> </ul> <p>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.</p> <p><strong>Compression</strong></p> <p>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.</p> <p><strong>Alpha/Transparency</strong></p> <p>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.</p> <p><strong>Animation</strong></p> <p>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.</p> 74 Answer by Robert MacLean for JPEG vs PNG vs BMP vs GIF vs SVG Robert MacLean 2009-10-15T11:16:36Z 2012-01-17T16:19:20Z <p>In xkcd style <a href="">from</a>:</p> <p><img src="" alt="alt text"></p> 3 Answer by Michael Borgwardt for JPEG vs PNG vs BMP vs GIF vs SVG Michael Borgwardt 2009-10-15T11:42:35Z 2009-10-15T11:42:35Z <p>Simple guid:</p> <ul> <li>For photographs, use: <ul> <li>Camera-specific raw formats if you have professional equipment and want to do a lot of post-processing</li> <li>JPEG otherwise (for publishing photos on the web, you'll have to convert the raw formats to JPEG as well)</li> </ul></li> <li>For anything with sharp edges, fine lines and few colors (such as screenshots or logos) use: <ul> <li>GIF if you're doing a webpage that has to support very old browsers (IE 6 mainly), or if you want to do simple animations</li> <li>PNG otherwise</li> </ul></li> <li>There is no good reason to use BMP, unless a specific program does not accept other formats.</li> </ul> 4 Answer by Ignacio Vazquez-Abrams for JPEG vs PNG vs BMP vs GIF vs SVG Ignacio Vazquez-Abrams 2010-04-13T16:58:01Z 2010-04-13T16:58:01Z <p>BMP uses either raw bits with a small header, or <a href="" rel="nofollow noreferrer">Run-length Encoding</a>. JPEG uses <a href="" rel="nofollow noreferrer">Discrete Cosine Transform</a>. See the block at the bottoms of the Wikipedia articles for other compression/encoding algorithms.</p> 60 Answer by Django Reinhardt for JPEG vs PNG vs BMP vs GIF vs SVG Django Reinhardt 2011-06-13T11:00:35Z 2015-10-29T11:22:46Z <p>You should be aware of a few key factors... </p> <p>First, there are two types of compression: <a href="" rel="noreferrer">Lossless</a> and <a href="" rel="noreferrer">Lossy</a>. </p> <ul> <li><strong>Lossless</strong> means that the image is made smaller, but at no detriment to the quality. </li> <li><strong>Lossy</strong> 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.</li> </ul> <p>There are also different colour depths (palettes): <a href="" rel="noreferrer">Indexed color</a> and <a href="" rel="noreferrer">Direct color</a>. </p> <ul> <li><strong>Indexed</strong> means that the image can only store a limited number of colours (usually 256), controlled by the author, in something called a Color Map</li> <li><strong>Direct</strong> means that you can store many <em>thousands</em> of colours that have not been directly chosen by the author</li> </ul> <hr> <p><strong>BMP</strong> - Lossless / Indexed and Direct </p> <p>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.</p> <p>Good for: Nothing really. There isn't anything BMP excels at, or isn't done better by other formats.</p> <p><img src="" alt="BMP vs GIF"></p> <hr> <p><strong>GIF</strong> - Lossless / Indexed only </p> <p>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 <a href="">for most use cases</a>, there can only be a maximum of 256 different colours in the file. That sounds like quite a small amount, and it is.</p> <p>GIF images can also be animated and have transparency.</p> <p>Good for: Logos, line drawings, and other simple images that need to be small. Only really used for websites.</p> <p><img src="" alt="GIF vs JPEG"></p> <hr> <p><strong>JPEG</strong> - Lossy / Direct </p> <p>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!</p> <p>Good for: Photographs. Also, gradients.</p> <p><img src="" alt="JPEG vs GIF"></p> <hr> <p><strong>PNG-8</strong> - Lossless / Indexed </p> <p>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.</p> <p>Good for: The main thing that PNG-8 does better than GIFs is having support for Alpha Transparency.</p> <p><img src="" alt="PNG-8 vs GIF"></p> <p><strong>Important Note:</strong> 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 <a href="" rel="noreferrer">PNGQuant</a>, another is to save your files with <a href="" rel="noreferrer">Fireworks</a>.</p> <hr> <p><strong>PNG-24</strong> - Lossless / Direct</p> <p>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.</p> <p>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.)</p> <p>Just like PNG-8, PNG-24 supports alpha-transparency, too.</p> <hr> <p><strong>SVG</strong> - Lossless / Vector</p> <p>A filetype that is currently growing in popularity is SVG, which is different than all the above in that it's a <a href="" rel="noreferrer">vector</a> file format (the above are all <a href="" rel="noreferrer">raster</a>). 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.</p> <p>For example:</p> <p><a href="" rel="noreferrer"><img src="" alt="PNG vs SVG"></a></p> <p><a href="" rel="noreferrer"><img src="" alt="SVG vs PNG"></a></p> <p>This means SVG is perfect for logos and icons you wish to retain sharpness on Retina screens or at different sizes.</p> <p>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).</p> <p>I hope that helps!</p> 13 Answer by Shumon Saha for JPEG vs PNG vs BMP vs GIF vs SVG Shumon Saha 2013-01-11T06:09:21Z 2014-10-17T21:54:39Z <p><img src="" alt="enter image description here"></p> <hr> <h2>BMP:</h2> <ul> <li>Old format. No loss of data.</li> <li>Not compressed - Stores value of each pixel. Hence pictures of the same dimensions have same filesize (kilobytes/megabytes). E.g., 800×600 BMP images are always 1.37 MiB like the popular WinXP wallpaper "Bliss" rolling hills.</li> <li>Transparency/translucency not supported</li> <li>Not recommended for anything</li> </ul> <hr> <h2>JPG:</h2> <ul> <li>Lossy compression.</li> <li>Loss amount can be set, e.g., while creating a graphic &amp; saving in Photoshop.</li> <li>Saving as higher quality means less loss of colours/depth and high filesize, and vice versa.</li> <li>Transparency/translucency not supported</li> <li>Recommended for photographs, not for graphics/icons</li> </ul> <hr> <h2>PNG:</h2> <ul> <li>Lossless compression (yeah, best of both WORDS/worlds)</li> <li>Supports transparency AND translucency, both are different</li> <li>Recommended for static graphics/icons, not for photographs</li> </ul> <hr> <h2>GIF:</h2> <ul> <li>Supports transparency but not translucency</li> <li>Recommended for ANIMATED graphics/icons only</li> <li>Maybe the moving photographs in frames in Harry Potter are GIFs :D</li> </ul>