Working with Images
Working with Images
If the average Web user was asked to describe the World Wide Web, he might say "pictures and things on the Internet." Only people introduced to the online world before early 1995 were very familiar with the Net as a text-based medium. Desktop publishing was a major new activity and found many non-artists manipulating digital images for the first time.
Beyond the graphical skills gained in the DTP environment, digital imaging for the Web brings new concerns and constraints. The number of image formats supported by Web browsers is significantly smaller than the number you can work with in MS Publisher, or Framemaker. Additionally, the resolution and color depth available on a computer monitor change the way we see those images compared to the output you'd find in print media.
This chapter teaches you:
- What image formats work online
- Which format works best with what type of graphic
- How to incorporate images into your Web page
- How to create links using images
- How to draw hot spots on images for an interactive map
Image Formats for the Web
For many years only two image formats were supported by Web browsers: GIF and JPEG. Today, a third option, known as PNG, has been added. Each format has its own strengths and weaknesses, which we'll review here, and then we'll take a quick tour of several popular image-editing tools.
GIF Images
The most common format used for non-photographic images is GIF (Graphics Interchange Format). GIF is a bit-map image format, meaning that the image is "mapped" pixel by pixel. The information in the bit-map can be compressed when neighboring pixels have the same color values, using what's essentially a form of digital shorthand. This allows the resulting image file to be considerably smaller when stored, saving space on the Web server and bandwidth when the image is delivered to the site visitor.
GIF images do have some limitations, the most notable being the maximum of 256 unique colors within the image. Thankfully, this 256-color palette is not a static set of colors, but might be any 256 colors that work best within the image. This limited, though flexible, palette makes GIF the ideal candidate for graphics with large blocks of color, as often seen in logos, buttons, and banners.
Controversy over the GIF format arose in the early days of the Web, when the company that owned the patent on the LZW compression algorithm used in GIF asserted that it was owed significant licensing rights from any software publisher that produced tools that could publish GIF images. The end creator of an image generally doesn't owe any licensing fees, but in part because of the furor over this issue, the W3C began working on an open-source (royalty-free) image format known as PNG (Portable Network Graphics). Support for this image format is increasing, but PNG isn't nearly as universally supported as GIF.
NOTE
To learn more about PNG, visit the W3C Web site at http://www.w3.org//content/images/0789723859/elementLinks/PNG/ . And see the "PNG Images–the Web's Newest Format" section later in this chapter.
JPEG Images
The JPEG format, short for Joint Photographic Experts Group, was specifically designed for digital storage of photographic images. JPEGs (sometimes referred to as JPGs) can use up to 16.7 million colors instead of GIF's relatively paltry 256. The compression algorithm used by JPEG is known as a lossy technique, meaning that information is literally thrown away in the process of compressing the data. A low compression rate preserves the highest quality, while a higher compression rate removes more information. With a photograph, this doesn't have much impact on image quality when using a low to moderate compression level, especially when viewed on a computer screen with the monitor's relatively low pixel-per-inch resolution.
PNG Images–The Web's Newest Format
Out of desire both to supplant the need to use image formats with proprietary, and at times costly, compression schemes such as GIF, and demand for enhanced color depth and transparency support, the W3C set out to create a new image format. The result was PNG (Portable Network Graphics).
A lossless format, PNG combines the strengths of GIF and JPEG, and provides sufficient additional features and it holds the best hope for high quality, interoperable images on the Web. Adoption has been a bit slower than many designers had hoped for, primarily due to lack of native support within the major browsers. However, such support arrived with the release of Netscape Navigator 4.5 and Internet Explorer 4, and PNG is rapidly finding its way onto the map.