Graphics formats in HTML
There are two widely used formats for web graphics - GIF and JPEG. Their versatility, multifunctionality, small volume of the source file with a sufficient quality for a web site, gave them positive feedbacks, thus defining them as standard for web images. In addition there is PNG format, which is also supported by browsers when adding images. It exists in two forms - PNG-8 and PNG-24. But PNG format is not as popular as GIF or JPEG.
GIF
GIF (Graphics Interchange Format) - is a graphic file format commonly used when creating websites. GIF uses 8-bit colors and efficiently compresses continuous color areas, while preserving image details.
Features
- The number of colors in an image varies from 2 to 256, but those can be any colors from a 24-bit palette.
- GIF format can contain transparent areas. If you are using non-white background, it will be seen through "holes" in the image.
- Also it supports time-lapse change of images, this made the format popular for creating banners and simple animation.
- Uses loss-free compression method.
Scope of applications
Text, logos, illustrations with sharp edges, animated pictures, images with transparent areas, banners.
JPEG
JPEG (Joint Photographic Experts Group) - is a popular image format, widely used when creating websites and storing images. JPEG supports 24-bit color, and keeps brightness and shades of colors in photos. This format is called lossy, because JPEG algorithm selectively rejects data. Compression method sometimes can distort images, especially those containing text, fine details or sharp edges. JPEG format doesn't support transparency. When you save an image in this format, the transparent pixels are filled with a certain color.
Features
- The number of colors in the image is around 16 million, which is sufficient to keep the quality of a photographic image.
- The main feature of the format - the quality that allows you to have control over the end-size of the file.
- Supports so-called progressive JPEG, in which low-resolution version appears in the preview window before full-loading of the image.
Scope of applications
Used mostly for photos. Not very suitable for images containing transparent areas, fine details or text.
PNG-8
PNG-8 (Portable Network Graphics) - this format is similar to GIF. According to the developer uses superior data compression format, but as the experience shows, this is not always the true.
Features
- Uses 8-bit palette (256 colors) in the image, that is why number eight is in its title. You can also select the number of colors to be saved in the file - from 2 to 256.
- Unlike GIF, doesn't display any form of animation.
Scope of applications
Text, logos, illustrations with sharp edges, images with gradient transparency.
PNG-24
PNG-24 - a similar format to PNG-8, but it uses 24-bit color palette. As JPEG format, keeps brightness and shades of colors of the image. As in GIF and PNG-8 formats, saves details of the image, such as vector drawings, logos and illustrations.
Features
- Uses about 16.7 million colors, that is why this format is used for full-color images.
- Supports multi-level transparency, this allows you to create a smooth transition from the transparent areas of the image to colored, so-called gradient.
- Because the compression algorithm keeps all the pixels in the image unchanged, if compared to other formats, PNG-24 has the largest end-size file.
Scope of applications
Photographs, drawings that contain transparent areas, images with many colors and sharp-edges.
