Posted by Roger

Choosing images for your website or blog is not always straightforward and requires proper consideration. After all, images on a web page are not just decoration; they create a mood or atmosphere and provide visual interest which breaks up the text content of the page. They are an integral part of every page and can draw readers into your content if the images are chosen well. In this post I want to make some suggestions about image choice, image placement and finding good imagery.

Image Choice

When we’re discussing images, these could be photos or illustrations, however, it is important that:

  1. They match the nature of the page/post and
  2. They harmonise with the colour scheme of the website.

If you’re writing a blog post about food then the obvious choice of image is a photo of the food. If you’re writing about a new product, then a photo of the product is clearly appropriate. Often though, the subject of posts and pages is not quite as tangible and so the choice of image is not quite as clear.

Choosing images for your website

If you are writing a piece which is questioning and reflective then an image that supports that mood will be suitable. It may have nothing to do with the actual subject matter of the post but an image that creates the right atmosphere will draw readers in and help establish that reflective mood in their minds. So in broad terms, images can be chosen that represent the actual subject of the blog post or that support the emotional tone of the writing. It is worth deciding which of these two styles you will adopt for a given post.

In addition, if you use photos that include people, make sure, as far as possible, that the individuals face into your page or towards your reader. Readers tend to follow eye lines so if a photo shows someone looking away from your text, that is where you reader’s eyes will be drawn and so they will become distracted from your content.

Image Placement

To keep things straightforward, there are three choices here

  1. Centred
  2. Left aligned with text flowing around the image
  3. Right aligned with text flowing around the image.

Centred may be fine, even for smaller images if that matches the style of your site but generally larger images are centred. Smaller images tend to look better if right or left aligned and, if you have several images in a post, it may be better to adopt a mixture of right and left aligned images.

The number of images you choose may depend partly on the length of the web page but will also be determined by the overall style of the website. Some designs have a large centred image at the top of the page and then follow on with text. That is fine for sites that post articles that might be described as essays and these will tend to use typographic techniques to create the visual interest within the text. Your blog, however, may consist of a different type of article where multiple images are more appropriate. There is value in being reasonably consistent between posts, in other words don’t have some posts with one image and others with 4 images. Instead, try to adopt a consistent style both with number and placement of images.

It is worth checking how your post will look on smaller screens as well as larger ones. Right and left aligned images often look poor on small screens especially if they retain the text flow as the column of text adjacent to the image may be very narrow causing excessive hyphenation or other formatting ugliness.

Finding Images

Beware of copyright! It is not OK to simply search on Google, find an image you like and copy it into your website because that image may be copyrighted.

Searching for suitable images

One way of avoiding copyright issues is to take photos for your website yourself. If you do this, you may want to add a note to the pages stating your ownership of the photos. However, you do need to be a reasonable photographer as poor quality shots can really detract from the blog posts and have a detrimental effect on your entire site. In many people’s minds, poor quality photos = poor quality products and services offered through the website.

There are many websites that offer images for purchase as a search on ‘stock photos’ will show. The images you may want to buy are often relatively inexpensive (around £1) and for this you have a perpetual, non-exclusive licence to use the image. Websites offering this service include

There are, however, a whole range of other sites that offer images some or all of which are completely free. Some of the better ones are

Don’t forget to resize and compress images so as to maximise the performance of your web page.

Conclusion

As I said at the beginning, choosing photos for a web page or blog post is not always easy and it require proper consideration, perhaps as much consideration as the words themselves. Imagery has a huge impact on how visitors perceive your website and good quality images are well worth some money for. There are also a lot of nasty, hackneyed and downright awful images out there that should be avoided. Here’s a link to one which is of a style which I dislike a lot but which I see frequently. Please don’t use images like this. Instead choose images that harmonise well with your colour scheme and which complement your words. These will enhance your posts and encourage greater engagement with your content.

(The two images on this page are from Unsplash.)


More from the blog

New Website for Japlene

Japlene dressmakers Oxford

Japlene dressmakers recently engaged us to produce a new website for them to replace an old, out-dated site that had been in place for several years. Japlene are based in Headington and create a range of bespoke dresses for all types of special occasions including weddings, christenings, parties etc. Read about how we approached this project and delivered a successful result.

Read more

Photos and Faster Page Load Times

Images are the main component of page weight

Uploaded photos are one of the main causes of slow web pages and this post looks into this issue and gives some suggestions about how to handle it effectively to give faster page load times.

Read more