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 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

This diagram is intended to show a high-level concept of web development. It uses the colours from the site’s colour scheme so that it looks and feels part of the website.

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

  • Ensure any images convey 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 a person or people using  a product or enjoying the facilities of a hotel for example.
  • Avoid posed photos with people staring at the camera with fake smiles pretending to use a product. Photos will seem more natural and less distracting if any 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.

Where to Obtain Photos

For photos, you have a few choices:

  • Take them 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, 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.


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 in 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.

Leave a Comment

Your email address will not be published. Required fields are marked *