This web page created by Kathleen M. Weber on February 4th, 1998.
If you've never done any design for the World Wide Web, there's a good chance that you've never worried about one special graphics issue, even if you are a print design expert. How big is the graphics file that you created? Aside from using the correct graphics format, this issue is the single most important consideration in graphical Web design.
Why is the size of graphics files so important? Your Web users have to download your pages to view them, including all the graphics associated with the pages. Couple that fact with Web speed issues (user modem speed, web traffic, etc), and the need for smaller graphics files becomes apparent.
The high-color, high-resolution graphics files that color printers and professional designers work with are generally measured in the number of megabytes of information required to create the graphics file. Each image can take up more space than is available on a floppy disk!
A good average size for a Web graphic, on the other hand, is between 10K and 30K-about one to three percent of the size of those high-color, high-resolution graphics. This could be tough.
| Example |
|
The other thing that you need to consider is the file type
you want to use for Web graphics. Right now you can choose from
two file types which are accomodated by every browser:
Why have two standards? GIF and JPEG bring different advantages to the table. Let's take a look.
Any graphical browser supports the display of GIF format files inline, meaning that the browser doesn't require a special viewer for these files. GIFs are compressed graphics, but they tend to lose less image clarity than JPEGs. Images that have smaller color palettes (those that use 256 colors or fewer) often look better in GIF format. GIF is also the file format of choice for creating transparent graphics (graphics that make the Web page appear to be the actual background of the GIF graphic).
Although GIF files are compressed, they usually are somewhat larger than JPEGs, but they decompress quicker and typically are drawn more quickly than JPEGs (given the same file size).
Another popular graphic file type is JPEG format (sometimes seen with a .JPG extension), and is used by many Web designers. JPEG graphics are better for graphics that have need more colors (up to 16.7 million, in most cases) than similar GIF files; in addition, the JPEG files are smaller (see Figure 2).
Figure 2: The Paint Shop Pro interface.
Unfortunately, JPEGs can be a little more lossy than GIFs, meaning that the higher compression rate results in slightly lower image quality. JPEGs take a little longer to decompress than do GIF files. Although the smaller size of JPEG files allows them to be transmitted/downloaded more quickly, the time needed for decompressing the JPEG may eliminate this advantage.
It's no secret that a lot of Web design has transitioned from manipulating text-based HTML documents to designing and integrating compelling graphics into Web pages. As the Web has become more commercial, its graphical content has become more professional. If you're not up to the task of creating professional graphics, don't worry too much; programs are available that will help you. Also, it's more important that graphics further the usefulness of the text. The graphics in and of themselves are not the point. The point is to make your Web pages more exciting and informative.
It is a fact, however, that Web sites are leaping forward daily into a more professional, more graphical presentation of Web-based information. Commercial artists and designers are continuing to find new niches on the Web. If you're a skilled computer artist, congratulations; this is where you'll put your skills to use. If you're not, that's OK, too. Any Web designer needs to be able to manipulate and edit graphics in a program such as Adobe Photoshop or CorelDRAW!, but you don't necessarily have to create those graphics, if that's not your forte.
As you get started with a program such as Photoshop or CorelDRAW!, keep in mind that the most important consideration in creating Web graphics is the file size. File size isn't generally the first consideration for creating print graphics; almost any print shop or prepress house will accept large storage cartridges or tapes that provide access to your huge full-color graphics. Not so on the Web. Your target is as small as possible-between 15K and 35K for larger (bigger on the screen) files.
You can come up with graphics to use on your Web pages in many ways. Eventually, any graphic that you use needs to be in a standard file format (for example, GIF or JPEG) and relatively small. But how you come up with the final graphic has a lot to do with the information that you're trying to communicate and with your skills as an artist. The following are some of the different ways you might come up with Web graphics:
| Tip |
Any graphics program, even Microsoft Paint, can create Web graphics, although you may need to use another program to change the graphic to an acceptable file format. |
A popular program for creating Web graphics in Windows and Windows
95 is Paint Shop Pro, which has the added advantage of being try-before-you-buy
shareware. To download Paint Shop Pro, access the URL
http://www.jasc.com/pspdl.html
with your Web browser, and find the hypermedia link for downloading
the program for your particular version of Windows.
| Note |
As with any shareware program, you should register Paint Shop Pro (by sending in the requested fee) if you find it useful. |
Paint Shop Pro arrives as a PKZip-compressed file archive, so
you also need a program on your hard drive to unzip it when the
download is complete. (WinZip is available from
http://www.winzip.com/.)
Then install the program in Windows and start it. You should see
a window like the one shown in Figure 2.
You can use Paint Shop Pro to create a simple graphic, such as a logo or title, for your Web pages. Using the flood-fill tool, for example, allows you to select a color and "pour" it into the window, creating a background color for the rest of your graphic.
Click the fill-tool icon and then choose a color from the color palette. To apply that color to your graphic, click in the graphic window.
Now select the text tool, choose another color from the palette, and click the graphic window. Type your text (your company name, for example) in the dialog box; then click OK. Now you should be able to drag the text around the window. When you have the text arranged correctly, click anywhere in the window to place the text permanently (see Figure 3).
Figure 3: Creating a simple graphic.
Before you save this graphic, you should make it as physically small as possible so that it works well on your Web page. To cut the image down a bit, select Paint Shop Pro's rectangular selector tool. Click somewhere near the top left corner of the graphic (at the point you want to make the new top left corner of your cropped image), and drag the mouse pointer to the other side (bottom right corner) of the image. When you release the mouse pointer, a thin box should appear around this slightly smaller portion of your graphic. From the menu, choose Image, Crop, and the graphic is cropped to that size. If everything went well, you have a smaller graphic that is just as useful for your Web site.
Our last step is to save the graphic in a file format that's useful for the Web. Choose File, Save As. In the Save As dialog box that appears, you can select the file type from a drop-down list (see Figure 4). Select either GIF or JPEG, type a filename, and click OK.
Figure 4: Saving your graphic in a Web-compatible format.
Now you've created a graphic for use on your Web page. Use the Windows Explorer or File Manager to check the file size. You want the file to be somewhere around 20K-an ideal size for a Web page graphic.
After you decide what graphics to use, the next step is to manipulate and edit those graphics for best use on the Web. The preceding section discussed some of this manipulation (cropping and saving a graphic to make it as small as possible). Following are some other ways to use graphics applications to make your images lean, attractive, and useful:
Figure 5: Adobe Photoshop allows you to choose the color bit-depth for a particular graphic.
| Note |
Programs will often describe the number of colors in a graphic using either a number or something called bit-depth. An 8-bit graphic, for instance, offers 256 colors. How do you calculate these numbers? Two to the power of the bit-depth is the number of possible colors (28 = 256 colors; 216 = 65536 colors). |
| Note |
Some browsers (notably, Netscape) can be used to resize the graphics on-the-fly. Although this is convenient for the designer, the entire file still must be transferred across the Internet, thereby negating the benefits that smaller thumbnail graphics offer in terms of downloading speed. |
Another must-have program for most Windows-based Web designers is LView Pro, a shareware graphics-manipulation program. Although the program has some of the same features as Paint Shop Pro, LView is designed less for creating images and more for changing them from one size to another or from one file format to another.
You can download LView by accessing the Web URL http://www.lview2.com/default.htm. Choose the version for your flavor of Windows, down-load it to your computer, extract it from its Zip archive, install it in Windows, and start it.
To resize an image to create a thumbnail, follow these steps:
Figure 6: Resizing graphics in LView Pro for Windows.
| Tip |
If you plan to offer many thumbnails on one page, it's a good idea to make them a uniform width (or height) to keep the page orderly. |
When you create thumbnails, you'll probably want to maintain the
aspect ratio of the current graphic in resizing, so that LView
keeps the height and width of the new graphic at the same ratio
as the original graphic, making the thumbnail smaller but similarly
proportioned. Don't forget to save the new file with a slightly
different name, using the appropriate file extension (GIF or JPG).
| Tip |
Whenever an application gives you the choice, you should save GIF files as interlaced GIFs and JPEGs as progressive JPEGs. This lets the graphics display faster in many browsers. |
One very popular way to edit Web graphics is to create transparent GIFs. This process allows you to make one of the colors of your graphic (generally the background color) transparent, so that the Web page's color scheme or background graphics shows through (see Figure 7). Most often, it's used to give the illusion that the graphic is part of your Web page. You can use this method to add impact to your pages and to limit the size of your graphics by doing away with elaborate backgrounds.
Figure 7: Regular vs. transparent GIFs.
To be rendered with a transparent background, a GIF file must be saved in the GIF89a file format. This can be done with Paint Shop Pro, LView Pro, Transparency for the Mac, and many other programs. Saving a file in this format is simply a matter of deciding what color is going to be the transparent color when the GIF is displayed.
| Tip |
Giving the image in your transparent GIF a shadow (in a graphics application) enhances the appearance of a graphic floating directly over the page. |
One of the easiest ways to create a transparent GIF on the Mac is to use a simple application called Transparency. You can download the program from ftp://ftp.euro.net/Mac/info-mac/gst/grf/transparency-10.hqx.
After you download and install Transparency, double-click the program icon to start it. Pull down the File menu and choose Open. In the Open dialog box that appears, open the GIF file that you want to change to a transparent GIF. Your image is then presented in its own window (see Figure 8).
Figure 8: Transparency for the Mac, changing a white background to transparent.
Point to the color in the GIF that you want to turn transparent. As you hold down the mouse button, a color palette appears, with the current color selected. If you want that color to turn transparent, release the mouse button. If you want some other color to be transparent (or if you prefer to use no transparency), point to the color that you want to make transparent and release the mouse button. To turn off transparency, simply select the box marked None at the top of the palette.
Now pull down the File menu and choose the Save As GIF89a command. Rename the file (or use the same name, if you want), and save it. The file now should appear in a Web browser as a transparent GIF.
Windows users can create transparent GIFs in LView Pro. To do so, follow these steps:
Figure 9: Click the dropper to choose the transparent color.
Tomorrow's Study Tips: Adding Tables to Your Web Pages
This web page created by Kathleen M. Weber on February 4th, 1998.
