Every website needs some images, a page would just look plain and boring without them. Images help to break up long passages of text and can often convey an idea more effectively than plain text.
Images are usually noticed first, even before any text is read, images help to confirm to the reader that the page is relevant.
Types of Image
Photographs
Photographs can show real products, scenes and people to give a sense of reality.
If your photos aren’t perfect, bear in mind they can be edited for a variety of reasons including colour correction, a background change, cropping and retouching.
Illustrations, Charts and Diagrams
Illustrations, charts, graphs and diagrams can be useful for showing a process, a concept or to express data visually.
Using the same style of image throughout the site will help to create a unified feel.
Considerations When Selecting an Image
Where to Obtain Photos
For photos, you have a few choices:
If you take photos yourself, it’s possible to achieve good results even with a mobile phone. You can hire a photographer for a more professional touch.
Another option is to buy stock images which can be cost-effective though you do run the slight risk that other sites could be using the same image depending on its popularity. It can also be quite time consuming to sift through thousands of potential images to try and find something suitable.
If buying stock photos, one tip is to buy images that are part of a set so that you can create a unified look for your site.
There are plenty of sites offering free images, here’s just a few:
Check the license, quality will vary.
istockphoto.com and shutterstock.com offer premium photos where the quality is usually higher. You can buy credits or subscribe and then download images.
Image Optimisation
The disk file size of a photo can be extremely large which will result in slow page loads. This is not only bad for human visitors but also the search engines which will penalise poorly performing sites.
Use Google Page Insights to determine which images if any are causing poor performance. The image quality and dimensions of the offending images can be reduced using tools such as Photoshop, Affinity Photo or for a completely free option try Gimp.
Using Images with Text
If you intend to place text over the image then there obviously needs to be space for the text to fit and remember that it needs to work at different aspect ratios and screen sizes. It is usually preferable not to put the text over the subject.
Contrast
Try to avoid selecting photos with a lot of contrast and shadows as it’s difficult for the text to stand out. Though an option is to insert a semi-transparent layer between the image and the text.
Finding Contrasting Colours
Contrasting colours can be found at opposite sides of the colour wheel.
The arrows in the colour wheel indicate that orange and blue provide high contrast.
Aspect Ratio
Consider the aspect ratios that an image will be shown at for different screen sizes. A ‘point of interest’ can be set for each image. Alternatively, different images or parts of the same image can be created for different screen sizes.
Appling Text to an Image
Consider the following image taken from:
https://www.pexels.com/photo/white-and-brown-cat-lying-on-white-textile-4790609/
The original image was taken in portrait view but has a dimension of 3858 x 5779 pixels, plenty big enough to allow some cropping to reduce distractions and change the image to landscape.
The image has been cropped to remove the darker colours in the background and change the aspect ratio to landscape. The space on the left provides a low contrast area for the text.
Finding inspiration
The following sites can be useful for finding inspiration:
Try searching for websites in a similar industry or type to your own.