A Site for Photographers by Photographers

Home > Learn About Photography > Intro to Multimedia

Featured Equipment Deals

Latest Equipment Articles

Sun Position Tracking Apps Read More

Sun Position Tracking Apps

These 5 apps, ranging in price from free to $8.99, are our top picks for tracking sun (and moon) light. Also ranging in complexity, some help you keep tabs on the ideal lighting of the day while...

Latest Learning Articles

Basic Image Development in Lightroom: Color Editing (Video Tutorial) Read More

Basic Image Development in Lightroom: Color Editing (Video Tutorial)

Learn basic HSL (hue, saturation, and luminance) color adjustments as well as split toning (adjusting color in highlights and lowlights) in this next video.


Intro to Multimedia

Multimedia Photography Series by Jay Kinghorn, October 2009 (updated December 2009)


I: Intro to Multimedia | II: Creating Audio Slideshows | III: Rich Media Narratives

In photography, art and technology will always go hand-in-hand. Therefore, what seems like daily changes in technology breadth and depth, will continue to affect how photographers communicate and share their work. Up until recently, print was considered the highest and purest form of photographic art. While prints still retain an aura of mystique and singularity, today they are rarely seen as the first, or even second choice for photographers wishing to share their photos with friends and family. The Web has created a wide variety of new publishing platforms for photographers exploring the Internet as a means for publishing compelling photos, not just a convenient way of displaying static images.

In this, the first of an extended series on the multimedia uses of photography, we will introduce you to the types of multimedia presentations you can create, and give you a handle on key techniques and tools necessary to master this emerging medium.

Let’s begin by taking a look at the various types of multimedia presentations of photography you can find today on the Web. From simple, static galleries found on a photo-sharing site like Photo.net, to complex rich-media narratives incorporating photography, video, audio, text and graphics and engaging, immersive Web sites, photographers today have a dizzying array of publishing opportunities to choose from. In this article, we’ll:

  • Provide you a quick primer on essential multimedia publishing including; posting images to the Web, e-mailing photos to friends and posting photos to your blog or Twitter account.
  • Survey the multimedia landscape, exploring the publishing options available to photographers today.
  • Provide a how-to tutorial on making your photos look their very best on the Web using Photoshop’s Save For Web feature.

Photos on the Web-A quick primer

1. Publishing to an online photo-sharing site

You’re reading this article on photo.net, one of the largest photo sharing sites on the Web with more than 750,000 members contributing photos from all disciplines of photography. Whether you’re contributing to this or any other photo sharing site, you want your photos to look their very best.

Your first step should be to look for the FAQ section of your favorite photo sharing site to look for the recommended image size and file size for their site. Not only will this research spare you the embarrassment of uploading photos too small for the site (making them look pixelated on the Web page), it will prevent you from uploading pictures that are too large, which take longer than necessary to load on the page, or are rejected outright by the site.

For this site, the recommended image size is 800×600 pixels with a maximum file size of 100K. You’ll notice the site doesn’t specify an image resolution. When displaying photos online, the image resolution is irrelevant as the photo always displays at the resolution of the monitor, or device, on which it is being viewed.

Before saving your file, you’ll want to perform a couple of additional steps to obtain the best image quality.

  • Color management on the Web is nowhere near as sophisticated as it is in print. To give your photo a fighting chance of appearing on the Web site as it does on your desktop, convert your photo to the sRGB color space and embed the ICC profile in the image.
  • To protect your copyright against unlawful use of your image, be sure to embed your copyright and contact information in your photo’s metadata.
  • As a final step, sharpen your image for maximum detail and save it in the JPEG format (tutorial below).

For information on converting ICC profiles, please visit Jay Kinghorn’s article A Color Management Primer: Color Settings.

2. E-mailing your photos to friends

We’ve all experienced it, a friend or family member attaches a photo to an e-mail but neglects to resize it properly. After patiently waiting for the photo to download, all that is displayed is the upper left-hand corner of the photo and we’re forced to drag the image into Photoshop just to see it.

When e-mailing photos, common courtesy dictates that you resize your image to fit nicely within your recipient’s e-mail browser window and compress the photo to ensure it downloads quickly. This is particularly true as many people are now reading their e-mail on smartphones which lack the fast download speeds or processing power necessary to view large images.

To play it safe, resize single images to no larger than 800×800 pixels, convert images to the sRGB color space and save them in the JPEG format. For large groups of images, use Zip compression to bundle images into a neat, easy-to-download format or use a file-delivery program like YouSendIt.com or Dropbox, which simplifies file transfer between computers.

3. Posting Photos to Twitter

If you’re using Twitter and wish to link to your photos from within your Twitter feed, TwitPic or TweetPhoto will help you share your images with the world. Neither site has information on recommended image size or file size limits for using the service. The recommendation listed above for posting to Photo.net will serve you well in the Twittersphere as well.

4. Adding Photos to your Blog

If you are a true digital citizen you probably display your photos on all the platforms listed above and have your own blog. If you plan to embed your image within the body of your post, you’ll want to limit the width of your photo to 400 pixels on Blogger and 500 pixels on Wordpress blogs. While it is possible to post larger photos to both platforms, this requires an adjustment to the HTML coding used on the site. To ensure your photos appear correctly on all types of computers (including netbooks and smartphones), your best bet is to stick to the standard size limitations.

Joining the Avant-Garde

For many intrepid photographers today, the Web is a place for their photos to be displayed through interactivity and motion. In this section, I’ll introduce you to the compelling new ways photography is being used on the Web. We’ll begin with the simplest forms of multimedia and quickly progress to the most sophisticated.

Audio slideshows

Audio slideshows are simple to create, but that doesn’t mean the end results are simplistic. By combining an audio track with a series of still photos, you unlock a richness and depth within your photos that makes both the audio and photos stronger than the sum of its parts. Imagine a photo of a weathered cowboy in the West Texas plains. Your environmental portraits of the cowboy showcase the vastness of his range, highlight the lines on his face, and pull you into the details of his life-the roughness of his hands, his worn boots and his belt buckle, won at the local rodeo. Together, these photos communicate a unique picture of this person’s life.

Now imagine those same photos layered with the cowboy describing his life, the openness of the plains, the loneliness of range life and his love for a dying way of life, all told through the rough timbre of his voice.

Together, audio and still photos make a powerful combination. Just look at any of the One in 8 Million series from the New York Times. Photographer Todd Heisler and an interviewer use audio slideshows to create compelling portraits of New Yorkers. The people you brush past on the street every day are revealed through their voice and their mannerisms illuminated by Todd’s environmental portraits.

Here are a few of my favorites from the series, which show the depth of storytelling one can achieve in a relatively short (under three minutes) audio slideshow.

Getting Started with Audio Slideshows

Audio slideshows are a fantastic way for a photographer to begin experimenting with multimedia without spending a lot of money. Aside from your still camera, all you need is a reliable digital audio recorder and a simple slideshow creation application, like Soundbooth, the preferred audio slideshow creation tool for professional photojournalists.

While there isn’t time to delve into a deep discussion on capturing and editing audio, here are a couple of pointers:

  • The quality and placement of the microphone will make or break your audio track. Position the microphone close to the speaker. This will make for a cleaner and clearer audio recording with less background noise.
  • If possible, capture your audio in an uncompressed file format at the highest sample rate (often 44.1kHz or 48kHz).
  • Capture at least 30 seconds of room tone, the ambient sound in the room without anyone speaking. You can use this to smooth over edits in the conversation.
  • Keep quiet—don’t respond verbally to anything the subject says. The common “yeah’s” and “uh-huhs” used to show agreement in normal conversation can ruin a good sound clip because it injects the interviewer into the monologue.
  • Record the sounds of the environment the photographs are taken in. For example, if the cowboy talks about shoeing horses, the metallic ring of the hammer striking the horseshoe and a soft whinny from the horse help enliven the audio track.

For more information on how to record audio for successful audio slideshows, visit Mindy McAdam’s excellent post on learning how to use a digital audio recorder and her recommendations for conducting interviews: http://mindymcadams.com/tojou/2009/rgmp-3-buy-an-audio-recorder-and-learn-to-use-it/. Her article will bring you up to speed on the essential info you need to know to start recording audio and preparing to build audio slideshows. For a tutorial on building audio slideshows in Soundslides, visit:

When building audio slideshows it is important to record and edit the audio first. Your finished audio, or the audio bed as it is sometimes called, determines the storyline for your audio slideshow. Is the overall tone of your story happy, sad, pensive, or frenetic? Your audio will guide your shooting style. The narrative of the audio track will provide you with a checklist of the types of photos you need to include in the slideshow. For example, if our cowboy describes the expansiveness of the sky out on the plains, it would make sense to pair that section of audio with a stunning landscape showing the land as a mere sliver against an immense sky. If he talks about the saddle he won at the rodeo and uses every day, you’ll want to pair that image with the audio as well.

So, now that you have your completed your audio, shoot the photos to flesh out your story. Once that step is completed, you’re ready to produce your audio slideshow.

Producing Audio Slideshows

Fortunately, the production of audio slideshows is easy once you’ve selected your audio and photos. Audio slideshow creation tools like FotoMagico (Mac), ProShow Gold (Win) or Soundslides (Mac and Win) automatically perform much of the hard work involved in producing and publishing audio sideshows. My favorite application for producing audio slideshows is Soundslides. It’s fast, easy to use and produces beautiful, Web-ready slideshows.

When creating your slideshow, set your initial timing for each slide around 3 seconds, as a starting point. Next, adjust the duration of each slide to match the pace and specifics of the narration. Generally speaking, you’ll want to select longer durations for photos with complex compositions and lots for the viewer to absorb. You can usually shorten the duration for less detailed images or simple compositions. Varying the pace of the slideshow holds viewer interest. Aim to limit your finished production to two minutes or less, as this seems to be the ideal length for most online presentations; it’s long enough to provide good content, but short enough to keep your viewers thoroughly engaged.

When exporting and publishing your final slideshow, you’ll get the best results publishing to the Flash Video (FLV) format. Flash video has the broadest, cross-platform support among Web browsers, (though not currently on the iPhone). A close second is the Quick Time Movie (.mov) format (supported on the iPhone), which can be distributed through the iTunes store and can be viewed on both Mac and PC platforms using the QuickTime plugin (free). A distant third is the Windows Media Viewer (.WMV format which has limited support on the Mac platform and often yields inferior quality to the other two formats.)

Creating audio slideshows is a fantastic gateway to developing your photojournalism and multimedia skills. Instead of trying to tell a story using a single picture, you’re forced to think in terms of a sequence and develop your story clearly, with a beginning, middle and end. These are all valuable tools, should you decide to venture forth into more complex multimedia presentations.

Rich Media Narratives

Should you decide to add video, graphics and more complex transitions to your audio slideshows, you’ll be creating rich media narratives. Built in a full-featured video editing application like Final Cut Express (Mac), Adobe Premiere Elements (Win), Final Cut Pro (Mac), Sony Vegas (Win), or Adobe Premiere Pro (Mac & Win), rich media narratives allow you to tell your story using the full range of video and film editing techniques and publish your finished work in a variety of formats.

The greatest advantages of rich media narratives, flexibility and customization, is also their most significant downside. For many photographers, learning a full suite of video, audio and graphics editing tools can be a bit daunting. For those who are technically inclined and enjoy learning new applications, working with these powerful tools can be intoxicating. For those who prefer to keep things simple, there is a lot to be said for mastering the audio slideshow or collaborating with a video editor who can assist with the technical issues involved in creating your masterpiece.

Here are a few of my favorite rich media narratives.

Immersive Web Sites

A few Web sites combine multimedia content with interactive, immersive navigation to provide a deeper, more engaging experience that feels very unlike most traditional Web pages. With Immersive Web sites, one navigates into, not through, the site discovering the site’s content along the way. These sites require cutting-edge Web programming skills and a strong multimedia background. Although these sites today are rare, and even these two examples are a bit peculiar in their presentation of information, they point toward what the Web experience might become in several years.

Recommendations for shooting for multimedia and the small screen

Hopefully, these examples have whet your appetite for exploring the world of multimedia. To help you achieve quick success I’ve compiled a few quick tips to help you along the road.

  • Create a story: Multimedia requires you to think more carefully about what you aim to communicate with your photography. Write it down, create a short storyboard and allow yourself the time to gather all the sound and photos you need to tell your story.
  • Compose simply: Multimedia is viewed more quickly, and in a smaller format than a printed photo. Your viewer simply doesn’t have enough time, or enough information, to look carefully at the hidden nuances in your photos. You’re often better telling a portion of your story in several photos rather than trying to capture one image to say it all.
  • Capture in bursts: To show motion, movement and energy, add a couple of quick photo bursts to your presentation. It speeds up the flow of the slideshow and gives your viewer the sense of watching a short video clip.
  • Aim for a consistent theme: In post production, it can be tempting to experiment with every Photoshop technique in your bag of tricks. Resist. Pick one artistic theme and stick with it. Mixing color, black and white and sepia pictures in the same presentation is sure to confuse your viewer.

For more sage advice on shooting, producing and publishing multimedia presentations, check out these two articles from MediaStorm.org:

First Learn Just One Thing

After surveying the landscape of multimedia possibilities available to photographers today, you may feel a little daunted and overwhelmed by the scope and complexity of these multimedia projects. Fear not, mastering even the most difficult skills is just the result of learning a series of smaller, manageable steps.

As your first lesson, considering mastering one of the most essential, yet overlooked, multimedia skills, compressing a JPEG file for quicker downloading while preserving image quality by using the Save For Web feature in Adobe Photoshop.

As you already know, JPEG files use an intelligent compression method to reduce file size. The amount of compression applied to the file is determined by the JPEG quality setting. A higher Quality setting results in better image quality and a larger file size. A lower Quality setting makes for small file sizes, but often degrades the quality of the image severely. The trick is to find the sweet spot between compression and image quality.

Note: This technique is most useful when preparing individual JPEG images that won’t be incorporated into additional projects and recompressed (e.g. a Soundslides Audio Slideshow). You want to be careful to avoid applying compression to images repeatedly as it will degrade image quality. For images you plan to incorporate into other projects, save your JPEG file at the highest Quality setting.

With your image open in Photoshop, begin preparing your photo for Web delivery by resizing it using the Image Size command (Image > Image Size). Set the long dimension in your photo to 800 pixels. Although you can resize images in the Save For Web (SFW) dialog box, it isn’t designed to work with full-resolution images.

Access the SFW command under the file menu (File > Save For Web and Devices). The default view is 2-up, which compares your original image against a compressed version. In the 4-up mode, your original is compared with three compressed versions, each at different compression settings. For most files the 2-up view is sufficient. Use the Hand Tool to reposition the view to an important area within the image.

Take a moment to look for a thin blue line around one of the previews. This line indicates the active view and is adjusted by the controls on the right side of the SFW dialog. Click on the lower image to make it the active image. This allows you to preserve the original, uncompressed image on the top, for comparison with the compressed image below.

On the right side, select the JPEG High option from the Preset pull-down menu. This gives you a good baseline for beginning your adjustments. Below the compressed image preview is listed the estimated file size of the compressed image.

Perform a quick comparison between the original image on top and the compressed image below. Look at the sharpness of key details. Have they softened or become jagged? Look at areas of smooth tone or color. Are there unnatural or abrupt transitions? Do these areas appear waxy?

If you’ve answered yes to any of these questions, you should increase the Quality setting using the slider in the upper-right portion of the SFW dialog. Otherwise, begin decreasing the slider until these problems begin to appear, then increase the Quality setting just beyond the threshold where these problems are visible. Adjust the Quality setting up and down while watching the file size indicator in the lower left corner. Often a change of one or two on the Quality scale will have a significant difference in the file size due to the way the JPEG compression works. Should you reach a point where decreasing the Quality setting further only minimally affects the file size, use the higher Quality setting since the trade-off in file size is minimal.

Once you’ve established your Quality setting, check the Embed Color profile and Convert to sRGB options in the upper right corner of the dialog. Converting your photo to the sRGB color space helps it appear more consistent across computers and Web browsers. Embedding the color profile improves consistency in color managed Web browsers like Apple’s Safari browser.

Note: The options listed here will differ with older versions of Photoshop. The Save for Web command has changed frequently over the past several years to accommodate new features and to eliminate problems in metadata and color handling.

From the Metadata pull down menu, select the metadata fields you’d like embedded in your finished file. I recommend embedding at least your copyright and contact information. For most images, however, I opt to embed all metadata. The increase in file size is minimal and ensures your caption, keyword, copyright and contact information travels with your photos.

The very last step is to press Save to save a copy of your original image, with your JPEG compression settings in the JPEG format.

Conclusion

The Internet has enabled a wide range of opportunities for photographers to publish both still and moving images. As these new mediums evolve, photographers will push the envelope of photography to entertain, inform and inspire. I hope this article offered you a glimpse into the potential multimedia brings to you as a tool for following your creative impulses.

More

About the Author

Jay Kinghorn is an Adobe Photoshop Certified Expert, Olympus Visionary photographer and full-time digital workflow consultant and trainer. He specializes in helping corporations use their photos efficiently and effectively by streamlining workflow processes and improving employee’s skills using Adobe Photoshop. Jay is co-author of Perfect Digital Photography and author of two Photoshop training DVDs, Photoshop CS3 New Feature Training and Beginning Photoshop for Digital Photographers. Jay lectures and presents to businesses and universities internationally. His presentations focus on digital photography workflows, color management, image optimization and the future of photography. His clients include Olympus, Sony, Adobe, Cabela’s, Vail Resorts and the Rocky Mountain News. Jay is often found climbing the rock walls, running the trails or scaling the mountains near his home in Boulder, Colorado. More »


Text ©2009 Jay Kinghorn.

Article revised December 2009.

Readers' Comments


Add a comment



Benjamin Seaman , October 20, 2009; 05:20 A.M.

Just wanted to add another example of a really pretty amazing immersive website. A lot of you will probably know it already. www.ashesandsnow.org For those who don't yet know it - be careful not to lose yourself for hours in there!

Carl Sanders , August 05, 2010; 03:29 P.M.

Fabulous and interesting content, though multimedia photography also covers Quick Time Virtual Reality and animated stills which are being used. Really pleased to see this article as it adds to and highlights what we take for granted in computing and the photographic medium.  I lecture in photography and multimedia in London, England and it is of interest to note the expression, Multimedia photography, wonderful!  


Add a comment



Notify me of comments