What you need to know to use images on web pages: 

 Web browsers recognise three types of images, or "image formats": 
    GIF, JPG, and PNG (extensions .gif, .jpg, and .png).
Browsers do not know how to display 
    Photoshop images (.psd, etc.), Illustrator (.ai), Windows bitmaps (.bmp) ... or anything else. 

All three formats are good and useful! 
They have different uses, here is how we choose:

The GIF Format ("gif")
Images with large areas of flat color (not shading)
    - Can do animations.
    - Transparency
    - Interlacing
    - maximum of 256 colors.
        (so, not good for photographcs, which have shading and millions of colors)
    - Compression: very good compression (LZW scheme)

The JPEG Format ("jay-peg")
Photographic images, and images which need more than 256 colors. 
    - No animations..
    - No transparency.
    - Progressive  (same idea as GIF interlacing)
    - Supports 16.7 million colors, 
    - Compression: not as good as GIF (The internal compression algorithm of the JPEG format, 
       unlike the GIF format, actually throws out information. 
       Depending on what settings you use, the thrown out data may or may not be visible to the eye. 
       Once you lower the quality of an image, and save it, the extra data cannot be regained 
       so *be sure to save the original.*
    
The PNG format  ("ping")
Almost everything!  PNG combines the features of GIF and JPG.
    - No animations.
    - Transparency
    - Interlacing
    - Greater depth of color, catering to images up to 24 bit in color.
    - Compression - good.
    - Also, it was developed to  be a "free" format, with no patent licenses 
        as are associated with other formats. 

----------------------------

When to use GIF, JPG, PNG

Use GIF (or PNG) for logos, line drawings and icons. 
Don't use GIF for photographic images, and graphics which have long stretches of 
continuous-tone in them -- they won't look good!
When you're designing and image for GIF, don't use gradients, and turn off anti-aliasing 
where possible to minimize the file size.

Use JPG especially for photos.

Use PNG for designs with shading and complex detail.
Also use PNG for logos, line drawings, and icons.

--------------------------------

What is Transparency? (GIF, PNG)

With GIF and JPG, you can make the background of the image transparent. 
This means that if you place a transparent GIF in a yellow table cell, the background color of that image will turn yellow.  

What is Interlacing (GIF)? What is Progressive (JPG, PNG)?

    A low-quality image displays first, and over several passes the quality improves.
    This creates the illusion of faster-loading graphics, because the site visitor can at
    least see *'something* while the rest of the image is loading. At first it will be fuzzy and blurry, 
    but as more information from the file is downloaded from the server, the image becomes 
    more and more defined until the entire image has been downloaded. 
    Some graphic editing tools allow you to specify the number of passes before the image downloads completely.
    Interlaced files will usually be a bit larger than non-interlaced ones, so use interlacing 
    only when it makes sense.

--------------------------------

These are the things to know to *use* images on web pages. 
To *make* the images, is a whole other set of things to learn -- 
and a whole other full-time job!


 Know more at:
    http://articles.sitepoint.com/article/gif-jpg-png-whats-difference
    http://www.sitepoint.com/blogs/2009/08/03/gif-png-jpg-which-one-to-use/


--0--