Creating Web Images

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, hazy 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.

Raspberry Knoll Farm

2. Sharpen. Sharpening the chaotic textures of raspberry vines causes some horizontal and vertical "linelets" that are apparent in the next few steps.

Initial Sharpening

3. Crop to de-emphasize utility poles, eliminate farm house, and emphasize the red row signs that identify the various raspberry varieties.

Cropping

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.

Semitransparent Bucket Fill

 
5. Adjust color values to improve readability.

Adjusting Color Values

 
6. Selectively sharpen grass and interesting foreground objects.

Selective Sharpening

 
7. De-emphasize Hurricane Irene's effect by making damaged leaves greener.

Deemphasizing Hurricane Irene

8. Apply a general-purpose readability filter, Gimp's "National Geographic" plugin. Also apply selective half-pixel blurring to remove linelets.

Applying National Geographic Filter

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.

Coriander Cafe & General Store

 
2. Rotate so that the man leans more towards the woman and so that the umbrella poll is more vertical.

Definition of 'vertical'

 
3. Crop to emphasize umbrella, people, food, and table.

Cropped image

 
4. Extrapolate upper left corner to avoid cropping the umbrella.

Top left corner filled

 
5. Blur background and wash with a warm gray bucket fill; sharpen foreground.

Foreground emphasized

 
6. Adjust color values to improve readability.

Values Adjusted

 
7. Lighten skin color to correct for back lighting of subjects.

Lightened Skin Tones

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.

Final touches

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.

About PageNotes

My biographies are here and here.
This entry was posted in Uncategorized, Web Design. Bookmark the permalink.

2 Responses to Creating Web Images

  1. Horacio says:

    Really enjoy the fresh appear. I really enjoyed this content. Thanks a lot for your good page.

  2. Thank you for the sensible critique. Me and my neighbor were just preparing to do some research on this. We got a grab a book from our area library but I think I learned more from this post. I’m very glad to see such great information being shared freely out there.