Understanding Image formats

“A picture can say thousand words”

Adding images makes your webpage more informative. Just a glance at image can tell the user what page is all about.

In this post we are going to understand different kinds of images formats that can be used in web pages.

Images include photographs, logos, clip art and any other visual object. Following image formats are supported in the modern browsers:
  • JPEG
  • GIF
  • PNG

    JPEG
  • JPEG stands for joint photographic expert group.
  • It supports 24-bit color allowing millions of color.
  • JPEG should be used only for photos and graphics that has many colors and details.
  • For solid color JPEG should not be used as it results in larger overall size. So hampers the speed of download. And this leads to poor SEO.
  • .jpg extension is used by JPEG images.

    GIF
  • GIF stands for Graphics Interchange Format
  • It supports up to 256 colors.
  • The GIF format is more commonly used for simple images, such as logos and graphics containing basic shapes and lines.
  • If your image or graphic contains few colors and not a lot of detail, GIF is a good file format choice.
  • A single GIF file can also store multiple images and display them as an animation.
  • GIF images use a .gif file name extension.

    PNG
  •  PNG stands for Portable Network Graphics
  • This format offers rich color support and advanced compression schemes, so it is a good choice for a variety of image types.
  • Like JPEG, PNG supports 24-bit color, but it can also be saved with fewer colors, similar to GIF.
  • As PNG is a relatively new file format, use it if your intended audience most likely has up-to-date browsers.
  • PNG images use a .png file name extension.

Downloading considerations

  • Browser has to download the images before it can display it to the user. So if it takes longer time to download it may lead to poor user experience.
  • Particularly if internet connection is slow, it can take much longer time to download images.
  • So use images wisely. Filling the entire page with images can lead to longer download times and sometime images just don’t download and blank space is seen there, resulting in poor appearance.
  • Also images can not be seen by bots and crawlers so this is yet another problem.

Optimizing images

  • This is actually about comprising between quality and download time.
  • If we use rich images with several colors like JPEG it leads to larger size so should be avoided.
  • Using PNG or GIF one can reduce the colors and thus the file size.
  • One can also use image editing program to edit images.

In next post we are going to understand what different options are available to us to edit images.

No comments:

Post a Comment