We mostly use .jpg,.gif, .png image format for web site design. Uses and importants of each image format are classified below

JPG :

It is use for background image and product’s image, personal or member’s photo. In the case of transparent image we will not use jpg format. Only for those background which must be in last layer of site. All the image quality must be 80%

PNG :

It is use for transparent image or transparent background. For example log of site, transparent image of products, According to the importance we have to set quality of png format in 8 bit and 24 bit
Now let’s go on detail about png-8 and png-24 images. Please look below a couple images.

png82
png241

Above image is quite nice in IE7 and later version / FF/ Opera and Safari but it can not shown clearly in IE6.

Now you got it what is the difference between these png – 8 and png – 24 image quality ? According to these images in png-8 Original Quality flower’s border have some distrubance while png-24 Original Quality is so smooth. Here I have used “original quality” word it means that image create throug graphich software such as Photoshop in the format of png on original quality. There are so many basically 4 quality according to photoshop. Ex : Original, Optimized, 2 – Up, 3 – Up,

You many rise one question more that how to make image in png format. Basically I use photoshop software to export (create ) image. Personally I would like to suggest you not to use png-8 quality , use png-24 quality because it support more alpha color range whereas png-8 could not do so far. Here I would like to notice that IE6 browser does not support directly for transparent png-24. Look the sample transparent images below. This yellow flower image is transparent image. It looks nice in most browser except IE6. To support transparent image we need to write tiny css filter code for IE6.
makepng

Click on File > Save for Web then after below screen will display. I have cut off small portion at this moment.


Now choose Original Tab Option and save it .

GIF:

It is use gif format image on animated image. Do not use this image format in web page desiging. Because of poor quality than png and greater file size than jpg format.

Advertisements