Building

Graphics

Figure 1.1

Picture of a Parrot in Original JPEG, JPEG, and GIF file formats

Figure 1.2

Picture of a Parrot in High/Med/Low Quality JPEG file formats

Choosing the format and quality of an image is often a compromise with file size and download time. Certain uses of images may have special requirements which do not fall within the scope of the following guidelines.

Image Format

GIF

Graphics Interchange Format is a standard image format on the web, which is supported by all current web browsers. GIF uses lossless compression of bit-mapped images, meaning that there is no loss of resolution, color, or any other image data in the compression process.

To create a GIF image, you can use standard graphics programs or scanner programs which allow you to save images in GIF format.

GIF supports 8- and 24-bit pixel depths. This refers to the number of different colors which can be differentiated in an image. GIF image format is best used when an image is non-photo graphic in nature and/or the image has large areas or blocks of solid colors. GIF is also best used when a component of an image must match a background on a webpage. See the Web Design Group's article: Image Use on the Web for more details on the technical application of GIF images.

Additional resources on image formats for the Web:

http://www.image-formats.com/

http://www.yourhtmlsource.com/images/fileformats.html

JPEG

Joint Photograph Experts Group format is a format designed for reproducing photo images. It may merge hues which cannot be differentiated by the human eye, resulting in a higher compression ratio (i.e., smaller file size). This results in a trade-off between file size and quality. JPEG supports a range of picture qualities. Choose a quality which results in a reasonable file size without compromising image information.

JPEG is best used for photographic style images that do not require matching with backgrounds.
Image Size

PNG

Portions of this content was retrieved from the Portable Network Graphics site.

Figure 2.1

PNG and GIF Transparency

The Portable Network Graphics (PNG) format was designed to replace the older and simpler GIF format. There are two types of PNG formats: PNG-8 and PNG-24. (The number refers to 8-bit or 24-bit color.) Here is a description of each:

PNG-8

The PNG-8 format supports up to 256 colors. Since it works very similarly to GIF, it makes a good replacement for it. It is useful for line art, logos, and type; it is not such a good format for photos or smooth color transitions.

PNG-8, like GIF, uses a lossless compression method. In general, a graphic compressed with PNG-8 will be 10-30% smaller than the same graphic saved as a GIF. However, GIFs can be smaller with very simple images.

PNG-8 supports about the same quality level of background transparency and background matting as GIF. Since PNG-8 files are better at compressing line art, it's better not to use PNG-8 when optimizing a file with a drop shadow. Figure 2.1 shows how similar GIF and PNG-8 files save transparency among overlapping shapes.

PNG-24

The PNG-24 format supports up to 16 million colors. Like the JPG format, PNG-24 is able to preserve subtle variations in color and smooth gradients, so it is excellent for photographs. In addition, like GIF and PNG-8, it saves sharp detail, and so it also lends itself to line art, logos, and illustrations with type.

PNG-24 uses the same lossless compression as PNG-8. Unfortunately, PNG-24 files are usually significantly bigger than their JPG equivalents.

Like PNG-8, PNG-24 supports background transparency and matting. The format also has the ability to do multi-level transparency, saving up to 256 levels of transparency to blend the edges of an image smoothly with any background color. The two overlapping spheres with the drop shadows in Figure 2.1 show how smoothly the PNG-24 format can optimize transparency levels.

Image Size

Image size is typically measured in pixels, which is a measurement of picture elements on a computer monitor. Standard pixel resolution for images is 72 DPI (dots per inch), however, with the increasing size of computer monitors some designer/developers are using 96 DPI.

Figure 1.1
Comparison of JPEG and GIF image formats

Figure 1.2
Comparison of different levels of JPG compression

Page Loading

The number and file-size of the images on your Web page will have a big effect on how long a document takes to load. What follows are the steps you would take to calculate the time for your computer to download a page from the web.

  1. Check the size of your HTML page, associated images, and any other files related to the page. To find the file size you can right click on the file and check its properties. Total up the file sizes and use this as the total file size to download.
  2. Determine the speed of your network connection. Modem speed can range from 14.4 Kbps (kilobits per seconds) to 56 Kbps. DSL or Cable Internet access can range from 128 Kbps to 1.5 Mbps (million bits per second). T1, enterprise grade network lines are typically 1.544 Mbps.
  3. With the file size and the connection speed, we now need to convert the measurements into a common unit. In our example, we will use a file size of 84 kb (kilobytes) and a 56 kbps connection speed. We will be converting both units into bits. For file size, we will first convert it to bytes ( 84 kilobytes = 84,000 bytes ). Then we will convert the bytes into bits by multiplying the number of bytes by 8 (84,000 x 8 = 672,000 bits). Now to convert the connection speed to bits. We take the 56 kbps and convert it to bits (56 kilobits = 56,000 bits). Now we have a 672,000 bits file with a 56,000 bits connection. Note: most 56K modems connect at around 48 kbps to 52 kbps due in part to telephone line quality issues. Also, because modem transmissions use extra databits to make the download process happen, the real data throughput rate is slower than the actual connection speed.
  4. Take the file size and divide it by the speed to find the time it takes to download. 672,000 divided by 56,000 bits is 12 seconds.

Take into account that this is the optimum time it takes for your Internet connection to download a file (HTML page, image, etc…). There are numerous factors that can slow the load time. Your computer speed, type of web browser, operating system, and server speed are just some of the lags (delays) that can be experienced. Therefore the best way to determine how quickly users can download your web site pages, is to test them in a real-world setting. Test your web site using a slow/fast modem, DSL , cable, and T1. This will give a more reliable estimate.

Note: Most Web authoring tools provide methods for estimating the download time of a page.

http://www.masternewmedia.org/2002/02/28/how_to_calculate_and_speedup.htm

File Size

To minimize download time, keep image file-sizes as small as possible. Use tools such as Photoshop or Fireworks to create the smallest file-size possible for images while maintaining the desired image quality. Use these rules of thumb:

  • For display images try to keep file-size below 50 K (30 K or less is more desirable)
  • For buttons and navigation pieces try to keep each file-size to below 1 K to 2 K.
  • For design artwork (layout imagery for Web site design), try to keep each image below 2 K to 8 K

Therefore, choose the image format and quality that meet your image quality requirements without producing overly large files that take a long time to download.