The purpose of this web site is to help artists and graphic designers make informed and intelligent choices regarding which image file format to use (GIF or JPEG), and how to optimize their graphics specifically for publishing on the World Wide Web. Although there's a lot of information on the Web about image formats, I have yet to find a site which balances theory with practical examples. That is what I have attempted to do here. The goal is simple: To create the fastest-loading image of the most reasonable quality.

It is assumed, or is at least quite helpful, that you have prior working knowledge of graphics design and image manipulation software applications and some familiarity with the GIF and JPEG image file formats. I have tried to limit the scope of this site to discussions and topics that are universal in their application, and are not specific to any particular hardware platform, operating system, image manipulation application or web browser. In addition, I have saved any discussion of HTML for the conclusion of the exercise, where I have included a page with tips and tricks that are quite specific to HTML.

It's very helpful if you can view this site with a true-color or high-color display (15 to 24 bits/pixel, thousands or millions of colors). If you need to reduce your screen resolution to enable more colors, please do so. I've been careful to limit the required screen width to 640 pixels to allow for that. If you have only 256-color display hardware, then your view of the inline images on these pages will be hurt by the same display and browser limitations that I'll discuss later.

If you have no choice but to view in 256 colors, try viewing each image separately in a good-quality external viewer (see "Software Available on the Web" on the Tips and Tricks page). I have set up each example image as a link to a copy of itself, so that just clicking on the image will launch an external viewer if your browser is configured to do that. The difference between your browser's presentation of these inline images and a good standalone viewer's presentation is likely to be stunning. If you don't know how to configure your browser to launch an external viewer, try this.

Rather than transmitting blown-up versions of some of the example images, I have re-sized some images using the height and width attributes of the img tag. If your browser does not support this re-size capability, I will remind you view the image in an external viewer and zoom in when required.

This site was intended to be viewed on a white background. If yours is not white, you may want to change it.

It is also helpful to use a web browser that supports HTML tables, as I have used them to limit text wrapping and organize image placement. If your browser does not support tables, then please re-size your viewing window to a little more than the width of the bar below:

The World Wide Web supports two types of image file formats, JPEG and GIF. First off, we'll learn a bit about these formats. Then we'll learn which type of format to use based on image content and purpose.

For JPEGs, we'll start with a few uncompressed images and subject them to greater and greater compression. We'll see what happens to the images themselves, as well as monitor the effect on filesize. We'll look at the data and the images in side-by-side comparisons, and evaluate of the results of the image compression.

For GIFs, we'll discuss color-depth and its effect on filesize and image quality. We'll use examples and examine file data at each turn. Then, we'll discuss some of the unique features of the GIF format which have become a necessity on the Web, including interlacing, transparency and animation.

Special thanks to Tom Lane, Organizer of the Independent JPEG Group for his help in the creation and tweaking of this Website.

© Douglas E. Gray.

---

You can convert RAW, JPG, GIF images, prepare photos for the web with ReaJPEG - batch photo editing software and raw converter.