Processing Digital Images for Web Presentation
April 1st, 2005
Having your images online can help you reach worldwide audiences, whether for the sole purpose of sharing your photos for enjoyment or as a marketing tool for your growing business of nature photography. Participation in an online nature photography community, such as NatureScapes.Net, provides opportunities to post your photos for critique and receive valuable feedback from objective viewers of varying experience levels.
But being faced with exhibiting your images to an online audience for the first time can be nerve-wracking for some. Is the image sized right? Are the colors off? Is it sharp enough, or is it oversharpened? Work to fulfill our photographic vision continues in the digital darkroom and we all want our work to look its best. What are the steps for preparing an image for display on the World Wide Web?
Similar to preparing images for printing, web images require the same tonal adjustments and color correcting, but in the final steps of processing there are different considerations. Each step in the process of preparing a photo for the web is tailored for that particular image, but a basic workflow can be established. The more proficient a photographer becomes with individual tools used in the workflow process, the better the results. Workflows by individuals may vary substantially, but here are some of the basics to get you started. This article is not intended to be a comprehensive workflow for processing your images but rather more of an overview of the basic adjustments often necessary.
The Digital File
The master file is your original image, whether JPEG right out of a digital camera, a camera’s RAW file converted to editable TIFF or JPEG format, or a slide or negative scan. The resolution of this master file will vary depending on the camera or scanning device and the settings used.
A digital SLR shooter capturing RAW images can either convert those RAW images to editable TIFF files or, if the option is available, use a dual-capture JPEG which is sometimes a separate file or an embedded JPEG which can be extracted. There is less latitude with certain adjustments starting with a JPEG, but sometimes skipping the RAW conversion process can be more convenient and is often adequate for a web-sized image. Since TIFF is a lossless format and JPEG is not, photographers shooting in JPEG mode, or using the extracted JPEG from a RAW file, should immediately save their images as TIFF files as a first step in their workflow process. This will prevent any degradation to the image as it is processed and re-saved.
Personally, I prefer to shoot in RAW mode and to process the RAW image into a converted TIFF file using my favorite RAW conversion program, BreezeBrowser (www.breezesys.com) with further processing to be performed in Photoshop. I also prefer to work on all my files in 16 bit mode in order to ensure I am working with the largest possible amount of tonal information which results in smoother color gradation and to prevent posterization. (Note that most submission requirements ask for 8 bit; a conversion can be performed when processing is complete.)
Film shooters can scan their images and save them as 16 bit TIFF files. I recommend scanning at the full resolution capability of the scanner and saving a master file first.
Color Space
Working with your master files in a wide-gamut color space means you will have a wider range of colors available. All my RAW files are converted to TIFF with the Adobe 1998 color space where they stay until an end use specifically requiring a different space. Note that Adobe 1998 is also the preferred color space for most digital printers and stock agencies.
Digital cameras set to capture JPEGs or TIFFs should be sure their cameras are set to shoot in the Adobe1998 (also sometimes referred to as Adobe RGB) color space. There are some color spaces that are wider than Adobe1998 but are often of little benefit since most output devices are unable to render them.
Images to be placed on the web ultimately need to be converted to a different color space upon finalizing the edit process; this is covered later under “Convert profile.”
Layers
I prefer to make all tonal and color adjustments using adjustment layers. This allows me to save my adjustments while still affording me the ability to open the file and change, or even completely undo, any adjustments I have made to the original.
Clean-Up
In a systematic checkerboard pattern I examine the entire image, viewed at 100%, looking for dust spots and removing them using the healing brush with a brush size slightly larger than each spot. The clone tool can also be used but my personal preference is the healing brush, which is new to Photoshop CS. I do all dust spotting on a duplicate layer on my original file in case I make a mistake.
Basic Adjustments
The basic tonal and color adjustments required for a given image can vary greatly from one to another. Most images require some levels adjustments in order to increase dynamic range and adjust contrast and color. This can be done with simple levels adjustment layer or a more targeted curves adjustment. Darker areas in a frame that lack detail might be recoverable using curves, masks or the Shadow/Highlight tool. See the NatureScapes.Net article on Photoshop’s Shadow/Highlight tool.
Elements in the frame that should appear neutral can be sampled for color casts using the info palette and the color sampler tool. A higher RGB value of one color over the others indicates a cast in the higher area. A warm glow from early or late light can be an agreeable cast, but often casts with green or blue are not appealing and may be removed using various methods.
In flat light photo contrast may be lacking; in harsher light contrast might be too high. Color saturation might also need to be reduced or added to create a more lifelike, realistic image. This is particularly true of digital images as they lack the saturation and contrast desired by many nature shooters, especially those fond of highly saturated film emulsions.
Save Again!
After I am satisfied with the major tonal and color adjustments to the image, I will save the file as my “adjusted” master file. The file is saved in the TIFF format with all adjustment layers intact—still in 16 bit mode. At this point, if the “original” is a converted RAW file with no adjustments, it is discarded and replaced with my adjusted master file.
At this step any adjustments that are unique to web presentation take place on a duplicate image.
Cropping
Cropping an image can often help increase the subject size for better web presentation, since the photo is so small on the web to begin with. Due to the relatively small size required for web photos, it is sometimes tempting to crop an image significantly. If you are sharing your photos just for the enjoyment of it, there is nothing wrong with this. However, if you are in the business of selling photos, in print or for stock, web-use only photos have little market value and can appear deceptive relative to your actual, useable portfolio.
Tip: Select the entire image with the crop tool and hold the Shift key down while using the mouse to drag a corner—this will maintain the same aspect ratio of the original file.
Resizing
Possibly one of the least understood aspects of displaying images in electronic format is resizing them properly. Unlike printed output, the only numbers that matter for web presentation are the actual pixel dimensions. When looking at the image size dialog, output size and resolution can be ignored and are only applicable for print output. An image that is 72 pixels per inch (PPI) and 600 pixels wide is exactly the same as one that is 300 PPI and 600 pixels wide and will look the same when displayed on your monitor. Note: The PPI settings do matter when using text. If you have an action to add your copyright, using the same PPI for each image will produce the most consistent results.
Sharpening
Following all other adjustments the image is ready for final sharpening. This important step is often made more critical from downsizing, which results in some loss of sharpness. Sharpening through Photoshop’s “Unsharp Mask” filter (USM) will help correct this.
When sharpening small images without a lot of pixels, such as those for the web, it is best to choose a low radius to minimize sharpening “halos.” My own settings typically do not use a radius higher than .02 or .03, with the amount varying from 100-500%. Often there are areas in an image that require more sharpening than others, in which case, I sharpen in targeted areas. See Tim Grey’s article at NatureScapes.Net for details on sharpening.
Copyright
When placing photos on the web, it is good to consider marking them so the copyright owner is known. The word “Copyright” or symbol “©” followed by the copyright owner’s name is adequate. Done properly, its impact to viewers enjoying the image can be negligible, while at the same time making the photo less appealing for misuse. Transparent watermarks are also easy to do in Photoshop and typically consist of the copyright symbol “©” or a personalized graphic. Find out more about copyrights in Carolyn Wright’s NatureScapes.Net article.
Convert Profile
One of the last steps during the image editing process for web display should be to convert photos to the sRGB color space. While most web browsers do not recognize color profiles, sRGB is designed for the “typical” monitor, so it’s the most appropriate for electronic distribution. Images left in the Adobe 1998 color space will lack color intensity and saturation when viewed on the web.
Tip: Switch your color space in Photoshop to “Monitor RGB” just before your final adjustments are made and you will see the image exactly as it will appear on the Web to your own monitor.
There are variations between every monitor, even when properly calibrated, so viewers of the same image will see slightly different color and brightness. Even sharpness may vary, so keep that in mind. If you have access to multiple monitors, it can be revealing to preview your images on each.
Save for Web
The latest versions of Photoshop include a save option specifically for web output called “Save for Web.” This convenient tool under the File menu allows some options important for web photos. Color shifts noticed in the preview pane may indicate the color profile was not changed to sRGB.
When the Save for Web dialog opens, select “JPEG” as the file type. Selecting “Progressive” means the image will start to show from the top and move downward while opening in browsers, instead of no image showing until the entire photo appears. Selecting “ICC Profile” attaches the sRGB profile to the photo. While this is not a necessary step, in most cases it is still recommended in case a viewer is using a program that recognizes color profiles. Using the small arrow button towards the upper right part of the screen allows optimization of the file; by entering the desired file size and clicking “OK” the program will adjust the quality settings to ensure a file of those specifications. Using “Save for Web” also removes the EXIF data, reducing the overall file size.
With the final version saved, the image processing part is complete and the photo is ready to display! To show up in places like image critique forums, that file must first be hosted by a web server. It can be uploaded to a personal website server and often may be posted to bulletin boards. If a personal website is not available, NatureScapes.Net membership provides an image upload service for easy and convenient upload for hosting on the server to post in NatureScapes.Net’s image forums. Hope to see you there!
Greg has been traveling the world teaching professional and amateur photographers for more than a decade hosting his instructional workshops and seminars. Instructing photographers of all experience levels Greg has earned a reputation for his gracious and generous teaching style.