Multimedia

Using Photos & Multimedia on the Web

Used tastefully, photos can add visual interest to your website, making it more compelling, informative, and memorable. These tips will help you use photos appropriately. Note that University Communications and Marketing Photo Services can help you obtain existing and new photography.

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 Communications and Marketing, 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), 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 that is simply 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.

ADD "ALT" AND "TITLE" DESCRIPTIVE TEXT TO YOUR PHOTO

Website software allows you to provide text descriptions—“alt (alternative) and title text”—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 alternative text to the user so the user learns about images on the site. Alternative text 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 alternative text “Colonel Henry” make search engines more likely to bring up your site as a search result for “Colonel Henry.” Some browsers read the alt text, while others read the title text, so be sure to include both.

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. View a good example on the Rutgers–New Brunswick website.

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 MP4 file and can be viewed with the appropriate player. Increasingly, video is stored on Rutgers’ proliferating YouTube channels. Rutgers iTV Studio 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 iTV Studio 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 smartphone 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.

Multimedia Workshops

These workshops can get you going with multimedia.

Where to Store Your Multimedia

It is the responsibility of an individual unit to have sufficient server space for storing multimedia. Options for hosting multimedia include:

  • The unit’s own server
  • Another server within Rutgers
  • An external third-party server on a free commercial site such as YouTube for video, Flickr for still images, or iTunes for audio. This phenomenon, dubbed “cloud computing,” frees your developer from server upgrades and maintenance, storage limitations, and bandwidth considerations, allowing the developer to concentrate on what messages to convey as opposed to how those messages are conveyed.