The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

Web Graphics - Picture Presentation

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines
Adjusted and enhanced picture of Flower the cat

Learning The Skill ...

You want to display photographs on your web page but they merge with the background and do not stand out? Learn some simple techniques to prepare and highlight photographs so that the eye is drawn to them and they become the focus of your page. This tutorial also includes sections on image adjustment and image enhancement.

Some Basic Rules ...

Photographs are comparatively dark in colour and usually contain masses of detail. Therefore your page background should be plain or fairly plain, using light or mid-range colours that don't compete with the photograph. It is no accident that studios and galleries tend to use plain, mid-range pastel colours as a backdrop for pictures.

For those of you that are new to web authoring we have provided the basic HTML Markup and CSS Styles that displays each photograph.

<div><img src="flower-06.jpg" alt="Flower 6" width="250" height="250" style="border: 2px outset #D8D8D8;"></div>

Select Your Photograph ...

Start by choosing a suitable photograph that is bright and contains plenty of color information. I selected this particular 'moggie snap' because I thought the cat had a mildly quizzical expression that had been caught by the angle of the light and I also thought that the photograph would be ideal for demonstrating image adjustment and image enhancement. I downloaded the picture from 'The Amazing Cat Picture Page' which hosts a large collection of cat pictures and we have provided a link to their site at the bottom of this page. The cat's name is 'Flower' and Flower lives with her owner Sara in Camberley, Surrey in the UK. We thank Sara for allowing us to use the photograph and we hope that she approves of out treatment of Flower.

Flower 1

Tip:  The DPI (dots per inch) of photographs is often set for output to a printer not a computer screen and this photograph of Flower provides a good example of this. The original photograph had dimensions of 300 pixels wide x 409 pixels high and had been saved at 200 DPI. To create more efficient images for the web, use your image editor to resample your images to the same dimensions but at 72 DPI which is the optimum setting for images being displayed on a computer screen.

<div><img src="flower-01.jpg" alt="Flower 1" width="250" height="250"></div>

Selecting An Area ...

Photographs usually have a large amount of unnecessary content so think carefully about the story you want the picture to tell. Then use your image editor to crop the photograph to the area you want to display.

Flower 2
 
<div><img src="flower-02.jpg" alt="Flower 2" width="140" height="140"></div>

Resize The Selection ...

Use your image editor to enlarge or reduce the selected area so that your image will display at the size you want when your screen resolution is set to 800 x 600. Avoid losing the aspect ratio of the photograph (the ratio of height to width of an image) otherwise the photograph will appear stretched or squashed.

Avoid the practice of using the IMAGE Tag Height and Width Attributes to scale the image. Results can be unpredictable on different systems and for best results you should always use your image editor to resize images to the required size. Height and Width Attributes should always be used in your IMAGE Tags and they should accurately reflect the actual dimensions of the image, not the size you want the image to be displayed at. If the file size of your images are too large then, if possible, you should reduce the dimensions of the image and before optimizing the image.

Flower 3
 
<div><img src="flower-03.jpg" alt="Flower 3" width="250" height="250"></div>

Adjusting The Image ...

Image adjustment should be within the capabilities of most web authors. If you have not previously used these Image Adjustment options then as an exercise, load or paste a copy of 'Flower 3' into your image editor and work through the adjustments to achieve a similar end result. I used Adobe Photoshop 7.0 but any reasonable image editor should provide similar or equivalent options. The settings values are likely to differ between different image editors and I leave you to judge the improvement in the image.

  1. Image > Adjustments > Brightness/Contrast > Contrast  -25
  2. Image > Adjustments > Hue/Saturation > Saturation  +40
  3. Image > Adjustments > Hue/Saturation > Lightness  +10

Flower 5

Tip:  When adjusting or enhancing images of animals or humans, the most important feature of the subject is the eyes. If you adjust the eyes correctly then the rest of the image will begin to fall into place. If you fail to adjust the eyes correctly then the image is unlikely to 'work', no matter how well you adjust or enhance the rest of the image.

<p><img src="flower-05.jpg" alt="Flower 5" width="502" height="250"></p>

Adding An Inset Border ...

Today, web authors have a range of image border options available using CSS (Cascading Style Sheets) and the following picture is surrounded by an inset border which is 2 pixels wide. CSS provides a variety of border styles, widths and colors and these include solid, dotted, dashed, double, groove, ridge, inset and outset. A little experimentation can produce a wide range of different border effects.

Flower 4

<p><img src="flower-04.jpg" alt="Flower 4" width="250" height="250" style="border:2px inset #D8D8D8;"></p>

Mounting The Picture ...

One very neat idea is to make your photographs appear as if they have been hand mounted in a card surround. This is easily achieved using two CSS borders and a suitable background image. The HTML Markup and CSS Styles for achieving this are displayed below and this is cross-browser Markup that should work in all modern browsers. There is also a selection of background images that you might find useful for this purpose.

Flower 4

<div style="width:334px;height:334px;background-image:url('paper.jpg');border:2px outset #D8D8D8;">
<img src="flower-04.jpg" alt="Flower 4" width="250" height="250" style="display:block;margin:40px;border:2px inset #D8D8D8;">
</div>

Picture Mount Background 1 Picture Mount Background 2 Picture Mount Background 3 Picture Mount Background 4 Picture Mount Background 5 Picture Mount Background 6

Depreciation Warning ...

Many of you may already be aware of the revolution that the world of web design is going through but for those of you who are not aware of the many changes then I will give a brief description of the situation. HTML (Hyper-text Markup Language) was previously described as a language that provided structure and formatting to web pages but W3C (World Wide Web Consortium) have reduced the role of HTML to only providing structure to web pages and formatting web pages should now be accomplished using CSS (Cascading Style Sheets). This means that many HTML Tags and Tag Attributes are now depreciated although they may still work in the current crop of web browsers.

In relation to this tutorial the main casualty is the HTML Border attribute, typically used in the HTML Image Tag or the HTML Table Tag. HTML borders were always a little 'retro' and all image borders used in this tutorial have been accomplished using CSS. .

Enhancing The Image ...

Image enhancement is a specialist skill which is typically acquired through structured training and is considered beyond the scope of most web authors. Even without enhancement, the presentation of most photographs will benefit greatly from the other measures outlined in this tutorial, including the subject of Image Adjustment which was dealt with earlier in the tutorial.

image enhancement should be considered an optional extra in this tutorial...

You can use a wide variety of image enhancement techniques to improve or alter a photograph. Most photographs can benefit from being enhanced in one way or another and this photograph of Flower is no exception. I have applied various enhancements to Flower's photograph and provided a 'before and after' montage for comparison. It is worth noting that the 'before image' was the improved copy that we adjusted earlier, not the original. Having studied the original enlargement I came to the conclusion that Flower was a fairly old cat when this photograph was taken and that the photograph was a fairly poor 'snap' in photographic terms. I leave you to judge the improvement for yourself.

Flower 7

I used Adobe Photoshop to achieve the transformation and because Photoshop is such a professional image editor it only took a few of minutes to complete the enhancement.

<div><img src="flower-07.jpg" alt="Flower 7" width="502" height="250"></div>

Improvements Montage ...

It is interesting to compare the different stages of improvement. Flower has the appearance of a battle-scarred old cat and the original photograph was taken in bright sunlight with the light coming from an awkward angle. The first image of Flower was taken from the original photograph without adjustment, the second image is the adjusted version and the third image is the enhanced version.

Flower 8

<p><img src="flower-08.jpg" alt="Flower 8" width="604" height="200" style="border:2px outset #D8D8D8;"></p>

 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Web Picture Presentation You display photos on your page but they merge with the background and do not stand out. These techniques highlight pictures so that the eye is drawn to them and they become the focus of your page.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
Picture Presentation Links
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England