Images And The Web  -  April 18, 2008

When it come to websites there are 3 different file types that rule the roost. Gif, Jpg and PNG. they all have their place but when should we use them?

Jpg

Jpg or Jpeg which is its correct name were developed for the use of photographs, a jpeg can handle the thousands of different colors. A jpeg can besaved with different levels of compressionwhich obviousy means different qualities. If you save with 0% comression then you will have a perfect image but it will have a large file size. At the other end of the scale you can have a file saved at 99% compression but the image will be blured and blocky. There is however a perfect medium between quality and file size and this is 60% compression.

Downside to the Jpeg is that it cant be animated and it does not support transparency, also it is not a good fily type to choose if you have large blocks of the same color in an image as the edges will becpome blured. However this was developed for photographs.

Gif

Gifs have been used on the web for a long time. they can be saved using different amounts of colour from 8-bit color to 256-bit color. Gifs are a lossless file type which means they quality of the image does not degrade every time it is opened and saved. Because of the way a gif compresses the image it can create small file types which is ideal for the web. Gifs can also be interlaced so it can speed up the rate a webpage loads. this works by placing a poor quality version of the image to start of with and then progressivly improves the image untill it is full quality.

Finaly gifs can be animated, this means in the past (before flash) people had really annoying images that changed colors and spun arround! (thank god there not popular now!). Animated gif can however be used in a nice design, maybee in a banner that rotaes diferent messages.

PNG

Compared to Jpg and gif’s png’s are relativly new, It was invented when there was a taxation placed on gifs. png’s are very similar to gifs in the way they opereate. they are not animated but the 8bit version of the has simple transparency like the gif (on or off). Because a png 8 can compress better it can often make smaller file sizes than the Gif and the png is also lossless.

PNG 24 is more similar to a jpg quality, its not good enough to replace a jpeg but again being lossless it is a good file format for saving larger pictures.

The PNG 24 also handles multi level transparency, this means that you can set the transparancy on areas of a image on a scale so you can place a gradient of transparency or different levels of transparency. The only down side to this is that the way Png’s handle this means they do not work in IE6 or below. They do however work in firefox and IE7 but with al lot of people still using the old IE6 browser your work may not look correct or give the desired effect.

Gary
Web Designer

Gary at 5:03 pm

No Comments

No comments yet.

Leave a comment