Introduction
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
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.
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
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.
Combine Two Images
One interesting technique is to combine two images to provide more context.
Another possibility is to show two images side by side to show a before and after scenario. This is commonly used in various fields such as interior design, fitness transformations, home renovations, or skincare to showcase the results of a product or service.
Finding inspiration
The following sites can be useful for finding inspiration:
Try searching for websites in a similar industry or type to your own.