Tech Alive Support

Creating a Module - General: Images

Embedding Images

To embed an image, do Image > From My Computer... and browse to the location of the image on your computer. You will be prompted for an Alt Text Description of the image. Aim for accuracy. The Alt Text can have spaces.

You may be able to drag and drop images or copy and paste images from other applications, from a web browser, and from other applications. If this doesn't work, just save the image to your computer and and use the Image menu to find it.

Upon Publishing, a copy of the image will be uploaded and placed in a subfolder called "images".

Image Thumbnails

You can have a small image, or thumbnail, link to a larger image. Create both versions of the image in a photo editor and give them different names. Embed the small image in the web page. Select the small image and do Link > File on My Computer... and browse to the larger version of the image. When the visitor clicks on the thumbnail, the large image will load by itself in the browser (click to enlarge).

Buttons

A button is just a thumbnail image that links to another page or document. It's common practice to link a company logo to its home page from each web page. Buttons can also be used to navigate to next and previous pages in a sequence, or to open documents and rich media.

More Information

Image Size

An embedded image can be resized by dragging the selection handles. It is good practice, however, to begin with an image which is approximately the right display size. Crop or resize the image in a photo editor before adding it to the web page. Contact Tech Alive staff for assistance if you need it.

Image size is characterized by its file size and its dimensions.

• A large image file size might be over 150 kb.
• A large image dimension might be over 500 pixels x 500 pixels at 72 dpi (web resolution).

Resizing an image inside of Contribute does not change the file size, only the display dimensions. If you create a small display version, the entire file size still has to load for the visitor. To optimize the visitor experience, create thumbnails linking to large images instead of resizing the image within the web editor.

For the boat example above, the thumbnail is 110 x 77 pixels of file size 6 kb. It links to an image of dimensions 367 x 256 pixels of file size 37 kb.

Copyright

As with all materials, be sure that you have permission to use an image before adding it. Contact Tech Alive staff for help on obtaining permissions.

Return to Top