OIT Tech 32px
pagemasters toolbox -- classic commonspot

Image Issues for New Pagemasters

Table of Contents


How to copy an image - and when not to do it

One of the biggest problems with the web is copyright. It is very easy to copy an image from the web. Every time you load a page, you load a copy of each image that is in that page onto your computer's disk drive, in a temporary location. It is easy to copy these to a permanent location on your disk and use them in your own pages, and it is very tempting to do so. All we can say is: be careful. Don't copy images on a page that has the copyright symbol: © on it. That means the author has a copyright of that image, and you could get in trouble. If you do not see the ©, though, it doesn't mean the author doesn't have a copyright for that page. Before you steal an image from a page that isn't clearly marked as a distribution site, E-mail the author and ask! Much of the time he or she won't have a problem with your intended use.

Artists are very protective of their work, and with good reason. When someone spends hundreds of hours learning a software program and creating an image that is "just so," they have a right to be angry if someone uses it and doesn't give them credit. Please be respectful of artists' and authors' rights, and at the very least, give credit on your page where credit is due.

There are many resources on the net for learning more about copyright issues, including:

There are three methods to copy an existing image from a Web page you have found; one works with recent versions of Netscape, one with recent versions of Internet Explorer, and one works with any browser. The wording of the menu choices may differ slightly among browser versions and platforms, but the following instructions should provide the clues you need:


With Netscape

  1. Place the mouse pointer over the image.

  2. Pop up the menu: with Windows, right-click; with Macintosh, click and hold the mouse button for a few seconds.

  3. Select "save this image as ..." from the menu.

  4. It should default to a reasonable name and file type, but you may need to navigate your way to a different folder.


With Internet Explorer

  1. Place the mouse pointer over the image.

  2. Pop up the menu: with Windows, right-click; with Macintosh, hold down the "control" key, and then click the mouse button.

  3. Select "Download image to disk" from the menu that pops out.

  4. It should default to a reasonable name and file type, but you may need to navigate your way to a different folder.


With any browser

  1. View the source and examine the "SRC" attribute within the <IMG> tag.

  2. In the location box, type in the URL of the image based on the "SRC" attribute within the <IMG> tag.

  3. Note the size in pixels, if it is shown in the window title, for later reference.

  4. Choose "Save as" from the File menu, specify "Source" format, and name it appropriately.


Places to appropriate images

Here is a list of places that have interesting textures and buttons and other images that are freely available for anyone to use in their web pages.


Text in Graphics

The use of text in graphics requires care. In order to be worth doing, instead of simply having the same characters rendered by the browser, either the background or the text, or both, will be some color other than black or white. This automatically reduces the contrast and therefore degrades readability. Sometimes the text will be large enough that this will not be a concern. In order to look professional, the characters in the graphic will often be smoothed, to reduce the "checkerboard" effect of being formed from individual pixels. (In some graphics software this smoothing is called "anti-aliasing".) By whatever name, such smoothing also reduces the edge-contrast of the characters ("softening" them), and therefore degrades readability further; this is especially problematic with small text, with italic characters, and with "serif" type faces.

See the illustrated discussion at http://www.ohio.edu/oit/webservices/static/append6.cfm#imgfont.

A drop shadow will enhance readability of lighter color text on a darker color background, especially if the distance and blur are not too large, and especially if the text has been rendered with "anti-aliasing" turned on (that tends to smooth and soften the edges, which the drop shadow will bring back, providing better "definition" of the characters). In other situations, or with other settings, especially dark text on a light background or too large a distance and blur, a drop shadow will seriously degrade readability of text. For dark text on a dark or light background, PhotoShop's "Outer Glow" layer effect applied to the text layer may improve readability, especially if the settings are correctly adjusted. 

Another issue with text in graphics is the selection of type face and colors. At Ohio University, the Web Style Guide establishes limits on faces and colors for certain uses (e.g., "Ohio University").