Images & Custom Graphics

Use Images You Have Permission to Use

It is illegal to use photographs without the permission of either the photographer or the owner of the photographs. Obtain permission before an image is posted to your site. If you are interested in a photo owned by University Relations, contact Jane Hart (848-445-1920) for permission.

Keep File Sizes Small

To keep your website functioning normally, keep the file size of images small. A typical web image’s file size ranges from 2KB to 150KB. An image in the megabyte range (say, 2MB), it is too big for the web; it will take a longer time for the user to download, will take up more server space than necessary, and will generally slow down your site.

Use Low-Resolution Images

There is little to no visual difference between a high-resolution image and a low-resolution image on the web. Low-resolution web images, which should be about 72 dpi (dots per inch), also have smaller file sizes. A high-resolution image typically has a dpi of 300 and a larger file size. Use image-editing software to crop and/or resize the width and height of your high-resolution images and bring the resolution amount down. In Photoshop, when you save an image using “Save for Web and Devices” in the “File” menu, you can preview how an image will look in certain file types and compression settings before you save it and give your image a web-appropriate file size.

Don’t Resize Images with HTML

A 2MB image that’s 300 pixels x 400 pixels and is resized with HTML is still a 2MB image. The image quality also tends to appear pixelated and jagged when this method is used. The use of image editing software is the only way to resize an image so that the file size shrinks and its visual quality is retained.

Give Your Photo an “Alt Tag” Text Description

Website software allows you to provide text descriptions—“alt (alternative) tags”—of your images and you will need to take advantage of this function. This is an accessibility consideration and a search engine issue. Some individuals, such as the visually impaired, use text readers that do not display images; rather, the text reader reads the image alt tag to the user so the user learns about images on the site. Alt tags also help search engines lead users to your site. For example, having a page titled “The Life of Colonel Henry” and an image with the alt tag “Colonel Henry” make search engines more likely to bring up your site as a search result for “Colonel Henry.”

Multimedia: Photo Galleries, Video, Audio

Multimedia refers to a combination of photo galleries, slideshows, video, audio, animation, and any other form of content with interactive components. These elements can provide the end user with a more exciting and dynamic web experience, but like with everything, moderation is key. Although it is possible to create a site with lots of bells and whistles, the most effective websites exercise restraint when using these technologies. Many multimedia elements require special programming.

Photo Galleries and Slideshows

Photo galleries and slideshows can use a small amount of space on a webpage to show a collection of images. Captions describing the images frequently are included. A good photo gallery or slideshow will tell a story with strong engaging imagery and will be easy to navigate. Find a good example here.

Online Video

An online video or an archived webcast can be available for people to watch on the web any time. The original video can be digitized as a Windows Media, QuickTime, or Flash Video file and can be viewed with the appropriate player. Increasingly, video is stored on Rutgers’ proliferating YouTube channels. Rutgers Academic Video Services and the Office of Instructional and Research Technology can help with your online video needs.

Webcasting/Live Video Stream

For a live webcast, you need to schedule a video crew to tape your presentation and an organization to provide the streaming services. You will also need a webpage to display the presentation. The video producer will need to know the date and location of your event, number of speakers, and whether PowerPoint or other multimedia will be used in the presentation. Rutgers Academic Video Services can help with your webcasting/streaming video needs.

Audio

An audio file can be downloaded or streamed so that you can share sound bites or music with your audience. If you do not own the copyright to the audio, be sure to get permission from the copyright holder before adding it. Audio is most frequently encoded as an MP3 file. To deliver audio to your audience, you can:

• Create a link to the file directly so that users can download it and play it in their computer’s audio player
• Embed an audio player into your page (with audio players, it is advisable to not have the audio Autostart, and also to provide controls for volume and pausing)
• Provide it as a podcast for users to download

To see an example of how audio can be delivered to your audience, visit Traditional Rutgers Songs.

Podcasting

Podcasting refers to files—usually audio but they can also be video—that a user can capture from your site and upload to a player such as a smart phone or digital music device, like an iPod. Podcasting is often used to store content that comes in a series, such as lectures, workshops, or interviews.

• Rutgers' Equine Science Center podcasts are good examples of the technology.
• Rutgers distributes both public and course-restricted audio and video material on iTunesU.
• Rutgers’ Center for Teaching Advancement and Assessment Research’s podcasting tips and tools can help you get started with podcasting.

Multimedia Workshops

These workshops can get you going with multimedia.

• University Human Resources Professional Development Workshops (Sharing Multimedia on the Web, Podcasting)
• Center for Teaching Advancement and Assessment Research (Podcasting for TAs)