When people refer to website content, they often mean written copy; however, content can be anything on the page — copy, images, video, and more. A page without content is a blank page.

In the same vein, it’s not just the copy that needs to be optimised for search engine scrutiny — everything needs to be carefully considered, including images.

You might be wondering how you go about following best practice regarding images on your blog posts and web pages.

Follow the tips below and your images will stand a much better chance of ranking in image searches, such as Google’s.

Choose legal images

This isn’t an SEO tip but rather a gentle reminder to only publish images you own, royalty-free images, or images you have paid for through a reputable source such as Shutterstock.

Not doing so can result in huge fines further down the line, and no blog image is worth £500!

Ideally, images will be your own, but not all businesses have the time, budget or inclination for photoshoots.

With that said, I’ll move onto image optimisation.

Choose a file type

While in the past, JPEGs and PNGs were the best format options for your site’s photos, WebP is now favoured for speed optimisation thanks to its lossless and lossy compression. Developed by Google, WebP images are able to be compressed to a far smaller file size than the alternatives — so always use this format if possible.

If not, JPEGs and PNGs are your next best options, but always compress — there’s more on that below.

Change your file name

Barcelona cathedral, la Sagrada Familia, in Spain

Firstly, when you download your chosen image, update the name of the file. Google won’t understand DSC5483.jpg but it will comprehend something like la-sagrada-familia-barcelona.jpg. Include your main focus keyword or phrase at the beginning of the file name as that is what will be read first.

Google uses machine learning to understand what is contained in a picture and uses additional information such as the domain and the content surrounding the image to build its knowledge.

For an example of the importance of image file names, type ‘girl in a red coat’ into image search. The results will produce a wide variety of things — from Schindler’s List and Pretty Woman movie stills, to e-commerce product photos and snaps of Kate Middleton.

Rename your images with correct and specific information for a chance of ranking — it’s better for users, machine learning and SEO best practice.

Consider your file size

Once you’ve named your image file, it’s time to resize it.

Large photos can contribute to page load speed issues, so it’s important to avoid that by compressing all images using a tool such as Shrink Me or TinyPNG.

The aim here is to reduce the file size while maintaining quality.

Quick loading websites make for happy users and search engines.

Create responsive images

Images need to be made responsive, so they automatically adjust for display on various devices.

If you’re using WordPress, your images will be made responsive without you having to do anything.

Otherwise, you’ll need to make them responsive using code.

For responsive images in HTML, add code like the below:

<img src=”cow.jpg” alt=”Cow” class=”responsive”>

For responsive images in CSS, add code like this:

.responsive {

width: 100%;

height: auto;

}

If you wish to restrict the image to a certain size or make other changes to images using CSS, you’ll find lots of helpful information here.

Create your alt-text

Alt-text assists the following in understanding the page:

  • Visually impaired site users
  • Those who have chosen to switch images off in their web browser, for whatever reason
  • Search engines

Those with visual impairments may use a screen reader, and alt-text will help the user understand the image and therefore the page as a whole.

Earlier this year, Beyonce’s production company was sued for discrimination against visually impaired fans — this was because the star’s website had an exclusively visual interface with no alt-text behind the images.

The lawsuit was filed when a user felt that the site violated the Americans with Disabilities Act (1990). If you have a website targeting the States, you need to ensure you comply with the ADA by providing information for each image you upload.

Google and other search engines cannot ‘see’ images themselves, but they use machine learning to look at the variables in and around each picture — including alt-text.

Alt-text provides search engines with a detailed description of images, allowing crawlers to correctly index them.

Regarding the USA, you may also be breaking the law.

How to write alt-text

  • Ensure you describe the image in detail.
  • As long as it makes sense to do so, include the page’s target keyword.
  • Do not keyword stuff your alt-text — one keyword is sufficient.
  • Don’t waste characters writing “Image of…” or “Photo of…” — users and search engines already know it is an image you are describing.

Examples of good alt text

British Shorthair Blue cat eating food from silver bowl on marble floor
Alt-text: British Shorthair Blue cat eating food from silver bowl on marble floor
Bride stood on steps wearing white lace and tulle wedding dress holding bouquet of flowers
Alt-text: Bride stood on steps wearing white lace and tulle wedding dress holding bouquet of flowers

Add title text

Title text is an attribute that provides additional information about an image on a web page.

This isn’t as important as the alt text and can be skipped if you wish, but it does boost accessibility and so I’d recommend using it.

What does good title text look like?

Your title text will complement your alt-text, perhaps offering more detail.

Make use of captions

Google reads image captions so while you don’t need to add one for every image on your site, you can do so to provide additional information for search engines and users if you feel it’s needed.

Users tend to take notice of headers, images and captions as they scroll down a page and weigh it up.

This means that a caption could be all it takes to make a difference to your bounce rate in certain circumstances — this is more likely if you’ve not used descriptive headers though.

Image placement

Always use images that are relevant to the page’s subject matter and place them near the relevant text on those pages. This is common sense, creates a good UX, and therefore also pleases search engines.

Create an image sitemap

If you are wanting the images themselves to be found in search, then create an image sitemap in which to house them all.

If you’re using WordPress, the Google XML Sitemap for Images plugin will do this automatically for you.

Other things to consider

There is a Chrome extension called Lighthouse which is great for auditing image alt-text, amongst many other things. You can read more on Lighthouse here.

We wrote a guide to the Google Lighthouse tool for SEOs too, which you can read here.