Why are there so many different image formats on the Web?
Browse the article Why are there so many different image formats on the Web?
It certainly is true that there are lots of different image formats on the web -- Just at How Stuff Works, we use 6 different image formats:
In a GIF image, the number of colors is reduced to 256 and then "runs" of same-color pixels are encoded in a color+numberOfPixels format. For example, if there are 100 pixels on a line with the color 41, the image file stores the color (41) and the length of the run (100). This makes a GIF file great for storing drawings that have lots of same-color pixels, like this image from How Microprocessors Work:
This is a 500 by 500 pixel image, but instead of taking 750,000 bytes it takes only 9,000 bytes to store it as a GIF.
A JPG file uses a much more complex technique to compress images, like photographs, where the color of every pixel is different. A GIF file creates a perfect reproduction of the original, while a JPG does not. See Question 289 for some details.
An animated GIF is a sequence of GIF files all bonded together and displayed one after the other. With enough panes, you can get very realistic animations. However, the size of the file is the sum of the GIF files used to create the sequence, and that can add up quickly. There are a number of animated GIFs in How Engines Work. All of them are large compared to a static GIF. For example, this animated engine GIF is about 75,000 bytes:
An MPEG file uses a complex algorithm like a JPEG file does -- it tries to eliminate repetition between frames to significantly compress video information. In addition it allows a soundtrack (which animated GIFs do not). Because a typical sequence has hundreds or thousands of frames, file sizes can still get quite large. How Helicopters Work contains a dozen or so MPEG files.
Shockwave provides a vector-based animation capability. Instead of specifying the color of every pixel, a Shockwave file specifies the coordinates of shapes (things like lines, rectangles, circles, etc.) as well as the color of each shape. Shockwave files can be extremely small. They allow animation and sound. The images are also scalable -- because they are vector-based, you can enlarge the image and it will still look great. This page contains two great animated Shockwave files that are both about 10,000 bytes in size. Here is one of them:
Finally there are the NxView files (You can see a good example on How Gas Turbine Engines Work). These are vector-based 3D files that allow user interaction. You can rotate and zoom in on a 3-D object in any way you like. This is essentially the Shockwave idea taken to 3-D. The files are suprisingly small (100K to 200K) for the amount of detail they contain.
You can see that each file format has a set of features and advantages that make it the best choice in a given situation. That is why there are so many image formats!
- GIF files
- JPEG files
- Animated GIF files
- MPEG files
- Shockwave files
- NxView files
In a GIF image, the number of colors is reduced to 256 and then "runs" of same-color pixels are encoded in a color+numberOfPixels format. For example, if there are 100 pixels on a line with the color 41, the image file stores the color (41) and the length of the run (100). This makes a GIF file great for storing drawings that have lots of same-color pixels, like this image from How Microprocessors Work:
A JPG file uses a much more complex technique to compress images, like photographs, where the color of every pixel is different. A GIF file creates a perfect reproduction of the original, while a JPG does not. See Question 289 for some details.
An animated GIF is a sequence of GIF files all bonded together and displayed one after the other. With enough panes, you can get very realistic animations. However, the size of the file is the sum of the GIF files used to create the sequence, and that can add up quickly. There are a number of animated GIFs in How Engines Work. All of them are large compared to a static GIF. For example, this animated engine GIF is about 75,000 bytes:
Shockwave provides a vector-based animation capability. Instead of specifying the color of every pixel, a Shockwave file specifies the coordinates of shapes (things like lines, rectangles, circles, etc.) as well as the color of each shape. Shockwave files can be extremely small. They allow animation and sound. The images are also scalable -- because they are vector-based, you can enlarge the image and it will still look great. This page contains two great animated Shockwave files that are both about 10,000 bytes in size. Here is one of them:
You can see that each file format has a set of features and advantages that make it the best choice in a given situation. That is why there are so many image formats!