Basic Web Graphics

GIF, Graphic Image Format, is pronounced "giff" (with a "hard g" as in gift, since there is another graphics format called JIF). It was developed in the mid-1980s by computer scientists at CompuServe, then the leading provider of public networking service.
 

Though limited to 265 colors, the GIF conversion process chooses the 256 most commonly used colors in each picture individually. So for most pictures, 256 is enough.

When to Use GIFs:
Use them by default. But you often get better results on photos of people and landscapes by using JPEG.
 

JPEG, Joint Photographic Experts Group, pronounced "jay-peg". As the name implies, it's good for photographs, partularly photos of people and landscapes.
 

JPEG offers a high degree of flexibility, because for each picture you save, you can choose the degree of compression.

When to Use JPEG:
Use JPEG for photos of people and places where sharpness of lines isn't necessarily important. Highly compressed JPEG images are excellent as Web-page backgrounds.
 

PNG: Portable Network Graphics, pronounced "ping". An effort to combine the advantages of GIF and JPEG formats.
 

Although officially accepted by the major graphics and browser developers, PNGs are not very widespread. The main problem is the wide variety of sub-formats available in PNG, some of which are too complex for browsers to handle. This means that when you save an image as a PNG, you have to be sure it's a variety of PNG that can be handled by browsers. Most Web designers avoid PNG entirely for this reason, and stick to GIF and JPEG.

When to Use PNG:
Use this format if you are sure the sub-format you want to use can be handled by most browsers.
 

Some commonly used office software suites include tools for graphic manipulation, including conversion. An example is Microsoft Office's Microsoft PhotoEditor, which comes with the higher-end version of Office Professional suite.

You can get freeware or inexpensive shareware graphic conversion programs easily from shareware distributors. Use module NA31g, "Getting Files using a Web Browser," which has a section on graphic converters, to show you exactly how to find and download one.
 

• Adobe Photoshop is the premier graphics program for general graphic and photo handling. (And I'm not just saying that because it happens to have been written by the children of a fellow Washtenaw Community College instructor! :-) http://www.adobe.com/prodindex/photoshop/main.html
• JASC Paintshop is an excellent shareware program that does much of what Photoshop does. I can't afford Photoshop, so I use Paintshop. http://www.jasc.com/psp5.html
• Microsoft Photo Editor is available with some versions of MS Office (you can find it by using the Windows Start menu under Programs...MS Office...Microsoft Photo Editor). 

By default, all "intellectual property" including the graphics you see on the Web are protected from theft by copyright laws, which apply in almost all countries of the world. Copyright is a complex area of law, and since I am not an attorney, I can't give you legally valid advice! However, I can direct you to authoritative sources in another module, A05c "The Computer User's Guide to Copyright."

Here's a "rule of thumb" to go by: although many Web page authors don't object if you use graphics from their pages, it's a good idea to ask their permission if you would like to use anything major or distinctive from their site. If you want to use graphics from a site that collects or designs artwork specifically for people to download, be sure you read their statement on what constitutes legal use. They may ask you to limit your use to a certain number of pictures, or they may ask you to include acknowledgement of the source, including a link to it. If you want to use their artwork, be sure to comply with their requests! Warning: A copyright lawsuit can be hazardous to your career.
 

It is very simple to take a graphic image from a Web page for use on your own. When you see a graphic you like,

1. Point to it with your mouse
• Windows: click on it with the right mouse button
• Macintosh: double-click it
2. On the context menu that pops up, select Save Image As
3. Select the location for saving the file on your computer, and click OK.

Be sure to ask permission if you take a large or distinctive work or art for your own use!
 

There are large numbers of Web sites devoted to graphic images where you can download them and use them.

• For a large, up-to-date list of graphics sites, visit Yahoo's Web Design Graphics section.
• The Google search engine offers a search focused on graphics. Use it at http://www.google.com/imghp.
• For commercial use, there are sites that charge fees (small to large) such as:
  • Comstock: http://www.comstock.com/web/default.asp
  • Corbis: http://www.corbis.com/
  • Fotosearch: http://www.fotosearch.com/
  • Stock Photography at Can Stock Photo
     

A large selection of artwork is available commercially on CD-ROM. Visit a local software retail store and browse their collection.

One advantage of CDs is that they are intended for people to use on their own publications. It's wise to check the license agreement though, just to make sure publication on the Web is allowed.

An alternative type of CD is the Kodak PhotoCD. This system allows you to have pictures from your own camera saved as digital images on a CD. Each CD holds up to 100 images, each in five resolutions from "thumbnail" to very high detail.
 

Anything that appears on your screen can actually be "captured" and saved as a separate graphic. I suspect that you will get better results saving a graphic image as discussed in the From the Web section, because every time an image is rendered on screen and re-captured as a file, some of the original quality may be lost. The quality is limited by the resolution and color depth of the video display you are using when you do the capture, and that may be lower than the quality of the original. Screen captures are useful for illustrating computer processes - showing menus and buttons. I do it frequently in preparing lessons, but that's a bit specialized.

The most convenient way to do this is with a graphics program such as PaintShop that lets you select the area of screen you want. You can then fiddle with it if you like, or save it directly in a Web format.

Windows also has a built-in screen capture facility using <Alt><PrintScreen> that is, hold down the Alt key and tap the Print Screen button on the keyboard. This puts the entire screen into the "clipboard" and allows you to paste it into programs that handle graphics. 

For example, you could paste it into MS PhotoEditor and save it as a GIF. If you don't have anything else, you can paste it into the Windows Paint utility - but Paint can only save graphics in the BMP format - not useful on the Web! You would need to use a graphics converter program to make it a GIF or JPEG. 
 

Scanning is the process of turning a physical image - a photograph or a piece of paper - into a digital computer graphic. Most scanners look like small photocopiers attached to computers.

We can't go into detail of how to use a scanner in this module, but it's not hard. Here's the general idea:

1. Run a graphics program such as PhotoShop.
2. From the menu or tool bar, select Scan or Image Capture. this activates the scanner. 
3. Scanner software will give you a number of options, depending on the scanner. These include pre-scanning, setting the size, resolution, and determining the type of image being scanned (black-and-white, greyscale, color, etc.). 
4. The results of the scanning will be appear in your graphics program, and you can either make adjustments or save it immediately in a Web format.

Another source for Web graphics is digital cameras. As these become more affordable, they offer increasingly higher resolution and memory capacity. When you have enough pictures, you plug them into your computer and run software that brings the images into your computer. You may have to use a graphics converter program to use them on the Web.

Commonly available office software suites like MS Office often have features that let you add diagrams, charts, and fancy lettering ("Word Art" in Microsoft terminology). There are a couple of ways to make these available on the Web.

The first is to do a screen capture. This works, but I often hesitate to recommend it because of possible deterioration of the quality of the image. 

The other method is copy-and-paste, which is less dependent on the quality of the screen you're using. This method is discussed in some detail in module W36c on converting information from MS Word to the Web.