Bmp vs Jpg vs gif vs png comparison
By Red Squirrel
Bitmaps are not used that much anymore for circulating pictures around and such. This is because of their rather large file size. However, they are used within windows for stuff to work, and it makes sense since Microsoft created them. A bitmap is exactly that, a map of bits, which define an image. They come in 1, 4, 8 and 24-bit formats where bit simply means 2 to the power of. So a 1-bit bitmap supports 2^1 colors (monochrome) a 4-bit bitmap supports 2^4 (16) colors a 8-bit bitmap supports 2^8 (256) colors and finally, a 24-bit bitmap supports 2^24 (16,777,216) colors.
Bitmaps, also known as Device Independent Bitmap (dib), is a map of colored pixels that are specified independently from the display device. The structure of a bitmap is fairly straightforward. It contains the following:
If you want to experiment, create a new white bitmap file that is small, and fire up an hex editor and you'll notice after a bunch of gibberish (the headers) some FF's. This is white. Edit 3 bytes to 0000FF and you will get a blue pixel in the lower left corner of the bitmap. Also notice that FF0000 is the reverse for blue in html (#0000FF). Interesting is it? In bitmaps, everything is reversed, you started writing on the top, but it changed the bottom, and same with the codes. Instead of RGB it's BGR. So edit out a larger section, put FF000000FF000000FF and you will get 3 pixels for blue green and red.
So as you can see bitmaps are pretty simple images, and they're actually displayed in a human readable format in their "machine language" form.
JPG Joint Photographic Experts Group
JPGs are probably the most widely used format for circulating pictures around the Internet, either by email, or simply posting. The reason is because they have lot of different compression options and have a decent quality:size ratio (depends on compression).
JPGs use a lossy compression format, this means that information is lost forever. So if you compress a picture to 90% and it looks bad, you can't just resave it with full quality and expect it to look good again. However, when using a 30% compression you won't notice as much, and for a joke picture or something, it does not really matter. But for a desktop wallpaper or printing, you'll want to use no compression, which will keep it as high quality as a bitmap, which has no compression or loss. JPG compression basically disregards data that is deemed less important, which explains why it's lossy, it throws away the data instead of making it smaller. Because picture data is so variable, it is hard to compress it the same way zips are compressed.
JPGs have a similar header to BMPs, though they are much less human readable if opened in a hex editor.
If opened in a text editor, you will notice that there is text, such as the program it was created in. This is virtually not needed for the image to show, and there are actual programs that get rid of this and cut the file size down a bit. One thing you'll notice is that if you try to edit any of this, you'll probably end up corrupting it unless you understand the format, while with bitmap, it is fairly easy to figure out. This is because of the JPG compression. It's almost as if it was encrypted, since that's basically what compression will do, only difference is that this "encryption" is not designed to be unbreakable, but rather to make things smaller, so "encoding" is probably a better word to use. You/the program opening it must know how to decode it to read the data.
GIF Graphic Interchange Format
Unlike BMP and JPG, GIFs can be animated and they support transparency, a single defined color that will simply be transparent, thus show the background of whatever it's on, such as the background of a table cell in a html document. GIFs were made by CompuServe in about the 80's as a faster way to transfer images using a modem. They are also quite different in terms of structure. They are limited to only 256 colors, unfortunately. GIFs can be 8,7,6,5,4,3,2 or 1 bits GIFs. Unlike JPG, they use a lossless compression format; However, the fact that they are limited to 256 colors makes the files smaller on their own, and of low quality when complicated(basically any photo) pictures are involved, but they are great for layout images or small icon pictures.
GIFs come in 87a format and 89b format. The main difference is that 89b format supports animation. Most browsers will read those, so it's best to stick with that format when saving, if your program lets you choose. Otherwise 89a is most likely the standard most newer programs save as.
GIF compression works in terms of horizontal lines, it will check for horizontal lines that are the same color and save them that way. So an image with 10 horizontal lines will be smaller then the same image with vertical lines. Because it will see it as multiple small horizontal lines instead, when reading the first pixel line. This is just the way the compression works.
GIFs have a much more complex header structure then BMP and JPG, so here are the main sections that can be found:
A whole article could actually be written on just the headers! If opened in an hex editor, GIFs are also pretty hard to edit and not very readable. Also, the data of a GIF is stored in bits, and not bytes, so this explains why there are so many different bytes used as a single bit that is missing in a string could shift all the rest of the bits and make the bytes equal something else.
PNG Portable Network Graphics
PNG format is a good replacement for GIF because it is very efficient for small images, like GIF is, and it also supports transparency. However PNG does those things better! It can support up to 24-bit color! Also, PNG compression is much better then gif. An image using ALL 24-bit colors would be under 1MB!!! Try doing that with bitmap! Note that it all depends on how it's saved. I have found that with photoshop PNGs will sometimes end up bigger then the equivalent GIF version of an image. But when properly compressed the size can dramatically drop without loosing data. Also, the less colors there are, the better they compress.
PNG's transparency support, also known as alpha channel, or mask is incredible. It supports having pixels that are only semi transparent, so you can have a pixel that is 50% transparent. That means that you can have nice soft edges to images with any background and are not rough on the edges.
On the next page we'll compare all the types using different graphics.
This site best viewed in a W3C standard browser at 800*600 or higher
Site design by Red Squirrel | Contact
© Copyright 2015 Ryan Auclair/IceTeks, All rights reserved