Creating images for the Web is a bit different from creating images for output on paper.Although the basic characteristics of Web images and printable images are the same, six main factors distinguish them: format,color size/resolution,speed,transparency, and animation. this chapter will explain the important aspects of each of these six factors and how to use that knowledge to create the most effective images for your Web site.
There are,many different tools that you can us eto create and save images for the web. It washard diciding whether to try to give geneal instructions that really wouldn't fit any actual piece of software, or focus on one program that most but probably not all of my readers would have. In the end,I opted for two related programs: the industry standad, Adobe Photoshop ($600), and its less expensive coousin, Photoshop Elements ($100). Most of the technique in this chapter can be executed with either program; a very few noted exceptions work only in Photoshop. Both are available for Macintosh and Windows.There are many alternatives,, including Paint Shop Pro for windows by Jasc Software and Graphic Converter fot Macintosh. Feel free to use whatever program you're most comfortable with.
Let me stress, in addition, that the basic technique for optimizing images for he Web are the same regardless of the software you choose. The command names may be slightly different and there may be more or fewer steps, but the ideas remain the same. in short, my hope is that this chapter will be useful even if you don't use the same software that I do.
Six Main Factors for creating Web Images:
About Images for the Web
Now let's look at those six factors that yo should keep in mind as you create Web images.
- Format
TOPPeople who print images on paper don't have to worry about what thier readers will use to look at the images. You do. The Web is accessed everyday by millions of Macs, Windows-based PCs, Unix Machines,and other kinds of computer. The graphics you use in your Web page should be in a format that each of these operating system can recognize. Presently, the most widely used formats on the Web are GIF abd JPEG, with PNG gaining in popularity. Current versions and Nestcape can view all three image formats.
- Color
Currently (mid 2002), 50% of the Web surfing public use 24-bit monitors 40% use 16-bit monitors, and fewer than 10% (which is still a lot of people) use 8-bit monitors. My guess is that the first number will continue to rise, while the second two will fall, although probably never all the way to zero
If a browser is called upon to show a color that's out of its range. it has twooptions: it can mix two colors to produce the missing one (this is called dithering), or ti can shift the missing color to one in the current set. Sometimes you hardly notice; somretimes it;s a disaster.
.
So, if you don't want your colors to dither of shift on an 8-bit monitor, you have to use one of the color in the browser's particular set. However, since browser reserve a branch of colors for the browser window itself, and because the sets for Windows and Mac are slightly different, ther are actually only 216 colors that won't ever dither on browser on 8-bit monitors on either platform. These colors are called Web-safe or browser-safe. On the down side, this set of colors, oor palette offers a very limited choice of colors. (And if that were'nt enough, version for browsers and earlier shift them around on 16-bit monitors).
But since there are fewer and fewer 8-bit monitors, its seeming less and less important to completely limit choice because of them--especially when you may exacerbate a problem with 16-bit monitors.
- Size and resolution
Computer images are measured in ppixels.Your digital camera, for example, may take pictures that are 640 pixels wide by 480 pixels high. But how is that big? The answer is , it depends. If you're printing the image to the primter at 200 ppi (pixels per inch), that imageb will measure a rahter petite 3.2 by 2.4 inches. But if you're using that page on your visitor's monitors resolution, which is more likely to be around 85 ppi ( and mignt be as low as 72 or as high as 100 or so), and thus will display at a heftier 7.5 * 5.5 inches (about 19 * 14 cm) on screen. Perhaps a better way to think of image size is with respect to the browser window.
Since moonitors with a resollllution of 640 pixels wide by 480 pixels high were the standard for so long, browser manufactureers, and indeed Web page designers, tend to keep their pages under 600 pixels wide, so that viewers cans ee the entire contents of the page without scrolling horizontally. so, if you can envision the witdth of a basic browser window ( say, just to the end of the navigation bar), then you know approximately how big 640 pixels is and can plan your images accordingly.
Don't forget of course, that plenty of people have bigger monitors (1024 * 768 is not unusual) and more than a few have smaller. Still, just because someone has a bigger monitor doesn't mean they're goooing to fill it with a single browser window containing your Web page.
- Speed
The next principal differnces between Web images and printed images is that your visitors have to wait for Web images to download. (imagine waiting for pictures to appear in your morning paper!)
The second way to speed up download time is by compressing the image. There are three popular compression methods (thst correspond to the three major formats): LZW (for GIF images , JPEG, and PNG. LZW is particularly effective for computer-generated art like logos, rendered text, and other images that have large areas of a single image color. In fact an image, LZW can often (but not always) compress the image even more.
JPEG, on the other hand, is better at compressign photographs and other images that have many different colors, In fact, if you blur an image, thereby creating even more colors, JPEG compression is often more effective. If you plan on editing an image in the future you should save a copy in an uncompressed format (e.g., PSD or TIFF) and only save it as a JPEG after have made your final edits.
- Transparency
Transparency isimportant for two reasons. First, you can use it to create complex layouts by making one image move behind another. Second, you cantake advantage of transparency to give an image a non-rectangular outline, adding visual interest to your pages. Both GIf and PNG allow transparency; JPEG does not.
- Animation
One thing you won't be seeing on paper anytime are moving images. On the Web, they're everywhere.animated images can be saved in GIF format, but not JPEG. You can also create animation with flash.
<