Using images effectively in web pages means looking at some principles that have been known in print media for many years…
Images and artwork included in web pages must meet the same criteria as any other element of a web page – it needs to earn its place.
Illustrative art can serve one or more function, such as:
- Creating a mood
- Decorating and breaking up a body of text
- Amplifying or explaining the content
- Filling space and providing a balanced look
- Adding emphasis to a heading or feature
Adding impact to images is often done by cropping them into unusual shapes, such as triangles, circles, ovals and freeform shapes. The downside of such techniques is that it can draw undue attention to the shape of the image rather than its content.
Using unusual shapes draws undue attention to the image particularly where the content of the image is not key to the overall purpose of the containing web page.
Accepted in print media of all kinds is the concept that very little beats a square or rectangular image. For impact and emphasis, images can be cropped into wide or tall rectangles.
Where added impact is needed, silhouetted or outlined images are a powerful and increasingly common technique perhaps even becoming one of the current web design cliches.
Distinct from the arbitrarily shaped image, a cut out silhouette image is shaped to fit the subject – or part of the subject. It emphasises the shape and content of the image, rather than conflicting with it or obscuring it.
Where the balance of a page is affected by an image that appears to ‘point’ the wrong way, it may be worth considering flipping an image so that it is directed in the opposite direction.
Whilst this may solve the problems with the “shape” of the page, and the flow of the viewer’s attention, it has its own pitfalls. Flipped images must be selected carefully to ensure that there are no jarring elements when flipped. Any lettering, such as street signs, car registration plates and the like will all be reversed and are easily spotted.
Easier to overlook are the more subtle differences: shots of people, when reversed, may change them from right handed to left handed, or have their clothes buttoned the wrong way.
Think carefully before flipping an image – it may be less painful to find another image or rework the flow of the page.
Using images in web pages needs at least as much consideration as the text that they accompany. A picture may be worth a thousand words, but make sure that the thousand words reinforce and agree with the rest of your web page, and not detract from them.