Web designers, come and see this article about image formats! It is important for you, the loading time of your pages is mostly about the size of your images or animations on your pages. Knowing the image format basics well will let you have better quality images with smaller filesize. Most of the web designer rookies only uses JPEG, because they don't know other formats. They just know JPEG is the best, actually it is true, she is the best for their knowledge, because they only know about BMP and JPEG :) But don't forget that most of the web page images are small images with containing little variations of colors, so GIF or PNG is mostly the best (except real photographs, or colorful big photo files of course) and mostly used image type for web designers.
There are various image formats that stores a picture or image as digital data. Most popular ones are: JPEG, BMP, GIF and PNG. In this topic, I will not go into the details of all, because everyone can be a standalone topic and hundreds of pages of theoretical documentation, but I will discuss similarities, differences, properties and major advantages of/between them. Also, we will discuss which one to use when for most common uses, this will be a practical topic rather than a theoretical.
I have used Adobe Photoshop 8.0 CS to produce the example images that will be covered on this entry.
The most common reference point of digital images is quality/size tradeoff.
Of course, the higher the quality, the larger the filesize. Various types of lossy and lossless compressed formats are derived in time to minimize the size with considering satisfying quality.
JPEG: The most common, loss compressed format
JPEG (pronounced JAY-peg) stands for
Joint Photographic Experts Group, the name of the committee that created the standard. The group was organized in 1986, issuing a standard in 1992 which was approved in 1994 as ISO 10918-1.
JPEG itself specifies both the codec, which defines how an image is compressed into a stream of bytes and decompressed back into an image, and the file format used to contain that stream. The compression method is usually lossy compression, meaning that some visual quality is lost in the process, although there are variations on the standard baseline JPEG which are lossless.
Image files that employ JPEG compression are commonly called "JPEG files". The most common file extension for this format is .jpg, though .jpeg, .jpe, .jfif and .jif are also used.
JPEG/JFIF is the format most used for storing and transmitting photographs on the World Wide Web. For this application, it is preferred to formats such as GIF, which has a limit of 256 distinct colors that is insufficient for color photographs, and PNG, which produces much larger image files for this type of image. The JPEG compression algorithm is not as well suited for line drawings and other textual or iconic graphics, and thus the PNG and GIF formats are preferred for these types of images.
Although JPEG also has a lossless standard, the most common use of JPEG is for lossy compressed. There are lossless image compression algorithms, but JPEG achieves much greater compression than is possible with lossless methods. JPEG is designed to exploit known limitations of the human eye, notably the fact that small color changes are perceived less accurately than small changes in brightness.
Why to use JPEG?
There are two good reasons: to make your image files smaller, and to store 24-bit-per-pixel color data instead of 8-bit-per-pixel data.
Making image files smaller is a win for transmitting files across networks and for archiving libraries of images. Being able to compress a 2 Mbyte full-color file down to, say, 100 Kbytes makes a big difference in disk space and transmission time! And JPEG can easily provide 20:1 compression of full-color data. If you are comparing GIF and JPEG, the size ratio is usually more like 4:1.
The second fundamental advantage of JPEG is that it stores full color information: 24 bits/pixel (16 million colors). GIF, the other image format widely used on the net, can only store 8 bits/pixel (256 or fewer colors).
A lot of people are scared off by the term "lossy compression". But when it comes to representing real-world scenes, no digital image format can retain all the information that impinges on your eyeball.
JPEG is best for the images containing many colors such as photographs. Photographs mostly has high resolution many mixed with 24-bit colors. Having a compressed JPEG photograph has greater quality and less storage size than an uncompressed GIF one. Because, we will loose many of the colors for GIF (we can have max. of 256) and we will have sharp changes between adjacent pixels of image. But this is not always true. For many case, also for photographs, (mostly for less colorful photographs) GIF can perform better quality with better(smaller) size in bytes.
JPEG is not going to displace GIF entirely; for some types of images, GIF is superior in image quality, file size, or both. One of the first things to learn about JPEG is which kinds of images to apply it to.
Generally speaking, JPEG is superior to GIF for storing full-color or gray-scale images of "realistic" scenes; that means scanned photographs, continuous-tone artwork, and similar material. Any smooth variation in color, such as occurs in highlighted or shaded areas, will be represented more faithfully and in less space by JPEG than by GIF.
GIF does significantly better on images with only a few distinct colors, such as line drawings and simple cartoons. Not only is GIF lossless for such images, but it often compresses them more than JPEG can. For example, large areas of pixels that are all exactly the same color are compressed very efficiently indeed by GIF. JPEG can't squeeze such data as much as GIF does without introducing visible defects. (One implication of this is that large single-color borders are quite cheap in GIF files, while they are best avoided in JPEG files.)
Computer-drawn images, such as ray-traced scenes, usually fall between photographs and cartoons in terms of complexity. The more complex and subtly rendered the image, the more likely that JPEG will do well on it. The same goes for semi-realistic artwork (fantasy drawings and such). But icons that use only a few colors are handled better by GIF.
JPEG has a hard time with very sharp edges: a row of pure-black pixels adjacent to a row of pure-white pixels, for example. Sharp edges tend to come out blurred unless you use a very high quality setting. Edges this sharp are rare in scanned photographs, but are fairly common in GIF files: consider borders, overlaid text, etc. The blurriness is particularly objectionable with text that's only a few pixels high. If you have a GIF with a lot of small-size overlaid text, don't JPEG it. (If you want to attach descriptive text to a JPEG image, put it in as a comment rather than trying to overlay it on the image. Most recent JPEG software can deal with textual comments in a JPEG file, although older viewers may just ignore the comments.)
Plain black-and-white (two level) images should never be converted to JPEG; they violate all of the conditions given above. You need at least about 16 gray levels before JPEG is useful for gray-scale images. It should also be noted that GIF is lossless for gray-scale images of up to 256 levels, while JPEG is not.
Example 1 - Comparison
between different levels of JPEG quality, GIF, BMP and PNG
Example 2 - Comparison
for different images between JPEG, GIF and PNG
Also I want to mention about JPEG is that, if you play on a JPEG image, that means opening it in paint or photoshop, and modify it, and re-save it, the loss of JPEG accumulates. It would be nice if, having compressed an image with JPEG, you could decompress it, manipulate it (crop off a border, say), and recompress it without any further image degradation beyond what you lost initially. Unfortunately THIS IS NOT THE CASE. In general, recompressing an altered image loses more information. Hence it's important to minimize the number of generations of JPEG compression between initial and final versions of an image.
Another thing I have to mention is, when once you convert an image to JPEG of compression quality "X", don't ever convert that JPEG to GIF, BMP, PNG or ever JPEG of quality greater than "X" or something else format to achieve better quality. Because you can't. Once you compress the image with JPEG lossy compression, you can't get original quality or better quality of image than it. So, converting to other formats or ever same JPEG format having higher quality will result to higher filesize with exactly the same quality or maybe lower quality.
Another concept about JPEG is Progressive JPEG Vs Baseline JPEG:
A simple or "baseline" JPEG file is stored as one top-to-bottom scan of the image. Progressive JPEG divides the file into a series of scans. The first scan shows the image at the equivalent of a very low quality setting, and therefore it takes very little space. Following scans gradually improve the quality. Each scan adds to the data already provided, so that the total storage requirement is roughly the same as for a baseline JPEG image of the same quality as the final scan. (Basically, progressive JPEG is just a rearrangement of the same data into a more complicated order.)
The advantage of progressive JPEG is that if an image is being viewed on-the-fly as it is transmitted, one can see an approximation to the whole image very quickly, with gradual improvement of quality as one waits longer; this is much nicer than a slow top-to-bottom display of the image. The disadvantage is that each scan takes about the same amount of computation to display as a whole baseline JPEG file would. So progressive JPEG only makes sense if one has a decoder that's fast compared to the communication link. (If the data arrives quickly, a progressive-JPEG decoder can adapt by skipping some display passes. Hence, those of you fortunate enough to have
T1 or faster net links may not see any difference between progressive and regular JPEG; but on a modem-speed link, progressive JPEG is great.)
Another disadvantage of JPEG is; JPEG does not support transparency and is not likely to do so any time soon. It turns out that adding transparency to JPEG would not be a simple task.
We have said that JPEG also has a lossless type. Lossless JPEG is a completely different method that really is lossless. However, it doesn't compress nearly as well as baseline JPEG; it typically can compress full-color data by around 2:1. And lossless JPEG works well only on continuous-tone images. It does not provide useful compression of palette-color images or low-bit-depth images.
Lossless JPEG has never been popular --- in fact, no common applications support it --- and it is now largely obsolete.
BMP: Simplest and the best quality
BMP is a bitmapped graphics format used internally by the Microsoft Windows and OS/2 graphics subsystem (GDI), and used commonly as a simple graphics file format on those platforms.
Images are generally stored with a color depth of 2 (1-bit), 16 (4-bit), 256 (8-bit), 65,536 (16-bit), or 16.7 million (24-bit) colors (the bits represent the bits per pixel). 8-bit images can also be greyscale instead of indexed color. An alpha channel (for transparency) may be stored in a separate file, where it is similar to a greyscale image.
BMP files are usually not compressed, so they are typically much larger than compressed image file formats for the same image. For example, an 800×600 24-bit image will occupy almost 1.4 megabytes. As such, BMPs are generally unsuitable for transferring images on the Internet or other slow or capacity-limited media.
Despite the relatively large file size, the simplicity of BMP and its widespread familiarity in MS Windows and elsewhere, as well as the fact that this format is well-documented and free of patents, makes it a very common format that image processing programs from many operating systems can read and write.
As a summary, BMP has lossless format and the best quality, but since it has a really large filesize, it is not as commonly used as other formats in daily life.
GIF: Concept of color index and animating images
GIF (Graphics Interchange Format) is an 8-bit-per-pixel bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability.
The format uses a palette of up to 256 distinct colors from the 24-bit RGB color space. It also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for more simple images such as graphics or logos with solid areas of color.
GIF images are compressed using the LZW lossless data compression technique to reduce the file size without degrading the visual quality.
There are many JPG Vs. GIF comparisons on the internet, no need to make one more, but I will give you some usage of GIF. If you understand the logic of JPEG and GIF, you can decide which one to use:
• GIFs are suitable for sharp-edged line art (such as logos) with a limited number of colors. This takes advantage of the format's lossless compression which preserves very sharp edges (in contrast to JPEG).
• GIFs are used for small animations and low resolution film clips.
• In view of the limitation on the GIF formation to 256 colors, JPEG is a more commonly used format for digital photographs. JPEGs can save information on more than 16 million different colors and use more aggressive, lossy compression which has a less noticeable effect on photographs than it does on images with sharp edges.
• In circumstances where speed is more important than reduced file size, uncompressed bitmap formats such as Windows bitmap are more commonly used than the GIF format, since uncompressed bitmaps contain raw pixel information and can be displayed very quickly.
• The PNG format is becoming an increasingly popular replacement for GIF images since it uses better compression techniques and does not have a limit of 256 colors. PNGs do not support animations, however.
GIF is palette based: although any palette selection can be one of millions of shades, the maximum number that can be used in a frame is 256. These are stored in a "palette", a table that associates each palette selection number with a specific RGB value.
PNG: The modern competitor of GIF
PNG (Portable Network Graphics) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace the GIF format, as an image-file format not requiring a patent license.
PNG supports palette-based (palettes of 24-bit RGB colors) or greyscale or RGB images. PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK).
PNG was designed as a replacement for the GIF format. PNG offers better compression and more features than GIF. The format is more suitable than GIF in instances where true-color imaging, alpha transparency, or a lossless data format are required. However, PNG does not support animation, so the GIF format is still used for simple animations.
With indexed color images, the palette is always stored in RGB at a depth of 8 bits per channel (24 bits per palette entry). The palette must not have more entries than the image bitdepth allows for but it may have fewer (so if an image for example only uses 90 colors there is no need to have palette entries for all 256).
PNG offers a variety of transparency options. With truecolor and greyscale images either a single pixel value can be declared as transparent or an alpha channel can be added. For paletted images, alpha values can be added to palette entries. The number of such values stored may be less than the total number of palette entries, in which case the remaining entries are considered fully opaque.
PNG uses a non-patented lossless data compression method known as deflation. This method is combined with prediction, where for each image line, a filter method is chosen that predicts the color of each pixel based on the colors of previous pixels and subtracts the predicted color of the pixel from the actual color. An image line filtered in this way is often more compressible than the raw image line would be, especially if it is similar to the line above (since deflate has no understanding that an image is a 2D entity, and instead just sees the image data as a stream of bytes).
Comparison: PNG Vs. GIF
• On most images, PNG can achieve greater compression than GIF.
• PNG gives a much wider range of transparency options than GIF, including alpha-channel transparency.
• PNG gives a much wider range of color depths than GIF (truecolor up to 48-bit compared to 8-bit 256-color), allowing for greater color precision, smoother fades, etc.
• GIF supports animation while PNG does not.
• PNG images are widely supported, but not as widely supported as GIF images.
Comparison: PNG Vs. JPEG
• JPEG can produce a smaller file than PNG for photographic (and photo-like) images since it uses a lossy encoding method specifically designed for photographic image data. Using PNG instead of a high-quality JPEG for such images would result in a large increase in filesize (often 5–10 times) with negligible gain in quality.
• PNG is a better choice than JPEG for storing images that contain text, line art, or other images with sharp transitions. Where an image contains both sharp transitions and photographic parts a choice must be made between the large but sharp PNG and a small JPEG with artifacts around sharp transitions.
• JPEG is a poor choice for storing images that require further editing as it suffers from generation loss, whereas lossless formats do not. This makes PNG useful for saving temporary photographs that require successive editing. When the photograph is ready to be distributed, it can then be saved as a JPEG, and this limits the information loss to just one generation. That said, PNG does not support Exif image data from sources such as digital cameras, which makes it problematic for use amongst amateur and especially professional photographers. TIFF does support it as a lossless format, but is much larger in file size for an equivalent image.
• JPEG has historically been the format of choice for exporting images containing gradients, as it could handle the color depth much better than the GIF format. However, any compression by the JPEG would cause the gradient to become blurry, but a 24-bit PNG export of a gradient image often comes out identical to the source vector image, and at a small file size. As such, the PNG format is the optimal choice for exporting small, repeating gradients for web usage.
GIF and PNG uses similar indexing technique, that is completely different from JPEG's compression technique. So, most of the time, PNG has nearly same quality and filesize with GIF, so it is difficult to decide which one has less filesize, but my experience shows that for large images like 100x100, PNG performs better than GIF, for small images and images that has little number of colors like 8 or 16, GIF performs better. Also, for animated images, you have to use GIF.
|
Set as Homepage
Add to Favourites
Recommend
Contact
