How to choose meaningful images


  • Use high quality images.
  • Don’t use images that are too small


  • Use helpful images that are highly related to the written content on the page.
  • Be original and use images with visual interest.
  • Don’t use images only to decorate your page, fill in empty space or create a visual break from dense text.
  • Don’t use obviously stock art, faked or polished images. People will ignore them 85% of the time (e.g. smiling woman wearing headset).

Colour and contrast

  • Use colourful images instead of black-and-white images.
  • Use images with a high contrast between the object and the background.
  • Use images with a simple background. Avoid busy images with a crowded background.
  • Use images with smiling people looking directly at the camera.
  • Use real-life images with attractive and real-looking people. They should look healthy; have a well-proportioned body and a symmetrical face.


  • Use large, high quality photos for slide shows.
  • Use a thumbnail and a larger high quality photo when selling products.
  • Offer a zoom-in option to show the product details.
  • Label photos if their meaning is not instantly clear.
  • Confirm the person’s identity with a caption near the image.
  • Offer screenshots in full size.
  • Don’t embed text within photos.


  • Use precise illustrations to demonstrate a process, give instructions, or break down complex subjects.
  • Don’t use cartoon-like illustrations in websites for adults.


  • Use only icons that are obvious.
  • Don’t use tiny icons that make users think.

Related links

Contrast and brightness to use for the page elements

Colours create a visual hierarchy with their contrast and brightness. You can use them to lead the reader’s eye trough the page. Emphasize important elements on your website with a colour of higher contrast.

You can test the visual hierarchy by changing your layout in a grey scale image, after you have inserted the colours: The header usually uses the highest contrast, followed by the navigation, the scan columns, the content area and the page footer.

Colourful canvas with different contrast for header, navigtion, scan colomns and page footer

Grey scale canvas with the highest contrast for the header

How to create a grey scale image?

  1. Take a screenshot of your theme. For example with the Firefox Add-on Awesome Screenshot:
  2. Upload the screenshot to
  3. Click on “show fun effects”.
  4. Choose the “Black & White / Sepia Tool”.
  5. Click on “Grayscale”.

Related links