Misc Links
Forum Archive
News Archive
File DB



Latest Forum Topics
wow 56 k modems are
Posted by Red Squirrel
on Oct 14 2013, 11:52:23 pm

I Need A Program
Posted by rovingcowboy
on Sep 23 2013, 5:37:59 pm

having trouble witn lan
Posted by rovingcowboy
on Sep 23 2013, 5:40:56 pm

new problem for me
Posted by rovingcowboy
on Sep 23 2013, 5:54:09 pm

RBC Royal Bank
Posted by Red Squirrel
on Aug 13 2013, 6:48:08 pm


Image Format Breakdown
Bmp vs Jpg vs gif vs png comparison
By Red Squirrel

There are various image formats available for electronically stored images. Jpg, gif and png are mostly used, especially for the Internet as they have a reasonable file size, and various compression options as well. Each image format has their pros and cons and read on to find out more about these 4 image types. Please note, however that there are other formats, but I will not be touching them as they are less popular.

BMP Bitmap
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:

  • A header (BM) which is noticeable if you open it in an hex editor.
  • Bitmap info header, which contains info such as the dimensions.
  • A color table, representing the different colors used.(Not present for 24-bit bitmaps)
  • Finally, the image data, which can actually be viewed and edited in an hex editor.

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.

  • JPG header saying it's a JPG
  • dimensions
  • Format(grayscale, 24-bit etc)
  • sampling factor information
  • data

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:

  • Signature (whether it is a GIF 87 or 89)
  • global descriptor
  • dimensions
  • flags/options
  • ...And many more less important (but still required) ones.
  • data

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.

Next Page
18186 Hits Pages: [1] [2] [3] 10 Comments

Latest comments (newest first)
Posted by Red Squirrel on December 12nd 2005 (16:28)
Seems to work at my end. (typical tech support line)
Posted by glennsharrock on December 12nd 2005 (06:28)
the image of the Squirrel seems to be missing (I would very much like to see the image in which the results were made)
Posted by rovingcowboy on November 11th 2004 (15:50)
are you tired of me coming to this site red? you seem to not like it that i use I.E.
most the time.


even though everything you say don't work in ie seems to work in my copy of it? cool.gif

i have not tryed transperent png's yet but everything else works.?

when it has not crashed that is em320.gif

Posted by Red Squirrel on November 11th 2004 (16:33)
JPEG 2000? Never heard of those. I can maybe do some research. Are they even supported by most browsers? It would definatly be nice to see IE support those but meanwhile... just screw IE. laugh.gif
Posted by Red Squirrel on November 11th 2004 (16:41)
LOL I'll have to check if they have volume discounts. laugh.gif
View all comments
Post comment

Top Articles Latest Articles
- What are .bin files for? (28261 reads)
- Proper case cooling basics (22215 reads)
- Cyberstalking - What it is and what you can do as a victim. (20446 reads)
- Php how-to for starters (20030 reads)
- How to Use MDADM Linux Raid (19623 reads)
- How to Use MDADM Linux Raid (19623 reads)
- What is Cloud Computing? (18395 reads)
- Dynamic Forum Signatures (version 2) (18499 reads)
- Successfully Hacking your iPhone or iTouch (18759 reads)
- Ultima Online Newbie Guide (19325 reads)
corner image

This site best viewed in a W3C standard browser at 800*600 or higher
Site design by Red Squirrel | Contact
© Copyright 2014 Ryan Auclair/IceTeks, All rights reserved