Image File Types in HTML5

By: Justin Macri, Jordan Sparks & Wesley Chan

PNG - Portable Network Graphics JPEG - Joint Photographic Experts Group GIF - Graphics Interchange Format BMP - Windows bitmap

Common Image Types

This file format was created as the free, open-source successor to the GIF. The PNG file format supports truecolor (16 million colors) while the GIF

supports only 256 colors. PNG-8 saves to 256 colors as well, but the file size was noticeably smaller. The PNG file mainly used when the image has large, uniformly colored

areas. PNG-24 contains a range of colors similar to the high colors of a JPG, but in

no means replace it because PNG file sizes are larger, since PNG files are lossless (uses complex algorithms to cut the file size in the most efficient way yet show an image in the most accurate form), they are best suited for editing pictures

PNG contains alpha channels that allow users to to specify the opacity of any pixels from 0-255. 0 as fully transparent, 255 as fully opaque. Best suited for making graphics where the PNG file is to be placed on top of a background color to create a translucent effect.

Many older browsers currently do not support the PNG file format; however, with Mozilla Firefox or Internet Explorer 7, all contemporary web browsers now support all common uses of the PNG format.

PNG

Is a compression method JPEG-compressed images are usually stored in the JFIF

(JPEG File Interchange Format) file format. JPEG compression is (in most cases) lossy compression. (The quality of the image is degraded slightly in this

format) Nearly every digital camera can save images in the

JPEG/JFIF format, which supports 8 bits per color (red, green, blue) for a 24-bit total, producing relatively small files.

The JPEG/JFIF format also is used as the image compression algorithm in many Adobe PDF files

JPEG

Is limited to an 8-bit palette, or 256 colors. This makes the GIF format suitable for storing

graphics with relatively few colors such as simple diagrams, shapes, logos and cartoon style images.

The GIF format supports animation and is still widely used to provide image animation effects.

(This is known as an “animated gif”) It also uses a lossless compression that is more

effective when large areas have a single color, and ineffective for detailed images or dithered images.

Illegal to make GIF up until 4 years ago.

GIF

Handles graphics files within the Microsoft Windows OS

Typically, BMP files are uncompressed, hence they are large in size.

The advantage is their simplicity and wide acceptance in Windows programs.

Sometimes used for vector artwork.

BMP

In conclusion, the different file types have different uses on webpages and in HTML5, but they all have the same function, to allow others to see a picture. To summarize, PNG’s are used when you want a lossless (yet large sized) image that can still edit with. JPEG’s are used when you want a final product image, that will look good but not preferred for editing. GIF’s are useful for small images or simple diagrams, shapes or logos. BMP’s are used mostly in Windows applications, however are completely lossless and widely accepted.

Conclusion