Aug 06

Saving images for web: GIF, JPG or PNG?

intro imgIf you want your portfolio to load fast, you have to reduce the file size of your images as much as possible (in terms of bytes) by saving your images for web.

There are three formats used in the internet GIF, JPG and PNG, but what does it mean and when do you use what?

  • GIF stands for Graphics Interchange Format.

This format is used to display indexed-color graphics and images. Indexed color means that it will only display a maximum of 256 colors. For this reason, GIF is NOT a good format for saving photographic type images with many colors.

GIF is good for saving images with flat blocks of color such as logos or simple illustrations. Another very important feature of GIF images is that is allows you to preserve transparency, this comes in handy for saving logos that do not have a background.

  • JPG stands for Joint Photographic Experts Group

JPG is used to display photographs and other continuous-tone images on the web. JPEG format supports CMYK, RGB (millions of colors), and Grayscale color modes. Unlike GIF format, JPEG retains all color information in an RGB image but compresses file size by selectively discarding data. This is known as lossy compression, and can result in a loss of quality if a high level of compression is applied.

In most image editing programs you can specify how much compression/loss of quality you want. Generally, if you choose the maximum quality option, your image will be indistinguishable from your original photograph. However, you can also save your files with lower quality settings that still produces a reasonably good image (or at least good enough for the web) image. Another important difference between GIF and JPG, is that JPG does not preserve transparency.

  • PNG stands for Portable Network Graphics

PNG is a little bit like the best of both worlds. It was developed based on GIF, for lossless compression and for display of images on the web. Unlike GIF, PNG supports 24‑bit images and produces background transparency without jagged edges; however, some older web browsers (i.e. Internet Explorer 6) do not support PNG images. Luckily the percentage of people using those browsers is negligible these days. PNG format supports RGB, Indexed Color, Grayscale, and Bitmap mode images. PNG like GIF also preserves transparency in grayscale and RGB images.

  1. freshli posted this