Optimizing photographs for display on the web is as essential as ever. While many photographers focus attention on optimizing photographs for print, it’s important to recognize how powerful first impressions can be with web-based photographs. Whether preparing photographs for inclusion in a web portfolio, to share in online community forums or for someone to review via e-mail, photo optimization for the web is a critical skill to master.
In the first part of our Web Optimization series, we’ll look at determining the audience and the target use of the images, as well as how to establish the proper size for files.
Audience & Target Use
Once you have a photograph that’s ready to be placed online, consider your audience and identify the target use of your photograph. Evaluating who will view your photography and how your audience might use your online images will drive file preparation choices, including files size, sharpening, presentation and watermarking. These basic considerations will make the world of difference to your viewers and enable you to make the greatest impact on them.
Questions to consider include: Will your primary audience critically evaluate your work, such as for an online portfolio review? Will they glance at it quickly, evaluating general impact, such as might be the case with a photo editor reviewing a large set of photographs? Will they forward your work to others as might be the case with fans of your photography?
Recognizing your audience and understanding how they’re likely to use your online photographs will enable you to optimally prepare your image files.
File & Image Size
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, in an online portfolio or in 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.
|Online Display Mediums
||Maximum Dimension In Pixels (px)||Maximum File Size In Kilobytes (KB)|
|Blogs||≤ 550 px||< 90 KB|
|Photo Forums||≤ 850 px||< 350 KB|
|Flash Portfolios||≤ 950 px||< 275 KB|
|Private Image Portfolios||≤ 950 px||< 325 KB|
Look for Part II of this series in the next issue of Outdoor Photographer.