Every website needs some images, a page would just look plain and boring without them.

The images are usually noticed first, perhaps even before any text is read, images should be relevant and confirm to the reader that they are in the right place.

Types of Image to Use


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, changing the background, cropping and retouching.

Illustrations, Charts and Diagrams

This diagram is intended to show a high-level concept of web development. It uses the colours from the site’s colour scheme.

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 give a unified feel, use colours from the site’s colour scheme for example.

Where to Obtain Photos

For photos, you have a few choices:

  • Take photos yourself
  • Hire a photographer
  • Find and buy stock photos

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:

Check the license, quality will vary. and offer premium photos where the quality is usually higher. You can buy credits or subscribe and then download images.

Considerations When Selecting an Image

  • Ensure any images send the right message
  • Consider the emotional effect (if any) that an image may evoke.
  • Does the image support the content?
  • People connect with people, so consider showing people using  a product or enjoying the facilities of a hotel for example.
  • Avoid posed photos of people staring at the camera with fake smiles pretending to use a product. Photos will seem more natural and less distracting if the people in the photos are not staring at the camera which allows a visitor to more easily imagine themselves using or benefiting from the product or service.

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.


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.

The hero image at the top of this screenshot has poor contrast, using a darker text wouldn’t help because of the dark areas in the image.
The contrast issue was resolved by using a semi-transparent layer between the photo 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.

Note that in the above image, the aspect ratio the hero image which is indicated with an orange border, changes from landscape on a desktop to portrait on a mobile.

Appling Text to an Image

Consider the following image taken from:

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.

Latest Articles