Optimize image for website

Image optimization for website is most important because, a well optimized image load faster and offer your reader a more user friendly interface. Professional  web designers are well aware of the importance of image optimization and the consequences of un-optimized high quality images. The image optimization  becomes  indispensible when a webmaster  use a large number of high quality images in his web projects. Three image compression namely PNG,JPEG and GIF are highly used in web so, to learn at least basics is not a bad idea for web master. If you are a webmaster take care about it!

1) JPEG:

     JPEG:

JPEG(Joint photographic experts group) format  is the popular and most used compression method for digital photography images. It store the images in .jpg file format,and it is the lossy compression i.e you will not get the exact image when you decompress the compressed data.In JPEG image compression you can reduce the file size(image quality) by making high compression or according to your need.

JPEG and compression: Image quality and file size is varying with compression negatively i.e when we apply high compression the image quality becomes low alongwith file size.

Where to Use JPEG:

• Use JPEG for photograph Images with millions of color (depth) intensity and also for natural (real world) colors.
• Use JPEG for (art work) drawings and color gradient images.
• Use JPEG for games and sports screen shorts etc.

2) PNG:

PNG(Portable Network Graphics) is the open source free advanced shape of GIF and has the bitmapped format with lossless compression i.e you will get the same image quality when you decompress the compress data.PNG supports 8-bit platted images and 24-bit truecolor .It store the images in .png extension.

Difference between PNG-8 and PNG-24:

 PNG-8 supports 8-bit colors and PNG-24 supports 24-bit colors in other words PNG-8 is compatible with maximum of 256 colors while PNG-24 is compatible with 16 million colors. PNG-8 is best for small graphics with less colors and PNG-24 is best for detailed graphics with greater colors depth.

There is file size differences between PNG-8 and PNG-24 of the same image.Png-24 is greater in file size compared to PNG-8.

Where to use The PNG file format in web:

• PNG preserve transparent effects if your image has rounded corner and has transparent background then kindly save image in PNG file format.
• Use PNG for simple text, line drawings (geometric shapes), smart arts, shapes and lettering.
• Use PNG for general web graphics i.e for logos, header and footer in your website design etc.
• Use PNG in place of GIF format when it is not animated, because PNG does not support animation effects in images.
• Images with solid colors should also be save in .png extension.

3) GIF:

GIF (Graphic Interchange Format) uses lossless compression and is a bitmap format made by the grid of tiny pixel squares.GIF is limited to only 8-bit palette. you can save image up to 256 colors in GIF file format.GIF format is compatible with image animation effects in web so you can use GIF for animated photos in your project. It stores the image in .gif extension and has best browser support .

Below is the transparent Gif image.

Where to use GIF format in web:

• GIF format is best for images with animation effects so, use GIF for animated photos.
  
• Save low color quality images in GIF file compression as GIF has lower color intensity (256 colors).
• Use GIF format for simple diagrams, shapes and cartoon images etc in web.

General note on how to optimize images and ready for web projects:

Below is the general note on how to optimize image to load fast.

1) Crop image:

Use crop tool to crop the relevant image area and destroy irrelevant area.This will reduce the file size and image will load fast.

2) Best file format:

 Choose the best image file format that suite to your needs (as mentioned above) without the loss of (acceptability) clearity of your topic you are going to discuss with your readers.

3) CSS image styling:

 It is better to style image with CSS (cascading style sheet) i.e to make border and shadow etc in place of image editors to style image .The benefit to style image with CSS is fast loading of your image.

4) Make use of little stripes:

 Use little stripes in place of images (if possible) for website backgrounds(and other purposes), because they are smaller in size and load fast compared to a big image.

You can make stripes according to your taste with online stripe genrators.Below is the list of top stripe genrators for websites.

• Stripe Genrator 2.0
• Stripemania
• stripedbgs

5) Online and offline image editor:

 Online (as well as offline) image optimization tool is very important to resize, crop, set contrast  ,brightness and border for you image.

Top online image editor:

• Adobe photoshop express
• Pixlr
• Sumopaint

Top offline image editor:

• Photoshop
• GIMP
• Paint.net

6) Choose best image:

 Always choose best (comprehensive) images that define your topic and improve readers understanding (don’t use excess images when a single or fewer images perform their function well about your topic).