Decorative images should be inserted via CSS, while informative images should be inserted via HTML. Put your css images in a separate directory.
The lossless compression format it uses is best suited to large areas of flat color. Solid color illustration, type, and large swatches of a single color are best saved as GIF files.
The color depth supports no more than 256 colors in one image, which limits its use to compressing images that contain few colors. But images with fewer than 256 colors may be saved with a smaller color index, thereby decreasing the eventual file size. An image with many colors may be saved as a GIF, at the expense of losing color information.
GIF offers 1-bit transparency, which means that pixels may be fully transparent or fully opaque; there is no in-between. This is limiting if you're used to working with layers and their full range of alpha transparency in an image-editing program. Additionally, GIF supports simple frame-based animation and a staggered loading technique called interlacing, both of which increase file size.
24-bit color depth, JPEG is well-suited for photographs and other colorful, detailed imagery. JPEG allows you to apply lossy compression to sacrifice minimal detail and color information for the sake of smaller file sizes.
Heavily compressed JPEG images suffer from highly visible distortion and small unsightly pixel defects called artifacts.
JPEG offers no transparency at all, but progressive JPEGs that function similarly to interlaced GIF files are supported in most browsers.
PNG offers two modes of color storage. PNG files that have a 24-bit color depth are almost too large, but they are completely lossless. Files that have an 8-bit color (256 colors) depth use a color index much like that of GIF, and in many cases the compression used by PNG will create smaller files than those created with an equivalent GIF setting.
Two modes of transparency are also available, 1 bit and 8 bit. The former is equivalent to GIF's transparency, while the latter is full 256-level alpha transparency.
Optimizing a GIF means previewing at low color levels and working your way up until it looks reasonable. By starting a preview at 8 colors, then checking in 16, 32, 64, and so on, you get a sense of how few colors you can get away with. Some images require 256 colors (or more, which is when you need to consider using a JPEG instead), while others look almost indistinguishable from their full-color counterparts with only 8 or 16 colors.
Optimizing a JPEG is a much more straightforward matter. A slider with different quality levels should be present in your image editor when saving an image as a JPEG. Higher quality means larger file sizes; lower quality means smaller file sizes. Start with a low-quality setting, and gradually adjust it higher until the image looks acceptable.
Optimizing an 8-bit PNG is mostly identical to doing the same for a GIF; you are able to select color levels and dithering. Optimizing a 24-bit PNG is a simple matter: You CAN'T. The only compression a full-color PNG offers is the compression built into the file format.