Optimising images for your website

Optimising images for your website means making them faster to load, easier for Google to understand, and a better overall experience for your users. Without the due care and attention they deserve, it can leave your website with a poorer SEO ranking and may confuse or frustrate some of your website visitors.

Are images important for SEO?

Put it this way; the goal is to make your content helpful, trustworthy, engaging, and authoritative. If these things are happening, you'll have a better chance of ranking due to the site having a better user experience. So to that end, you want to have images on your website.

Images help break up the page, so the user doesn't just see a big long wall of text. Yawn. View it like stimuli for the brain, images can invoke interest, emotion, thoughts, and feelings.

Images can also help if you are trying to explain something or show you really did for example, "review the top ten chocolate smoothies," you have the evidence to back up your knowledge.

Or it might even be something scientific or technical, like a diagram or illustration of a human cell or in showing someone how to replace a bicycle wheel.

How do I add SEO for images on my website?

There's a couple of things you can do to optimize images for search engines like Google and we will go through them below.

Choose the right file format for your website image

There are four image file types that come to mind, and you can tell what file format your image has by seeing what extension it has. The extension is that 'dot-something' on the end of it. Like picture.png or picture.svg, etc. What you want to use the image for will tell you which file type you'll likely want to use for the image.

PNG

PNG files are typically larger, but they are the kind of image files with a transparent background while the forefront subject matter is solid. Commonly these kinds of files are used to overlay on top of something else.

JPEG

A JPEG image is a good choice if you want to display a large picture (with large dimensions on the web page) while still keeping that vivid colour and detail while keeping the file size down.

WebP

WebP is the newer image format, which allows photos to retain a remarkable amount of detail while maintaining a very small file size.

SVG

SVGs are best used for logos or icons, where there will not be a lot of highly detailed imagery and a million+ colours like a photo.

Important tip

There is one more image file format called the GIF format. They're often short looped video images that only go for a few seconds. These image file types are notoriously large in file size, and you should very rarely (if ever) need to use them. Not to mention the fact that having too many of them, let alone one on a page, can significantly slow the page down (and look tacky). You should only very rarely and sparingly use a gif image if you absolutely need to, such as if you need to show an animated diagram to help the user visualise what you're trying to say.

Make sure you name the image file something meaningful

Don't upload website images to your site that have names like IMP22456.jpg or PIC_98bk_4448jq.png. These names mean nothing, and they don't help Google make sense of your website. If you have a cake shop website and a picture of a bavarian chocolate cake, rename the image file bavarian_chocolate_cake. Google can and will read this and put two and two together.

Scale your image to an appropriate size

Images can take time to load, and the more you have on a website page, the longer it can take that page to load. So, where you can, resize the image down to the appropriate size. A faster loading website page means better SEO.

Also, know that there are special styling tricks web designers can do to make it look like an image is smaller when in fact, it isn't. This resizing doesn't help as, technically, the whole image in its original size is still being downloaded by the web browser (even though it looks small).

The best approach is to reduce the size of the photo before it gets uploaded. That way, you know for sure the image is of an appropriate size.

And lastly, it's worth knowing that WordPress will resize images at various sizes for it to use when you upload them and generally will use the appropriate size of that image for the page, which is quite handy.

Compress the file size of your images

Not to be confused with scaling down the physical size of an image, the file size of an image in kilobytes or megabytes can also make an image slow if the file size is too big.

Make sure you compress these images before you upload them to your website. There are ways to compress the file size of an image without losing any quality of that image, Tinypng is an excellent website you can use to reduce the size of images. There's also similar sites like ImageOptim, JPEGmini and Kraken.io.

Alternatively, if you are using a WordPress site, plugins like Smush can also help compress the size of your website images so that your website pages load much faster.

Captions

Adding captions under images can be helpful to people viewing your website. We often scan pages rather than reading the whole thing, and things that get our attention are often headings, quotes, table of contents, bullet lists, graphics, and, last but not least, the captions that sit under images.

Do you need to add a caption under every image on your website? No of course not. Sometimes it's not appropriate as the image may be serving some other purpose. For example, there's no point putting a caption under a logo, and there's no point putting a caption under what is purely a decorative backdrop to a web design.

What's this got to do with SEO? Simple, it plays back to having that good user-friendly experience. Assuming you have put images relevant to the topic on the page, those captions will be relevant too, and easy to spot should someone be scanning the page looking for something in particular that captures their interest.

Alt tags

Also sometimes called alt text, this feature of a website image is there so that if the image cannot be seen or displayed for any reason, the person consuming the web page can still work out what's meant to be there.

Maybe they've turned images off on their browser, or perhaps the viewer has a vision impairment and has something reading the web page out to the user.

Whatever the case, alt tags are something you'll want to include. If you have a web designer adding these for you, they'll know where to put this.

If you're using WordPress and doing this yourself on the other hand, you can find it under the "alt text" field that shows up when you go to add, view or edit an image via your media files in the WordPress admin panel.

When you're adding an alt tag description, ensure that you are using the target keyword for that page (if it's appropriate), and be sure to make it readable to humans, not just Google.

Title text

This one isn't so much a must-have per se for reasons we'll get into, but we thought we'd mention it as it's still a thing, and people sometimes copy the alt tag wording into the title text without realising what it is.

So ok, what IS the title text? Ever hovered over an image on a website, and a tiny little box with text popped up? That's the title text. It's similar to alt tags, but here's the problem:

While you can read it when you hover over it, they are, at best, unpredictable when someone is using a screen reader (e.g. if someone is visually impaired). Sometimes it works, sometimes it doesn't.

You also have to consider that some users, for various reasons, might not have a mouse and only a keyboard, so they too won't have access to this information because they can't hover over it.

For this reason, we recommend that you stick to using alt tag text instead, and any further supporting text-based information can be included in the article that accompanies the image itself.

Using a CDN to display images on your website

CDN stands for content delivery network and it's a way of sharing a copy of something, like an image, across the world. Ok, why would we want to do that?

Well, when you look up a website, the browser has to retrieve that website from the server it's on. If the server happens to be located in the same country as you, the time it takes for that image to load might not take so long (we're talking milliseconds to seconds here, but they still count when dealing with SEO).

On the other hand, if that website's server is halfway across the world, it's going to take a little longer to load. That adds to the web page's total loading time, which can and will impact your web page's SEO.

So a CDN (content delivery network) is a geographically distributed series of servers worldwide that work together to ensure that the website will load faster no matter where you are (including the images on that page).

So by using a CDN, you can optimise your SEO for your images. There are several ways a web developer can implement this, but if you happen to be using a WordPress website and you're doing this yourself, there are a range of plugins you can use that can connect you up to one (just be prepared to pay something for it as often these quality CDNs are not always a free service).

You'll also want to check with your web hosting company as sometimes they provide a CDN as part of your website hosting so it's worth checking that before you splash any cash on your own.

How to optimise images for web

Table of contents