Understanding JPEG JPG GIF and PNG for website development

A web developer should have basic understanding of famous image formats to use them wisely during web development. In this article we are going to explore some facts about JPG, GIF and PNG image formats.

Few Basic Points about JPEG/JPG

• JPG can represent 16 million colors. So there is almost no color limit. It is best suited for images with rich color schemes and complex graphics like photographs.
• It is a lossy format. So when its quality decreased to reduce file size for use in web pages, it loses information about image. But usually the information loss is not detectable by human eye.
• It does not provide transparency.
• It is not recommended for simple images like shapes, lines and other simple graphics with crisp edges. As during compression such images have very short information to lose. This affects image sharpness and clarity.

Few Basic Points about GIF

• It can only represent 256 colors. So it is good for solid color images like logos, shapes, lines etc.
• It is a lossless format and does not lose information about the image while compression. So it is recommended for simple and solid color images as it preserves sharpness and clarity in them.
• It provides transparency. So image background can be left transparent for underlying contents to be viewed.
• It supports animations.

Introduction to PNG

PNG was basically designed to replace GIF with a lossless, portable, well compressed and most importantly patent free format. PNG has some really good advantages of GIF. Let’s explore PNG first.

PNG Features

1.Alpha Channel

Alpha channel allows variable transparency. This is really help full for transparent images with blending or smooth edges, because they can easily mix up with any background they are placed over.

2.Gamma Correction

Gamma corrections allows cross platform control of image brightness. This really helps in making images look same in various platforms. But gamma correction has minor differences.

Although it is a really great feature but on different platforms minor differences in brightness create problems for web developers as they want to precisely match image color with web page hexadecimal color.

The solution is to remove gamma correction information from PNG image. One can use tweakPNG application for this purpose.

3.Two dimensional Interlacing

Interlacing is the method of smoothly and progressively displaying images over the low speed internet connection. PNG use two dimensional interlacing which makes it really cool image format for low bandwidth internet users.

From web developers point of view interlacing adds little extra size in PNG but benefit of displaying images much easily over the low speed connections outweighs the cost of little extra size.

4.Compression:

PNG compression is fully lossless and 5% to 25% better than GIF compression. This is a big reason for end users to demand PNG instead of GIF.

PNG Vs GIF

• GIF offers binary transparency so a pixel could only be fully opaque or fully transparent. But PNG offers variable transparency as it stores RGBA (Red, Green, Blue and Alpha) information for every pixel. So PNG transparent images can have blending edges (shadows or feather effects).
• GIF does not provide gamma correction while PNG is good at it.
• GIF provides very poor interlacing on the other hand PNG provides really cool two dimensional interlacing.
• GIF support 256 colors but PNG support millions of colors.
• PNG has better compression than GIF that makes it easy to download. So it is a big advantage from a web developer point of view.

When to Use PNG

• PNG is the right choice for web images with transparent background and smooth or blending edges (shadows or feather effects).
• PNG is also the right choice for high quality print graphics.

What PNG is Not for

• PNG is not a vector graphic.
• PNG is not to replace JPG. There are certain places on web page where JPG is better choice than PNG because JPG is a lossy format and some time little loss of information is required to reduce image file size for faster download.

How You Use images

So, share with us your experience and strategy of using different image formats in your web development.

image by catklein