Home / Articles / Programming languages / Markup languages / HTML & CSS / Graphics formats in HTML

Graphics formats in HTML

Graphics formats in HTML
 
Graphics formats in HTML
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (1 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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.


 

Read also

Image size in HTML

Image size in HTML

Inserting images in HTML

Inserting images in HTML

Aligning images in HTML

Aligning images in HTML

Image map in HTML

Image map in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation