Several limitations on web images combine to produce unappealing results. The most stringent is pixel density
. Images displayed on a traditional monitor have 96 pixels per inch, no matter how many mega-pixels were delivered by the camera they came from. This constraint is very different from print photography, where pixel densities are usually at least 300 DPI. (Loosely put, dots per inch equals pixels per inch.)
By the time a picture is rendered in a web browser, there has been a reduction in pixel density, which normally involves pixel averaging, resulting in a slightly blurred
image. Typically, the web version of the image is saved using a default jpg compression of 85%, resulting in major loss of information and the introduction of jpg artifacts
; these are most noticeable at the edges of flat surfaces, as around a window molding. A camera with a high megapixel rating may deliver good jpeg images despite information loss, but this defeats jpeg’s mission of delivering small file sizes. Websites that upload images often perform automated resizing
, with significant loss of quality. So it pays avoid such processing by uploading a pre‑cropped, pre-sized photo. In some cases, the expected size is well advertized, as in the case of a standard 512 px X 400 px real estate photo. In others, the best way to find out is to take a screen capture of an already posted image.
Beyond web constraints, there is the fact that cameras and people see differently, and most of what goes up on the web isn’t coming from professional photographers. People know that buildings have vertical, parallel walls
. Cameras don’t; inside shots taken at eye-level have walls that jut outward towards the ceiling. The eye automatically adjusts light and shadow
to achieve an easily understood image. Cameras don’t; outside shots on a sunny day may have deep unreadable shadows
. People automatically de-emphasize distractions of little interest
. Cameras don’t, accentuating power lines and other clutter. Indoor shots are commonly taken with macro lenses
that tend to scatter light, leaving a thin gray film on the image. They also tend to cause “fish eye” barrel distortion
Happily, most of the above problems are readily addressed using modern image editors. The exception is jpeg artifacts whose removal is difficult at best. For this and other reasons, it is much better to start with originals images that have high pixel densities. And when saving images in jpeg format, use the highest available quality setting. Better yet, use .png encodings.
My work on a photo of the raspberry field at Raspberry Knoll Farm illustrates many of the above ideas. Mouse over the numbers below the photos to see the progression from initial shot to final image. All photos are presented at a standard height of 153 px regardless of actual photo size.
1. Original photo taken with an 8 megapixel Cannon Power Shot.
2. Sharpen. Sharpening the chaotic textures of raspberry vines causes some horizontal and vertical "linelets" that are apparent in the next few steps.
3. Crop to de-emphasize utility poles, eliminate farm house, and emphasize the red row signs that identify the various raspberry varieties.
4. Apply a semitransparent dark green bucket fill to background trees in order to de‑emphasize a road sign and further deemphasize electric polls and lines.
5. Adjust color values to improve readability.
6. Selectively sharpen grass and interesting foreground objects.
7. De-emphasize Hurricane Irene's effect by making damaged leaves greener.
8. Apply a general-purpose readability filter, Gimp's "National Geographic" plugin. Also apply selective half-pixel blurring to remove linelets.
1 2 3 4 5 6 7 8
Another example is provided by a photo taken at the Coriander Cafe & Country Store in Eastford, Connecticut. All images are presented at a height of 423 px regardless of actual size.
1. Original photo taken with an 8 megapixel Cannon Power Shot. The photo was taken from above, so vertical lines jut outward at the top.
2. Rotate so that the man leans more towards the woman and so that the umbrella poll is more vertical.
3. Crop to emphasize umbrella, people, food, and table.
4. Extrapolate upper left corner to avoid cropping the umbrella.
5. Blur background and wash with a warm gray bucket fill; sharpen foreground.
6. Adjust color values to improve readability.
7. Lighten skin color to correct for back lighting of subjects.
8. Clarify gold umbrella trim, apply sheer transformation to house columns, recede car and post caps, smooth left table edge, sharpen subjects' hair and foreground.
1 2 3 4 5 6 7 8
I'm using the above finished images in my real estate web business, selling my home neighborhood of Chaplin Connecticut in the article Chaplin's Neighborhood.