DPP Solutions: Image Optimization For The Web, Part I

First impressions can make or break a photographer. Prospective clients and photo buyers alike who surf the web for interesting photographic work can and will pass judgment on you, for good or bad, in a matter of seconds. While many photographers become absorbed by web design, others look past the essential skill of optimizing images for web-based viewing. Central to any website or online portfolio is having sharp, lightweight and high-impact photographs.

Audience & Target Use
Once you have photographs that are ready to be placed online, consider your audience and identify the target use of your photograph. Evaluating who will be viewing your photography and how your audience might use your online images will drive file preparation choices, including file sizes, sharpening, presentation and watermarking. These basic elements will make the world of difference to your viewers and enable you to make the greatest impact on them.

Here are some other considerations. Will your primary audience be critically evaluating your work, such as for an online portfolio review? Will they be glancing at it quickly, evaluating general impact, such as might be the case with a photo editor reviewing a large set of photographs? Will they be reviewing images in a photographer’s directory as an entrée to viewing your website? Recognizing your audience and understanding how they’re likely to use your online photographs will enable you to optimally prepare your image files.

In Photoshop, you can save individual images sized for the web under the File menu.

File & Image Sizes
While some might subscribe to the philosophy that one size or one format fits all, the reality is that different audience types hold different expectations. For some, how fast a page and its photographs load is the critical factor, in which case, viewing a smaller photo or series of photos will be enough for the viewer to get a feel for a photographer’s work. On the other end of the spectrum, a viewer might be willing to endure a longer load time in order to see larger photographs with greater detail.

The general best practice is to size an image for display on the web between 500 and 900 pixels at the widest or tallest dimension. When determining the dimension size of an image, keep in mind the monitor size of your viewer(s) and the layout design of the web page displaying your photography. In relation to a personal website, one should avoid making viewers scroll horizontally to see an image in its entirety whenever possible. While monitors and their resolution increase in size, it’s a good idea to periodically check your website’s log to track display resolution trends of your site visitors. Tracking such trends will enable you to optimize the display of your work and enhance the user experience of your site.

Similarly, being sensitive to file size in order to minimize load time will improve overall user experience for those viewing your photography whether on a personal website, an online portfolio or a community photo forum. Best practice dictates keeping file sizes low while maintaining enough image quality to avoid degrading the image. While Adobe Photoshop Lightroom enables you to both export files (File > Export) and apply custom presets or bulk export photographs via the Web module, the greatest flexibility in managing an individual file’s size still resides in Photoshop’s Save for Web & Devices function (File > Save for Web & Devices). The Save for Web & Devices function enables you to preview image size as you adjust quality settings prior to the file being saved.

The Photoshop Save for Web & Devices dialog box.

Image sharpness is by default paramount to photography, particularly when it comes to online viewing. Sharpening photographs for online display can be done in a generic fashion via application presets. Alternatively, those with a more discerning eye may want to utilize specific sharpening techniques to selectively sharpen portions of an image. Keep in mind no one technique will look best universally. The key is to experiment and see what looks best to your eye and to your specific photograph.

In Part II in the next issue of Digital Photo Pro, we’ll look at getting images set for final posting on the web by including the appropriate metadata and watermarks.

Leave a Reply