| Index A-Z | Apply Now | From the Chancellor | Visitors | Alumni | People Finder | For the Media | For Parents | Jobs |

| SalukiNet | Intranet | Athletics | Public Events Calendar | Weather | Search SIUC

Information Technology
Computer Support Center

Using Graphical Images on the Internet

printable version

This document discusses the graphical formats most commonly used in Microsoft Windows operating systems and on the Internet; which format is best for which type of image (i.e., artwork, photographs, line drawings); the graphics viewers built into Netscape Navigator, Internet Explorer, Microsoft office applications (e.g., Word for Windows), and other Windows accessories (e.g., Paint, WordPad); how to download images from the Web and exchange images via e-mail; and using graphics on your web pages.

You can jump immediately to a specific topic within this document by clicking one of the following links:

• General Graphics Principles
• GIF images (.gif)
• JPEG images (.jpg)
• Bit Map images (.bmp)
• Other Graphics Formats (.png, .tiff, .ico, etc.)
• Decompressing Internet/E-mail Images
• Inserting Graphics into Office Applications
• Diagnosing an Image Filetype
• Downloading Images from the Internet
• Exchanging Images Via E-mail
• Using Graphics on Web Pages
• Other Web Sites of Interest
• Newsgroups of Interest

General Graphics Principles

There are several ways to represent graphics in a computer. This document discusses raster images, specifically, those with filetypes of .gif, .jpg, and .bmp, among others, where images are composed of dots of colors rather than mathematically calculated lines, or vectors. "Raster" is another word for "grid." Raster images consist of small rectangles called pixels. These pixels are scanned into the grid right-to-left, top-to-bottom. The human eye blends the pixels together into an image, just as it does with images on television and in print. If you magnify a raster image, no matter how "round" it may look to your eye, eventually you'll see that it's made up of hundreds or thousands of tiny rectangles. The jagged lines created by the rectangles, especially on some curved lines, become readily apparent at high magnification. The eye simply smooths them out at normal viewing size.

A little arithmetic may help you understand how images are composed. High-resolution monitors can display 1280 pixels across the screen and 1024 pixels down, which people refer to as 1280 x 1024 resolution. As resolution drops, let's say to 640 x 480, so does the quality of the image displayed.

Your monitor is called an RGB monitor because each pixel is created from three primary colors: red, green, and blue. In the RGB scheme, all colors are created by varying the proportions of these three primaries. One byte, or eight bits, of information is allotted to each of the three colors. Three times eight is 24, so on an RGB monitor, each pixel could potentially store 24 bits of color information. Twenty-four-bit color is called "true color," since it's capable of duplicating without compromise a color found in reality. Newer monitors and video card drivers can support 32-bit and 48-bit color.

One byte can represent 256 numbers--0 through 255. The amount of color you see is measured in units of "intensity," or brightness. The human eye is much more sensitive to changes in brightness than changes in color. Zero represents no color intensity and 255 represents maximum intensity. So if our bytes for red, green, and blue are all set to zero (0-0-0), we get pure black, since zero intensity equals zero color. If we set our three bytes to 255-255-255, we get pure white, which is a blend of all possible colors. A setting of 0-0-255 would result in pure blue on an RGB monitor, since red and green are set to zero intensity and blue is maxed. Since 255 x 255 x 255 equals 16,777,216, an SVGA RGB monitor is capable of displaying more than 16 million colors.

It's not always practical to use 16-million-color images. If an image contained four million pixels, at three bytes per pixel, you would need about 12 million bytes (12 MB) of storage on disk or in memory to work with the image. And routinely sending such large images across the Internet would quickly bring it to a standstill. Even if 16 MB color were practical, who could tell the difference between 113-44-255 and 110-42-240 in a simple line drawing or Windows icon? Shallower color depths are possible, often preferable, and sometimes essential.

So, image data in raster images, or "color depth," is limited to one byte per pixel, which is commonly called "8-bit color." The colors possible (the "color palette") drop from 16 million to 256 (8 x 8 x 8), the compromising process alluded to above, but 256 colors are often all you need.

There are several schemes for reducing color depth. Black-and-white images use 1-bit color, since a pixel is either black or white. Mix together a cluster of black and white pixels, and the human eye converts them into gray. Simple drawings like icons and buttons use 4-bit color. Windows uses 4-bit color for its windows, dialog boxes, toolbar, and so on. (In Windows 95/98, you can change color depth via Control Panel/Display/Appearance.)

GIF Images (file extension .gif)

In the 1980s, CompuServe was supporting an online BBS forum. People were exchanging graphical images via e-mail through the bulletin board. Dozens of formats were in use, and CompuServe decided to create a standard, which it called Graphics Interchange Format (GIF). GIF images use 8-bit color, so available colors are limited to 256. Compression is satisfactory for small images, but image quality deteriorates for larger images.

GIF Data Compression

The real reason for discussing arithmetic is to show why data compression is necessary. Sending multimegabyte images across the Internet would slow it unacceptably. Some type of compaction must be done. Compression replaces duplicate image data with symbolic tokens, which saves storage space and transfer time on the Internet.

The bit settings discussed above, like 255-255-255, are replaced with simpler numbers coded into a "global palette" specific to a given format. These numbers could range from 1 to 256. Now, look at this data string:

1 1 4 5 6 18 18 4 5 6 1 1 1

As you can see, it duplicates "4 5 6." The second occurrence of this sequence could be replaced with a token,

1 1 4 5 6 18 18 [3,3] 1 1 1

which tells a GIF decompressor (or "viewer") to look at the third value in the string, copy three values beginning at that point, and insert them where the token is. This particular example doesn't save much space, but savings are significant when multiplied throughout large images. Remember, image formats like GIF are by definition compressed, so there's no point in zipping it with PKZIP, or some other compression program, before you transfer it across the Web.

When a GIF image is decompressed, every bit that was compressed is "reconstituted." No data, no image quality, is lost, which is why the GIF format is called lossless. The first version was called GIF87a and the second GIF89a. Today, all online services and web browsers can recognize and display GIF images. Most word processors, spreadsheets, and databases can also handle GIF graphics.

The newer version of the GIF format, 89a, supports animated images, which we're seeing a lot of on the Web today. You'll need an editor that can create animated GIFs if you want to use them. However, not all GIF viewers can display animation. If you can only see the first image in the sequence, you've probably got an older viewer. You'll need a relatively recent browser, such as Netscape Navigator 3.0 or Internet Explorer 3.0, to display animated GIF images.

JPEG Images (file extension .jpg)

JPEG is the most commonly used format for images on the Internet. This format is named after its creator, the Joint Photographic Experts Group committee. JPEG (or JFIF, to be technically correct) is also a compressed format, but it uses 24-bit color. This is JPEG's advantage over GIF and most other image-data compression methods. JPEG images are true-color, yet manageably small because they use a more extensive compression algorithm. The format is good for photographs and photorealistic images. It does poorly with simple, sharply defined images, and image quality tends to decrease with file size. Experimenting with high compression on a simple black-and-white image or a simple color icon will quickly show you how compression affects image quality.

The JPEG engine replaces neighboring pixels with an averaged single value. It discards what it considers expendable data, so it's called a lossy format. It trades accuracy for compression; the more the file is compressed, the more quality is lost. Most graphics editors let you choose between low and high compression. Low compression means a better image but a larger file. Some editors let you specify a numerical level of quality between 1 and 100. You may find that the lower quality settings--meaning higher compression--cause a runaway overcompression, and the image may not even be recognizable. Still other editors offer a compression scale of 1 to 100, where the lower settings mean lower compression and higher quality.

JPEG Versus GIF

GIF does the better job of compressing realistic images with hard edges and sharp color separations. The JPEG format works best for photorealistic images, where the effects of compression are less visible. It loses data each time you make changes to the image or compression level and save your changes to the file. Be especially aware of cropping a JPEG image, because the editor usually has to recalculate the blocks of data that determine how the changes in brightness are rounded off, resulting in further degradation of image quality. Actually, try to avoid editing JPEG images at all. Convert the image to a non-JPEG or "lossless" format, make your changes to an image while it is in that format, and then save it as a JPEG image.

Sixteen Million Colors on 256-Color Monitors

What happens when 24-bit true-color images get displayed on a 256-color monitor? Some monitors (VGA) are electronically limited to 256 colors. Others can display 16 million colors (SVGA), but are set to display only 256 colors because commonly required applications require it. (You can determine what your monitor is set to by right-clicking a blank area of your desktop and selecting Properties/Settings.) Sixteen million colors, i.e., true color or 24-bit color, is converted to 256 colors, i.e., 8-bit color, by the same dithering process that produces GIF images. Some data loss and therefore image quality is unavoidable.

Converting GIF to JPEG

Usually, this makes little sense. A GIF image's 8-bit format doesn't have the data that the JPEG's 24-bit format requires, so JPEG must fill in the missing data the best it can. You may not like the results. There are sophisticated tools for improving the look of a GIF to JPEG conversion, but they're beyond the scope of this document.

Bit Map Images (file extension .bmp)

Bit-mapped images are Microsoft Window's native format. Windows uses this format for wallpaper and backgrounds. Bit maps were designed to be used within an operating system, not for transmitting across a network. The format is inefficient but standardized and reliable. BMP images can't be compressed as efficiently as the GIF or JPEG format. If you really need to send a bit map image to someone via e-mail, compress it first with the PKZIP utility.

If you find an image on a web page you would like to use as wallpaper, and copyright is not an issue, you can save the image as wallpaper for your Windows desktop. While Netscape Navigator or Internet Explorer is displaying an image, right-click the image and select Set as Wallpaper from the popup window. The browser will save the image to your hard drive and install it as your wallpaper.

Other Graphics Formats

So far, this document has concentrated on those formats you are most likely to encounter on a Windows-based PC and on the Internet. However, there are others, and each is discussed below (in no particular order).

Portable Network Graphics (PNG)

PNG was originally created to bypass the legal problems confronting the LZW compression scheme used for the GIF format. Its developers allowed 48 bits of color depth per pixel and a lossless compression scheme; it compresses somewhat better than GIF but less efficiently than JPEG. However, it doesn't support multiple images and therefore no animation. PNG is becoming one of the Internet's built-in graphics formats. Netscape Navigator 6.0 (and up) and Internet Explorer 6.0 (and up), for example, can display PNG images on Web browsers.

Tagged Image File Format (TIFF)

TIFF was developed before color monitors were common. It was designed for scanning large grayscale images. It can be compressed with a variety of schemes, including a lossless compression scheme, and it can handle the huge images common in the graphics arts world. TIFF's claim to fame is that it stores image data in separately "tagged" strips or tiles, which lets a graphics artist go directly to a particular area without having to load the entire image.

Since this format can use anywhere from 2 to 96 bits per pixel for color information, uncompressed TIFF files can be enormous. A second drawback is that the many versions of TIFF are largely incompatible with each other. You might send a TIFF image to a coworker, and their software will be unable to read it.

Windows Icon (ICO)

This is a 4-bit, 32 x 32 pixel format (.ico) used for monochrome or 16-color Windows icons. Icons created in this format are of necessity very simple and their colors are limited. Look at the menu bar of any Windows panel or screen, and you'll see examples of these icons. The format can be used in free-standing ICO files, such as someicon.ico, or they can be stored in .EXE or .DLL files. When you create an icon for your Program Manager or desktop, when you specify the path and program name, Windows searches that program (file extension .EXE) or associated Dynamic Link Library (.DLL) file for a default icon. You can easily create your own icons with an icon editor. If you're interested in doing so, a shareware editor is available at the ZDNet Software Library site.

Macintosh PICT

PICT is the native Mac format, so it is to Macintosh what BMP is to Windows. It combines bitmap and vector graphics data and can store up to 32 bits of color information per pixel.

PC Paintbrush (PCX)

PCX is an older format originally created for PC Paintbrush, which became Windows Paint. Paint can still read PCX files but can't create them. The PCX format has been replaced by the GIF, JPEG, and BMP formats on the Internet, but it is still commonly used offline. Compression is terrible for photographs.

Decompressing Images from the Internet or in Your E-mail

Some images you download or receive in your e-mail will be encoded and/or compressed and will require decoding and/or decompression before you can view them. The following table lists some common file formats, specifically, the file extension you'll see, what the extension stands for, and the operating system (OS) most commonly associated with the format.

Extension	Source	OS
.exe	PKZip (self-extracting file)	Windows
.gz	gzip	Unix
.hqx	BinHex	Macintosh
.lzh	LHArc	Windows
.sea	Stuffit	Macintosh
.sit	Stuffit	Macintosh
.sit.hqx	Stuffit and BinHex	Macintosh
.tar	Tape Archive	Unix
.tar.gz	tar and gzip	Unix
.tar.z	tar and compress	Unix
.taz	tar and compress	Unix
.tgz	tar and gzip	Unix
.uu or .uue	uuencode	Unix
.xx or .xxe	xxencode	Unix
.Z	compress	Unix
.z	gzip	Unix
.zip	PKZip	Windows

Graphics Viewers

A "viewer" is a generic term for a program that can interpret the data stored in a file. Your Web browser is a viewer. You can view this page from a browser because it can interpret the mixture of text and HTML (hypertext markup language) tags that make up a page. If you tried to "view" a graphics file from a text editor like Windows' Notepad, you would see an impossible mess of strange-looking characters. That's because Notepad was written to view plain text only; it doesn't have the ability to interpret .gif or .jpg files and assemble the data therein into recognizable images.

Web browsers like Netscape Navigator and Microsoft's Internet Explorer have graphics viewers built into them. You've probably noticed that you can look at Web page images that are in the .gif or .jpg format, and you never had to tell Netscape or Explorer how to interpret them. That's because these browsers automatically recognize these common file types and assemble all those coded pixels, which look like gibberish to the wrong kind of viewer--such as Notepad or the human eye--into images. This is why you will normally want to cast images on your Web pages into either the .gif or .jpg format.

It doesn't matter to the browser whether the image file is on a Web page or on one of your disk drives. You're accustomed to using the browser's viewers by entering a Web page path in the Location or Address field like this: http://www.siu.edu/. However, you can also use the browser to view images on your own disks. Use this syntax: file://c:\somedir\somefile.gif, if the image is in a directory called "somedir" on your "c:\" drive. The point is that the browser responds equally well to a local drive/directory address or a Uniform Resource Locator (URL) on the Web. Both are literally pathnames. The file:// option works for both Navigator and Explorer.

Inserting Graphics into Office Applications

The idea emerging here is that graphics, especially in the two formats being discussed, can be interchanged among viewers. Any Windows application that supports Object Linking and Embedding (OLE) can insert an object (e.g., an image). How do you know if your favorite office app (e.g., a word processor) supports OLE and the insertion of graphics? Look in the menu bar for Insert, click it, and see if Object is included in the drop-down window. If so, click it, and you'll see the range of image filetypes you can insert into that particular app's documents. Microsoft WordPad has an OLE client, but Notepad does not.

Got a favorite icon on the Web? If copyright is not an issue, download it and plug it into your document. Most popular office products (e.g., Microsoft Word, Excel, etc.) can act as OLE clients. Microsoft's Windows 95 includes several accessories, such as a small word processor, WordPad. Open WordPad, and try the following experiment. (This experiment requires accessories like Paint and WordPad on your hard drive; if you don't have them, you can insert them with the Start/Settings/Control Panel and Add/Remove sequence; you'll need the Windows 95 CD-ROM.)

1. Click Insert
2. Click Object
3. Click the Create from File button
4. In the File panel, type in the pathname and filename of the image you want to insert. Look for a .gif, .jpg, or .bmp filetype on your hard drive.
5. The image will be inserted, and you can experiment with resizing it and typing text around it.

Microsoft Excel 97 is another good example. In addition to the Insert Object, it also has Insert Picture, which can handle many more image types. Let's experiment with bringing down an image from the Web and plugging it into an Excel spreadsheet. Actually, to be technically accurate, if you can see an image on your monitor screen, the image has already been downloaded and stored in your computer's memory; so when someone talks about "downloading" an image, they're really talking about copying it from memory onto your hard drive. Try this:

1. First, go to this URL: http://www.siuc.edu/~logo/logos.html. This is a page of publicly available SIU logos, which means we can experiment with them without infringing on anyone's copyright.
2. Any Windows-based browser can save a file with the File/Save As sequence. If you have Windows 95, you can simply right-click the topmost SIU logo (siusmbal.gif).
3. In the drop-down window, left-click Save Picture As, and precede the filename in the window with a:\, so the window will contain a:\siusmbal. This is for convenience' sake; you can save the image to any directory you like. We'll talk more later about downloading images from the Internet.
4. This .gif image will then be written to your floppy drive as siusmbal.gif. Now you can insert it into an Excel spreadsheet.
5. If you have Excel, launch it now. If you don't, skip the remainder of this exercise.
6. Open the spreadsheet and select the cell that will receive the inserted image.
7. Choose Insert and then Picture.
8. Type in the path- and filename of the image.
9. Click Insert to close the dialog box and insert the image. The panel of options appearing beside the inserted image let you resize it, among other things. You can also turn it into a watermark, so it will appear as a faded image behind the text in the cell.
10. Actually, you don't need to be connected to the Internet to grab an image you want from a Web page. When you visit a page, it's cached on your hard drive (which is why you want to clear the cache from time to time). The browser can retrieve the pages from disk and display them after you disconnect. Bookmarking a page guarantees that you can return to it whenever you wish, whether you're connected or not. You can copy the images from the page by right-clicking them, the same method described above.

Diagnosing an Image Filetype

Occasionally you'll download or otherwise receive an image of unknown filetype. You can't look at it until you know which viewer to use, and the trial-and-error approach wastes time. A good first step is to open the file with a standard word processor or text-editing file, such as Microsoft's WordPad or NotePad. Even though most of the file will look like gibberish, the more common filetypes immediately identify themselves with signature codes. Look for the following clues in the first line of the file:

• GIF89a signals a GIF image.
• JFIF tells you it's a JPEG file.
• BM indicates a bit map image.

If you don't see an identifying code, try viewing the file with a graphics editor. Some can figure out for themselves what kind of image the file contains. If you have no graphics editor, try a word processor, like Microsoft Word.

Downloading Images from the Internet

Use the File/Save As sequence to store a file to your hard drive, or just right-click it with your mouse if you have Windows 95. Sometimes a site's webmaster will store images on a separate page. Museums for example often put miniaturized thumbnail images of a larger image on one page, which you left-click to view. Other webmasters embed the image in the HTML that makes up the page. Right-clicking the expanded image prompts the browser to pop up a window offering such choices as Save Picture As or Set as Wallpaper (Internet Explorer), or View Image, Save Image As, and Set as Wallpaper (Netscape).

After you've saved an image, you can view it with your browser by opening the file just as if it were another page. Or you can open it with whatever graphics editor you prefer and modify it. If you upload the image to your web server, you can point to it from your own pages.

Exchanging Images Via E-mail

Most of us send and receive graphical images now and then through e-mail. These images are binary files, which creates something of a problem, because e-mail protocols on the Internet can transmit text data only. Attempting to send binary files of any type by embedding them in the body of the note causes that gibberish you may have seen in some e-mail sent to you. Clearly, some sort of conversion must be made to the binary data in the image before it's sent. This conversion process is called encoding. A properly encoded and attached image will arrive at its destination with a generic note that a file, an image in this case, is attached. The recipient of the image must then decode it. Let's look at two typical transactions through the standalone Eudora e-mail agent and the e-mail agent built into Netscape.

Sending Images with Eudora Light

Eudora is one of the most popular e-mail programs on the Internet today. You can probably extrapolate from the process and figure out how to do the same with a different e-mail agent.

Eudora Light encodes and decodes automatically, so the details are hidden from you. However, it does offer a choice of two types of encoding: BinHex or MIME. Be sure MIME is enabled. To attach a file in Eudora Light:

1. Click the New Message icon.
2. Complete the address, subject, and type whatever note you wish.
3. Choose Message and Attach File. Eudora will open a dialog box for the path- and filename of the image to be attached to the note.
4. Type in the path/filename of the image or find it by browsing. Click OK.
5. Click Send.

If the recipient of the note is also using Eudora Light, the image will automatically be decoded and stored in your default download directory. You can change this default with the Special/Settings/Attachments sequence.

Receiving Images with Netscape Navigator

Let's suppose the recipient uses the e-mail client built into Netscape Navigator instead of Eudora Light.

1. Check your mailbox as you normally do with Netscape.
2. Select the piece of e-mail with the attachment.
3. Netscape varies from version to version in how it handles transmitted binary files, images in this case. You may see a paper-clip icon at the top of the note alerting you to the presence of an attached file. You may also see a web-style link in a box below the text that describes the attached file.
4. Click either. An intermediate icon may or may not be created toward the bottom of the note.
5. The viewer assigned to that type of image will be launched, and you'll be given a choice of viewing it or saving it to disk.

Sometimes you'll receive an image that was embedded in the body of the e-mail rather than attached. The first step is to reply to the sender and ask her to resend the e-mail, this time with the binary file attached to the note, not embedded. That'll make it easy to detach the binary file. If this isn't possible, you'll need a program that can scan the e-mail and extract the embedded binary file for you. One such program is Wincode, a freeware multipurpose encoder/decoder for Windows, written by _Snappy_Software.

Using Graphics on Web Pages

Use the HTML IMG to insert graphics into web pages. At its simplest, the syntax for using this tag is

<IMG SRC="somename.xxx">

where "xxx" is one of the image formats discussed above. Notice that the file name is all that's given. This means that when the browser looks for this image, it will search the same folder on the Web server that contains your home page. So this is an example of a relative link, or one whose path relates to the home page's location as its starting point. This can cause trouble when you later decide to move files around, and the page and the images linked to from the page are in different folders.

So it's a good habit to use absolute links, which look like this:

<IMG SRC="http://www.siu.edu/images/somename.xxx">

This absolute URL will find the image no matter where the calling page is stored. It's a bit more trouble to type in the full URL, but it can save you many headaches down the line. Note the intermediate "images" folder in the URL: many people store all their images in one folder, thus avoiding having to remember where this or that image is.

Also notice the case of the URL, which in this case happens to be all lowercase. Most Web servers on the Internet use the Unix operating system, which is case-sensitive, so if you tried to find an image called "Somename.XXX," you would get an error message. Some Web servers use the Windows NT operating system, which is not case-sensitive. This causes problems for people accustomed to ignoring the case of URLs on a Windows server. They upload files to a Unix server, and suddenly get error messages when their pages try to retrieve images. Always using lowercase is a good habit. (The case of the HTML tags, IMG SRC in this example, doesn't matter.)

There's much more to image tags, too much to go into here. Customer Service has several HTML documents online, specifically:

• Introduction and General Topics
• Using HTML Tags
• Creating Tables
• Creating Symbols not on the Keyboard (°, £, Æ, ³, etc.)

Other Web Sites of Interest

• SIGGRAPH home page
• Graphics Software Archive
• The Stanford Graphics Lab
• Nice List of Computer Graphics Links

News Groups of Interest

• comp.graphics
• comp.graphics.visualization
• comp.graphics.animation
• comp.graphics.digest
• comp.graphics.data-explorer
• comp.graphics.avs
• comp.soft-sys.khoros
• sci.virtual-worlds
• sci.image.processing
• comp.sys.sgi

Email Us:

Infotech Links

Getting Started	Policies
How Do I?	About IT
Services	Infotech Home
Help	Downloads
Whats New	Faq

 

Index A-Z | Apply Now | From the Chancellor | Visitors | Alumni | People Finder | For the Media | For Parents | Jobs
SalukiNet | SIUC Intranet | Athletics | Public Events Calendar | SIUC Home

Comments: IT Webmaster

Copyright © 2003, Board of Trustees, Southern Illinois University
Privacy Policy
Last Updated