| ★ wanayoo — archive 1999 http://www.howstuffworks.com/question408.htm | Nouvelle recherche | Portail wanayoo |
Question of the Day
Question
Why are there so many different image formats on the web? What, for example, is the difference between a GIF and a JPG image?
Answer
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 bitmap image, the image file has to define the exact color of every pixel in the image. For example, imagine a typical bitmap on the web that is 400 by 400 pixels. To define this image, you would need 24 bits per pixel for 160,000 pixels, or 480,000 bytes. That would be a huge image file, so both the GIF and JPG formats compress the image in different ways.
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:
Each weekday Marshall Brain answers
questions submitted by the readers of How Stuff Works
in the Question of the Day section of HSW.
You can also view previously answered questions in
the HSW Question Archive.
Here is today's question!
Teachers: Get essential and trusted Internet resources compiled specifically for you!
Q&A Archive
Asking Questions
The two most common by far are GIF and JPEG files. Both of these formats encode static (as opposed to animated) bitmap images.
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!
How did you like today's question?
Click Here to see the huge HSW Question Archive!
Click Here to see the How Stuff Works homepage!
|
|
||||||||||||||||||||||||||||
|
 |
How Stuff Works (http://www.howstuffworks.com) is a production of Howstuffworks.com, Inc. 920 Main Campus Drive, Suite 400 - Raleigh, NC 27606 See http://www.howstuffworks.com/contact.htm for contact information |
Copyright © 1998-2000 Howstuffworks.com, Inc. All rights reserved.
