Incorporating images into a website is essential, as they play a crucial role in enhancing its visual appeal and user experience. Without images, a webpage can appear bland and boring. Images serve the purpose of breaking up long sections of text, making the content more visually engaging and easier to comprehend.

Moreover, images convey ideas swiftly. In many cases, they can communicate messages more effectively than plain text alone. When visitors land on a webpage, their attention is often drawn to the images first, even before they start reading the accompanying text. These images serve as visual cues, instantly confirming to the reader that the page is relevant and worth exploring further.

Using carefully selected images, website creators can captivate their audience, stimulate curiosity, and enhance overall user engagement. The right images can evoke emotions, tell stories, and reinforce the intended message, making them an indispensable component of any well-designed website.

Searching for the ideal images for a website can be a challenging endeavor, demanding a significant amount of time and effort. This process typically entails meticulously reviewing numerous options while taking into account several critical factors, including relevance, quality, and copyright restrictions.

In this article, our goal is to alleviate the challenge by providing valuable insights and practical suggestions to simplify and streamline the process of selecting suitable images for your website.

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

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.

Using Images with Text


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.