Given the wave of great automatic digital cameras, it would appear easy to produce great Web images. But actually getting from here – good images in the digital camera; to there, great images on your Web pages can present some non-trivial and vexing problems. Here are 3 general problems:
1)On the web, image size still matters. For close to 15 years, JPEG compression has remained the standard for minimum size of image for best viewing. There have been only marginal improvements on the boundaries – better black+white image compression plus wider color gamut for several image standards. But JPEG2000, which does improve compression by 15-35% depending on the image, got kneecapped by Microsoft with a competing WMP compression entry. But neither has gained traction in the market. So an image of 4MPixels is tops for splash images and 1-2Mpixels for standard images is the upper limits for websites. Otherwise performance drags or an image just takes up too much precious web space.
2)Video technology has taken a competitive leadership position with rapid improvements in compression technology, better audio accompaniment, and strong acceptance among free delivery sources such as YouTube, Vimeo and others. It is almost as easy to add video to your website or blog as to add images. If an image is worth a 1000 words; then a video is worth 1000 picture frames plus sound plus now 3D delivery. Video is on Web technology’s front burner, imaging is important but not at the top of the innovation heap. And for many Websites taking a still from a video is more than adequate – especially HD video images.
3)Some image problems remain intractable with no elegant solutions. If a shot is blurred or overexposed, there is not much that can be done to improve the images. Sharpening technology to correct for blurs quickly introduces unacceptable noise and contrast into an image. Likewise, an overexposed shot leaves blank or great deserts of white pixels for which recovery is marginal at best. In contrast, shots that are underexposed or colorcast [white balance is severely off], can be readily corrected with most photo-editors.
Yes, good cameras do reduce the number of picture problems for web-intended images. Exposures generally are better with auto-focus systems reducing blurred shots; auto white balance reducing colorcasts; and fill flash fixes many exposure and colorcast problems But image takers may be relying too much on their digital cameras picture taking prowess. As a judge at the Lenzr.com photo contests, ye Editor found quite a few shots in which elementary exposure, colorcast, or composition errors were simply not corrected. The following slideshow examines 8 common photo errors and why they crop up, even for pro-shooters:
Just click on the slide above to see the next one in this 13 slide presentation.
The key message of the presentation is that many photo errors are fixable – and there are many free and and commercial editors that are equal to the task. If you do lots of web image work, you may want to consider getting a Pro tool like Photoshop whose many thoughtful features just make editing so much easier. But be warned there is more than a big dollar price to pay; but also a formidable learning curve for Photoshop as well. So some readers may want to take a free trial and error using one of the free editors which the slide presentation above provides all the info for.
Fixing Your Web Images
There is an order to repairing/fixing your images. First, colorcast and exposure errors are fixed to provide a good view of what straightening and touch up work are required where valuable image pixels may be lost. As well exposure fixes often mollify the need for pronounced sharpening as the contrast and saturation also increase sharpness. Finally, if users are planning a smoothed or smart softening look then having the exposure right is for these adjustments.
Colorcast can be fixed with the Curves or Levels tools. In free ArtWeaver program Levels has been used:
Note the white dropper icon just below the Auto button was clcked on where the table cloth should be white and click the blue colocast disaapeared while the other colors returned to true. Again the Curves tool with its white icon could [and maybe should have been used ]as slight adjustments to the exposure in Curves are in order. But the key point is the colorcast is largely corrected with one mouse click. Note all of the photo editors covered in the slide presentation have both Curves and Levels tools.
To illustrate the last point, the Levels tool in Corel PaintShop Pro is used to correct an underexposure:
As noted, Level here works almost like a fill flash bringing the image out of the shadows. To refine the exposure PaintShop Pro has Curves and Vibrancy tools to make the adjustment. Aagain a quick click on the Levels button just below the Color button in the panel brought the correction close then a final adjustment of the diamond white and greay sliders below the histogram completed the fix. Anybody familiar with the early years of photo editing using just the brightness and Contrast controls on carefully masked areas will know how much easier this is. When you have 2 dozen web images to correct, time savings like this are truly appreciated.
Now that the image can be seen properly, touch ups to remove distracting element or image blemishes plus straightening the image can be done before cropping or resizing the image. In fact in this case, the plan is to remove the distracting white camera flash unit in the lower left of the picture by cropping it out. As for straightening – there is no need in this image but the technique is demoed in another shot in which we use the Fastone Image Viewer:
As can be seen in the above screenshot’s After preview, pixels are lost along the outside of the image during the straightening process. So this is why straightening generally proceeds cropping – you may need the extra pixels. Note also that the exposure and sharpness of the image are affected minimally. Not all photo editors have a convenient Straighten tool [including Photoshop], so users may have to resort to trial and error with the Rotate command which is universally available among the photo editors mentioned in this post.
The next step depends on the needs of the image. If sharpening is required then do this before cropping or resizing down. During resizing down the image naturally sharpens. So sharpen then resize down using trial and error to find the best combination. The following demonstrates the mixed results that large scale sharpening tends to deliver. The example uses Smart Sharpen from Adobe Photoshop:
As you can see the blurred image is sharpened notably but at the repeated trial and error atempts plus the image cost of higher contrast and noise. Using smoothing and downsizing the image will improve its look somewhat but the results are sub-optimal and the time and effort quickly become marginal. So avoid blurred hots as much as possible.
Now Polishing Yor Web Images
The next to last stage in Web Image photo editing is to crop and/or resize. Remember the size rule. Web page images over 1Mpixels or 1000 x 1000 in size should be reserved for special splash images -1 or 2 per page. Otherwise they take up too much space and slow down pageload times except perhaps for the best 4G connections. For example the presentation above has 8 images none off which is greater than 700 x 700 in size. Yet on a good 3G connections it takes 3-5 seconds to load. On a poor conection 6-12 seconds or more.
Again cropping precedes resizing to insure there are enough pixels for the following resize. Also cropping is an art. It is the final opportunity for photo composition. There is a whole theory of Graphic Aesthetics based on a series of design rules. But these design standards have a basis in perceptual psychology – these are design patterns which follow the underlying perceptual pattern used by the eyes and brain in discerning and making sense of a scene or image. This chart from Power Retouch outlines the basic patterns seen in The Power of Limits: Proportional Harmonies
Your cropping of an image is your design signature – how you want to direct attention to each image that you use on a web page or complete site. Of course the images are embedded in an overall Website design and the focus has to be the subject[s] of your image. But it is during the original picture taking and then in cropping the image that you get to put your final photo composition and styling before your audience. Fortunately, all of the photo editors have good cropping tools. Here is Photoscape in action:
Note that despite the extreme cropping, there was still image size to spare as the image size to be used was 450 pixels in width and this crop was to 500 pixels. This is from an original that is 2560 x 1920 or 5Mpixels. So clearly Web images allow for much “zooming in” so the focus can be put on the subject of the image – in this case the cattle roper and not the people in the stands.
Some Photo Editors like Adobe Photoshop and Corel PaintShop Pro have crammed multiple functionality into their cropping tool. In the case of Corel PaintShop Pro:
there are three added functions. First, a grid for the design rule of thirds is projected onto the crop which is very helpful. Second, the crop grid can be rotated so image straightening can be done at crop time. Finally, the image can be also resized as it is cropped. These added features increase your efficiency which is very useful when doing dozens of final image edits. Also it is important to note that even if the photo editor does not have a resize option for cropping, all of the photo editors discussed here do have a separate Resize command available.
The last group of photo editing commands in your workflow are ones that do not steal away pixels like cropping and straightening – smoothing, blurring, hue/saturation changing, and local dodging/lightening or burning/darkening of areas on the image. Here is an example of saturation change using Photo Pos Pro editor:
Adding color polish to your image
Too many photos are left with a gray “dust” over the whole shot where as hint of extra color would add punch. But be careful here, too much and an image can become tawdry and overpainted. Use a mask to add selective vibrancy to the subject of interest.
At this point in the photo edit workflow, graphic programs help users to add polish and touches of creative flare to their images. Even the venerable NYTimes is catching the spirit -with a recent article devoted to only a fraction of the filters and special effects available to desktop photo editors. Hey these filters have been available for 15 years, many are free [see our coverage of 5 of the great set of 28 free Mehdi filters] and they do indeed lend some truly creative opportunities for expression to photo editors. Here is just a partial list of opportunities which shall be covered in detail over the next few months:
1)Selective darkening and lightening areas of an image using masks;
2)Adding deliberate blur or softness to off-focus areas of the picture to add attention to the in-focus elements;
3)Using smoothing and smart blur to reduce the noise and/or rough texture selectively in an image;
4)Using a touch of color where most of the image become black and white or tinted but with small tinges of color to highlight other parts of the image;
5)Add in mood to an image with areas of misty softness mingled with sharp features;
6)Using a warping filter to add an unexpected but amusing twist to a shot; making the familiar creatively strange again;
7)Using artistic brush filters to suggest a comic book styling or an daubs of an impressionistic painting;
8)Emphasizing the lines and edges of an image to add a dramatic styling;
9)Adding islands of deliberate, yet fading symmetry within a shot;
10)Adding a provocative border to a shot that directs attention to elements within the image.
In general, adding polish to your images can add fun to your site.
Summary
This 5 – 8 step web image improvement workflow just outlined can appear to be tedious and time consuming. Not to worry. Most of your shots will require 1-3 steps. Most often these are cropping+resizing and exposure adjustments that can be done quickly or even be automated with wizards available in free tools like Fastone and Photoscape or more capable scripting tools in Corel PaintShop Pro and Adobe Photoshop. Remember you and your digital camera are truly reducing the amount of photo editing required to prep your images for the Web. What this post has done is to a)suggest that for most picture problems there are simple and quick solutions , b)outline an effective image-correction workflow when several adjustments are required, and c)suggest a number of very good photo-editing tools[see the slideshow presentation above] both free and commercial. If you live in the SouthEastern Ontario and would like to attend free lecture on this and other Web and photo processing tasks, join us at the Cobourg Public Library on the 2nd and 4th Wednesday of each month. See here for details.