Images in Web pages are generally either photographic or simply "graphic":
Regardless of the kind of image usage, the goal is to produce the best quality image in the smallest file size possible. Overly large image files are the primary cause of slow-loading Web pages (and the resulting reduction in number of site visitors).
There are three image file types supported by modern browsers and each has advantages and disadvantages:
All three of these formats are in widespread use.
Images that allow transparency greatly expand creative options for Web designers by allowing background elements to show through the image.
Both GIF and PNG allow transparency. JPEG does not. The images below illustrate the differences in how the image formats handle transparency. If you click the gray or red radio button, you'll see that GIF only allows a single color (white in these examples) to be transparent. Any colors other than white, such as the subtle range of grays in the drop shadow or anti-aliasing around the S, maintain full opacity. In contrast, PNG allows transparency throughout its color range so images with feathered edges can anti-alias smoothly over any background.
![]() JPEG ![]() GIF ![]() PNG ![]() JPEG ![]() GIF ![]() PNG |
Photographs present special problems for Web designers because they contain a great deal of information which leads to very large file sizes. File sizes are a concern on the Web because they affect how long pages take to load into the browser.
The amount of compression in a JPEG is weighed against the reduction in quality that results. Image software usually presents the compression level on a sliding scale and indicates the resulting file size as is this example from Photoshop:
Since JPEG compression is lossy (meaning actual image data is lost in the compression process), over-compressed JPEGS have what are called "JPEG artifacts." These are blotchy-looking areas of pixilation that reduce photographic clarity and tonal smoothness.