Adding images

Please Note: You need elevated privileges to upload files (including graphics) to our system. This is a security measure to protect the site against malicious attack by unknown parties. If you would like these privileges, please contact the webmaster with a short request, including your intended uses of this site.

Here’s how to insert images into your web pages. First, either edit an existing page, or create a new web page (see “A Primer on Creating Web Pages” if you don’t know how to do this.) Next you must upload your image files using the attachments dialog box (see image upper-right).

Click “Choose File” to select a file to upload. [Note: this button may be labled “Browse” or something similar, depending on your browser.] Then click “Attach” to mark the file for uploading. (It won’t actually be uploaded until you submit the page for publication.) Repeat this two-step process if you wish to upload more than one file or image. The image below shows the dialog with some files attached.

Notice the “List” checkbox? That’s to display a list of downloadable files in an attachments box at the end of your page. It would look something like this:

You probably don’t want your image files to be listed like that on the page, so uncheck those checkboxes for your image files. You will want leave them checked only for files you explicitly wish to make available for download (e.g. a PDF file). Please see the Attaching Files for Download FAQ page for details.

If you mark for upload a file which you later decide you’d really rather omit, check the “Delete” checkbox. The file will be removed when you “save” the page.

Displaying images

Once you have uploaded your image files, you still need to display them. Ultimately, this is done with the HTML image tag (<img src…>). There are two different methods to insert the tag:

1. If you don’t know HTML, can use the Rich Text editor and probably avoid learning how to use HTML image tags. It provides a GUI interface which hides the HTML code from you. Start the editor, and click on the graphic icon. The controls are relatively straightforward. We have not yet written a FAQ page describing this, however we do have this brief synopsis.
2. Here’s how to do things the HTML way.

File size is very important!

Unless your images are small, around 20K or less, you should ensure they aren’t displayed in the teaser (i.e. the “Preview” or “Summary” section). This is can slow down the home page. It also causes problems for users with slow InterNet connections.

Factors which might inflate file sizes include image resolution and file format. For the web, 72 DPI (dots per inch) is sufficient resolution. And the JPEG format generally produces the smallest file sizes, especially for photographs. One often has an option to reduce the file size when saving JPEG images, albeit at some loss of quality. However the quality loss isn’t always noticeable. GIF is intended for line art and may produce smaller sizes in that application. Since JPEG patent issues have gone away, there’s no longer a compelling reason to use the PNG format.

Also – and this is very important – it's generally a bad idea to use width & height parameters in the image tag (<img src…>) to resize a graphic, especially if the change is significant. A rookie mistake is to upload a large sized image, reduce its size via the image tag, and think that that reduces the image on the server. It doesn’t. While that displays the image at the desired size, the reduction is done on the fly in the browser, and that creates a whole host of problems, from placing more demands on the web server, as well as the web surfer’s client machine, and it consumes precious bandwidth. An analogy would be to load all the contents of your refrigerator into ice chests, lug those heavy chests to the park, only to eat a couple sandwiches. You wouldn’t do that. You'd just make the sandwiches at home, and take along only what is needed.

Oversized images can easily be 50 or more times larger than necessary. That wastes space on the server, causes the server to work harder to deliver the image to the client (user), chokes bandwidth for both the server and client, and slows things down significantly for the client. Not only does it take longer to download the image, the browser must spend time and resources to reduce the image size to what it should have been in the first place. If the user has a slow internet connection, is low on memory, has a slow CPU, or is using a mobile device like a phone or tablet, this can really slow things down considerably.

In virtually all situations, the width & height parameters in the image tag should reflect the actual size of the image itself; they shouldn’t be used to resize images. If the image needs resizing, this should be done before uploading to the server. It is better to omit these parameters from the image tag if you don’t fully understand their purpose (which is basically to help the browser to render the page more quickly, not resize the images on the fly).

Thumbnail images

There may be some situations where you might want to make a larger size or higher resolution image available. Generally, any time the file size would be 200K or larger, it’s probably best to provide a small thumbnail image, with a link to the larger image (like you see here on the right). That way the user can see the larger image by clicking on the thumbnail. To do that, you’d upload two images, a small thumbnail and a larger full size one. You’d put the thumbnail in your <img src…> tag. Typically, you’d encase that inside a <a href…> tag, linking to the full size image.

Don’t forget the “alt” text

One often omitted item is text in the “alt” parameter of the <img src…> tag. It's important to include text which describes the image. This is useful for the blind, who can’t view the image, but who may be using text-to-voice software to hear a description of the graphic. Omitting a description is the equivalent of letting a door slam shut in the face of the blind. Most people wouldn't intentionally do that. The text is useful in other situations too, such as when the browser doesn’t automatically render the image, or as a placeholder while the browser is loading the image. The thumbnail here has this description in the alt parameter: “Photo of a burgundy tinged sunflower against a blue sky.”