Tuesday 8 January 2013

How to optimize image for the website. Which format to prefer GIF, JPEG or PNG and why?

Image Optimization:

First lets understand what is image optimization. Image is saved in certain format such as GIF and JPG and while saving, amount of quality is selected as per the requirement. More quality means more clear and bigger file size.

Hence we select less in quality as much is possible, till we can see the image is clear and not loosing proper visibility. So this way we optimize the image. In other words lesser the file size more better image is optimized, but also the image should not loose its clarity.

Benefit of Image Optimization:

By optimizing we create smaller file size as much as small it is possible. If the image file size is less it takes lesser time to load on the website.

When to select GIF, JPEG or PNG:

GIF: When the image is having more flat colors, we should select GIF.
JPEG: If image is having multiple colors, blended colors we should select JPEG.
PNG: PNG is selected mostly when we have transparency image.

But you can select any format as per the requirement also by checking whose output is lesser in file size.

How to create web optimized image:

In Photoshop create any object or just take any image. Now go to main menu File > Save for Web & devices Now under this select the format GIF, JPEG or PNG (which ever format you need) > and press save option. And its done.    

Formate Options:
For GIF: Select no. of colors, you will see more colors means more quality. While selecting you can also see the image file size on left hand side below the image. 

For JPEG: Select Option "Quality" (0-100) higher the no. means more image quality. Same way you can check the file size on the left hand side below the image. 

For PNG: I suggest select the PNG format only when using the transparent image. And if you want PNG without the transparency then simply De-select the option Transparency.

No comments:

Post a Comment