Web Author's Guide
Graphics and Copyright

Graphics are helpful on web pages; if only to break up long stretches of text. Properly chosen, they can make the text much more intelligible. Creating all but the simplest graphics is beyond the skills of web amateurs; the rest must be copied from somewhere. Copying other people's graphics rapidly takes us into copyright issues, which are accordingly explored in the second part of this page.

Kennedy Research Fellow Amy Potthast (Cropped Version; Compare Below)

Presenting Graphics

First off, don't present too many. Graphic take time to download, especially the first time somebody visits that page. Nothing is more irritating to viewers than staring at a blank screen, waiting for some graphic to appear. Don't begin by irritating your viewers.

When used, graphics can be centered, or put at the left or right margin. If you are using left subheads, as we are here, it probably gives better variety to center them.

In web pages, there are no tab stops. There are ways of getting around this. One is to stack up a series of photos in a row. They will appear this way:

Kennedy Research Fellow Amy Potthast Kennedy Research Fellow Amy Potthast Kennedy Research Fellow Amy Potthast

which is not much help. To space them, create an invisible "transparent gif" like this () and insert it between the pictures. The result will look like a spaced set of pictures:

Kennedy Research Fellow Amy PotthastKennedy Research Fellow Amy PotthastKennedy Research Fellow Amy Potthast

(We have now restored the effect of a tab stop). The spacer, like any other graphic, can then be modified in your Dreamweaver or other web program, say by extending its length from 19 pixels (as above) to 25 pixels, giving a wider spaced result:

Kennedy Research Fellow Amy PotthastKennedy Research Fellow Amy PotthastKennedy Research Fellow Amy Potthast

You can even type words between these elements:

Amy 1 Kennedy Research Fellow Amy Potthast Amy 2 Kennedy Research Fellow Amy PotthastAmy 3 Kennedy Research Fellow Amy Potthast

(When reducing or enlarging pictures, be sure to change width and height in proportion; keep a small calculator at your work desk). You can also change the way a graphic aligns with adjacent text. The above set are with the option "bottom." If we choose "middle," we get instead:

Amy 1 Kennedy Research Fellow Amy Potthast Amy 2 Kennedy Research Fellow Amy PotthastAmy 3 Kennedy Research Fellow Amy Potthast

Startling effects can be had by choosing different alignment options for successive pictures, but startling effects get us into the gimmicky area, and our advice is to avoid the gimmicky area. Failing gimmicks, this is about as far as you can go in mixing text and graphics on a single line.

Can you off-center a picture? Yes, just use a longer "transparent gif" with the picture:

Kennedy Research Fellow Amy Potthast

It is also possible, in the usual web page programs, to wrap text around pictures. This is a newspaper style, and its uses in academic context are limited. Those who use it often make the mistake of leaving no space between the picture and the wrapped text, which is gauche. More sophisticated effects with continuous text on the same level as pictures can be had by creating a 1 x 2 table covering essentially the whole page, and inserting text (or text plus graphics) in the usual way on the left, or vice versa. There are examples in our Senior Fellows section. Going much beyond this gets into layers and cascades, and becomes too elaborate for the amateur.

Modifying Graphics

What is a good size for a picture? It will partly depend on font size and similar choices. But there are some general constraints. The lower limit for the width of an intelligible picture is somewhere around 75 pixels; the narrowest picture on this site is 84 pixels wide. For portraits (like the one of Amy Potthast, top of this page), we prefer 150 pixels, or 100 pixels where (as with the smaller pictures of Amy, above) the purpose of the picture is more ornamental than informative. For a picture in horizontal format, our preferred standard width is 200 pixels, going to 250 pixels for special emphasis or effect. Very large graphics should be limited to 500 pixels wide, or they will swamp some browsers (with comical loss of intended effect), and these effects should be attempted only rarely, say, once every 500 pages in your site. Surprise palls on repetition, and it will also pall on anyone's second visit to your large-picture page.

Some pictures in their original form are too big. The original photo Amy sent us was 305 pixels wide:

Amyh Potthast (Uncropped Version)

which was not only too big for an ordinary page, it included too much. Our cropped version, we like to think, keeps the essential Amy; it is what the PR people call a "head shot." Advise your photo providers to avoid fussy backgrounds (including their own bookshelves), fussy clothes, grungy clothes, gray days (the contrast cannot be successfully restored), and informality in general. The pompousness of earlier centuries is not to be condoned, but posterity, and respect for our own subject, require a certain minimum gravitas. The perfect contemporary "head shot" in our own repertoire is that of distinguished NT scholar Eldon Epp, of the Project Advisory Board. That level may be hard to reach. But as a minimum, try to avoid having your departmental colleagues, if they it be with whom you are involved, look like they had just escaped from a richly deserved life sentence on Devil's Island.

When you crop a photo in Adobe Photoshop (we use the simple version called Photoship Elements) you have the option of saving it in different formats. If possible, save the original as a JPEG file (with the extension .jpg), since on the whole these survive resizing better than other choices. When you are through cropping, resize in Photoshop to agree with your probably intended use, and save in that resized form. Graphics can also be resized within Dreamweaver (or other web program), but the distortion may be greater.

Originating Graphics

Unless you are a pro, these options are very limited. We mention two. First, a colored version of the "transparent gif" used as a spacer above) can also be stacked, and then proportionately extended, into a reasonable facsimile of a bar graph. An invisible table (see above) helps to keep the columns and their captions aligned. Here a labelled bar graph from a Statistics lesson:

 
p
0.543
0.331
0.101
0.021
0.003
0.000
0.000
E
0
1
2
3
4
5
6

The Microsoft Paint and similar easy programs allow the creation of certain not too complicated shapes and diagrams (such as Venn overlap diagrams). You can also color them in RGB code (see the Color Theory page), which is a great convenience. The navigational arrows in many colors:

which are used on this site were originated in this way. Apart from ground-up creation, anything you can draw, you can scan, and then further adjust in Photoshop.

Copyright

[We here use a color change to denote a change of subject focus]. These directional arrows have attracted sufficient attention that another webmaster asked to use them on his site. We agreed, subject to his mentioning their source. The moral of this is that everything you create, even if you do not paste a copyright notice on it, you own. Others, strictly speaking, cannot use it without your permission.

The business of copyright can be, and in our world, is, carried to ridiculous extremes. The more ridiculous can be simply ignored. But fair practice requires that rights of origination be respected. Material on the present site is either (as far as we know) in the public domain, or else permission has been given by the copyright owner. This protocol is especially relevant where the owner of a photograph makes his living by photography.

Examples of Acknowledgement

We cannot give a handbook, in this complex and rapidly changing area, but here are some examples. First is an attributed photograph, where no formal copyright involved and the obligation is one of courtesy (rest your cursor on the photo to see the internal caption):

Ducks on Campus Pond, University of Massachusetts at Amhersrt (Photo Courtesy Yi Feng)

Here is one with a copyright notice, thus preserving the author's rights so that your permitted copy of it does not put his protected work presumptively into the public domain:

Mont Blanc (Photo © Klaus Minges)

And this one, in addition to the copyright notice, also provides (by clicking on the photo) a link back to the original artist's home page.

Ruin of Lion Gate at Mycenae (Photo © 1997 by Leo Curran. Click on picture to visit his Maecenas site)

This extra feature is sometimes requested, and almost always appreciated. But "almost" is still almost, and agreement should be secured before providing such a link. The Project itself was pleased to permit an Arizona statistics class to link, as part of its coursework, to its page on the Poisson Distribution, whose elegant bar graph was given as an example above.

Negotiations

Permission for free use of a copyrighted photo in a nonprofit academic environment, at least in our experience, is often readily given. We have sometimes uploaded a requested picture to give the artist a chance to estimate what the intended result will look like; such borrowings are of course conditional on ultimate approval.

There are also some grouches out there, and some people who simply do not answer E-mail. The only rational policy to adopt is: The hell with them. It's a big pond, and there are more fish in it every day.

Envoi

Taste and tact are your best guides in the two topics treated here. This page is meant to carry you a little further than your unaided taste and tact might go.

Calligraphic Separator

Let it be added that copyright law has always recognized the right of the public as well as that of the originator. There is a term limit on copyright, and there is a fair use area even during the term of a copyright. The rights of artists and authors should be acknowledged, but the areas of public availability also need to be protected. Many asserted copyrights are fraudulent (in modern editions of early 20th century novels, only the new misprints are covered by any late 20th century copyright notice). Fraud should be fearlessly ignored. The rights of the public in the creations of its members, like any other rights, will wither if not used.

Those following this precept are reminded to treat with appropriate tact instances where the rights of the public are successfully asserted against things in whose origination they themselves had a hand.

Back to Web Guide Page

16 Feb 2004 / Contact The Project / Exit to Reference Page