1. GIF Format

   It  is the most  appropriate export format for graphics with large areas of solid colors. Digital artwork using a narrow palette of  colors (up to 256)    will deliver crisp and a small file size when  exported as a GIF.

   The GIF format is also a good choice to make certain colors transparent in the exported image:  index transparency. That comes handy when you need  transparent edges around your image. You will be then able to blend that exported image with any web page area no matter what background color is used.

   Your only choice is a GIF format to create  animated graphics such as banners (animated gif) unless you use a Flash movie:   JPEG and  PNG do no supports a such animations. You would have to either keep the number of animation frames to a minimum and reduce the dimensions (width and height) to lower the file size of your “animated gif”.

2. JPEG Format

   This format is more appropriate for images with lot of details and photos requiring millions of colors. The JPEG format is also the best option for  computer graphics with gradients of colors or  artworks using shadows, bevel, feather and other digital effects.

   Images  exported in a JPEG format are usually crisp when exported with a compression between 60 and 80%.  That  gives you enough wiggle room to find a balance between quality and file size.

3. PNG Format

   The PNG format comes in three flavors: PNG8, PNG24 and PNG32. This format lays somewhere between the GIF and JPEG formats. PNG is a lossless compression, uses virtually unlimited palette of colors and offers both index and alpha transparency.
   Let’s explore what each subset of this format has to offer.

   • The PNG8 is  quite similar to the gif format in terms of quality and size of the exported file. It offers index transparency as well as alpha transparency
   • PNG24 is better suited when your graphic is a mixture of lots solid colors and gradients. In a nutshell, the png24 format lays between the gif and jpeg formats.  It produces crisper images with a smaller file size than the GIF format.  However the PNG24 does not offer index or alpha transparency.
   • The PNG32 option is currently not available in Photoshop. You will have to use Adobe Fireworks to take advantage of  the full alpha transparency offered by the PNG32 format.
   • The only drawback of  PNG images is they are not well supported by Internet Explorer 6: you will have to resort to a CSS hack using Microsoft’s filters.

• Although the GIF format offers a palette of 256 colors, my personal experience taught me to use the GIF format only when no more than 32 colors are needed to keep the exported image sharp. For images requiring more colors, you are better off using the other file formats.
• If the image you are dealing with needs more colors than the GIF format can handle and no transparency is required then JPEG is your best bet.
• There is no real gain in choosing the PNG format at this point unless you are using the PNG32 to take advantage of alpha transparency you cannot get with GIF or JPEG format.

In the end there are really no hard rules in choosing the right file format to export your image in. As you just learned, the best suited file format depends on the current context: the graphic you are working on.

To add a background color that covers the entire web browser’s viewport,  set a background  property to the HTML body tag:
body {
background-color: #333333 ;
}
That create dark grey background color (#333333).
Applying a background color to the body tag  add more contrast between  your web page content and the remainder of the screen particularly with fixed width CSS layouts.  In general, using a CSS background color is the easiest way to “colorize” a given block of content without adding much to your web page download time.

You can also add a background image to your web page body using the CSS style.
body {
background-image: url(images/bgbody.gif) ;
}
The url parameter defines the relative path to the graphic used as a background image.
That file’s path can be absolute (i.e. http://livetrainingsession.com/images/bgbody.gif  or /images/bgbody.gif) or relative to the location the CSS style as show above.
Feel free to copy and paste that absolute path nto your web browser’s address bar to see the actual background image.

In this instance the web page uses a very small graphic made of dark-grey patterns. You can see that tiling bleeding through the left and right edges of this web page if your display width is greater than 980 pixels.

You can  simultaneously apply the background color and the background image to the body tag as well. You would write the CSS style as follow:
body {
background-color: #333333 ;
background-image: url(images/bgbody.gif) ;
}

or use a more compact,  shorthand version:
body {
background: #333333  url(images/bgbody.gif) ;
}

or even more compact:
body {
background: #333  url(images/bgbody.gif) ;
}

In this example, the background color is written in its compact form (#333). An hexadecimal value  made of three pairs of identical values (33) can be replaced by just three values (333), one for each pair. Hence “#999999″ could be replace by “#999″ and the color “#FFFFFF” can be written “#FFF”.

It’s always a good idea to use a background color in conjunction with a background image. The web browser covers the “viewport” with the background color while downloading the background graphic. It’s not only for aesthetic but to avoid the visitor having to stare an empty white screen while the web page is loading.

It’s worth mentioning the background image is always displayed on top of the background color whenever the two are applied to the same HTML element. And it does not matter in which order they are defined.