Design tips when using images
Images play an important role in Web design. The way in which images are used will often be the determining factor on how professional a website looks. In this article you'll find tips on how to use images on your site so that they are aesthetically pleasing, complement a site's design well, and maximise its professional appearance.
Limit the use of filters and effects
Today's image editing software programs offer such a wide range of filters and effects that it is easy to over-use them in an attempt to create an "impressive" webpage design. ln fact, the opposite is generally true. Limiting the use of effects and filters often results in a more professional appearance than if many effects are applied. Filters and effects should be used subtly and in such a way that an image is enhanced without the filter's effect becoming the focal point, or the most noticeable feature of the image.
Colour and 2D design styles
Popular Web design styles currently tend to focus on "simple" 2D designs that are limited to similar shades of colour. Therefore, you may wish to consider restricting the use of shadows and borders as well as editing image colours so that images blend in well with the rest of the page's colour scheme and don't create a stark contrast. Good image editing software will allow you to colourise (tint) an image by applying the image editor's hue/saturation functions.
Use the Web-Safe colour palette
Where possible, use the "Web-Safe colour palette" when creating images to ensure the majority of colours will appear correctly on different operating systems. For further information about the "Web-Safe colour palette".
White space
Having large amounts of white space (areas that do not contain page content), particularly around images, can help give your page a "prestigious" appearance.
Image formats
The two most common image formats in Web development are JPEG and GIF. For photographs, use the JPEG image format wherever possible, except where a different image format is the only option, such as when the GIF image format is required to achieve transparency. JPEG is the most widely supported image format and is not subject to image rendering problems on certain Web browsers, as is the case with some other formats. Just remember that JPEG files are not intended to be edited, as they will lose quality each time they are saved, so you will need to keep a "master" copy of each image in a different format for editing purposes. GIF images, on the other hand, are perfect when sharp detail is required such as for diagrams and drawings. Because GIF images are limited to 256 colours, you could reduce the colour depth when using this format to display photographs. In addition, the compression algorithm used for GIF images works best when the image consists of large areas of the same colour. It is therefore advisable that you compare the file size of JPEG and GIF images to the quality of the output, and choose whichever is most appropriate.
Non-rectangular images
All image formats used in Web design are rectangular, but you can give an effect of non-rectangular images simply by filling the space between the non-rectangular part of the image with the background colour of the webpage. If you do this, make sure the edge colours of the non-rectangular part of the image are merged into the surrounding background colour by applying a "feather" effect (usually of about three to five pixels). A feather effect basically creates a smooth gradient between the object featured in an image and the surrounding background so that the edges appear smooth and not "choppy", particularly on LCD (flat-panel) monitors where individual pixels (the dots that make up a picture on a computer screen) can easily be seen.
