When to Use JPEG or GIF Format for Your Web Images and PNG Too

There are Reasons to Use Each Format

GIF Images

Use GIF files for images that have a small number of colors. GIF files are always reduced to no more than 256 unique colors. The compression algorithm for GIF files is less complex than for JPEG files, but when used on flat color images and text it produces very small file sizes.

The GIF format is not suitable for photographic images or images with gradient colors. Because the GIF format has a limited number of colors, gradients and photographs will end up with banding and pixelation when saved as a GIF file.

JPEG Images

Use JPEG images for photographs and other images that have millions of colors. It uses a complex compression algorithm that allows you to create smaller graphics by losing some of the quality of the image. This is called a "lossy" compression because some of the image information is lost when the image is compressed.

The JPEG format is not suited to images with text, large blocks of solid color, and simple shapes with crisp edges. This is because when the image is compressed the text, color, or lines may blur resulting in an image that is not as sharp as it would be saved in another format.

PNG Images

The PNG format was developed as a replacement for the GIF format when it appeared that GIF images would be subject to a royalty fee. PNG graphics have a better compression rate than GIF images which result in smaller images than the same file saved as a GIF. PNG files offer alpha transparency as well as animation.

PNG images, like GIFs, are not well suited to photographs. It is possible to get around the banding issue that affects photographs saved as GIF files using true colors, but this can result in very large images. The other problem with PNG is that its special features are not well supported by Internet Explorer.

Like HTML, CSS is standardized by the W3 consortium. CSS is an open, independent and freely usable standard. As with HTML, a working group exists for CSS who concerns itself with development of the standard. This is being done in accordance with W3C rules.
CSS comes in different versions. CSS level 1 was released in 1996, and republished with corections in 1999. CSS level 2 appeared in 1998 and built on CSS level 1. CSS level 2 adds support for different output media. CSS 3 is currently in development and will be split up in modules.
The idea behind it was to seperate presentation and content of a web site. The advantage of this approach is that updates and changes to the presentation need only be applied once (to the stylesheet) to affect all pages. Especially large sites can achieve significant time savings. In order to enforce this separation of concerns, the W3C has deprecated the font tag in HTML 4. Newer (X)HTML versions will deprecate other tags in a similar vein.
CSS stylesheets are an immediate addition to HTML. CSS is a language to define format properties of HTML or XML tags. HTML has reached the end of it's shelf life and is not being developed further. XHTML is the new standard instead. XHTML reformulates HTML with XML syntax while at the same time getting rid of presentational markup. XHTML only contains content, presentation is the domain of a CSS stylesheet. This allows for different stylesheets for different output formats such as print, aural or small devices. Search machines on the other hand have an easier job if they are only presented with content markup.
New functionality in CSS2CSS2 retains backward compatibility with CSS1 which means valid CSS1 stylesheets continue to work without changes. CSS2 adds support for different media types. Different stylesheets can target media such as printers, TVs, screen readers and so on. Furthermore, there is the addition of pseudo classes and a few new styling elements for tables, text, colors and positioning.
CSS is supported, to different degrees, by all browsers starting with version 4. Unfortunately, all browsers have implementation bugs, and no browser supports the full CSS2 specification yet. Many browsers allow you to override the provided stylesheet with your own.