Image Optimisation: 10 Steps on How to Optimise Your Images for Better SEO & Web Performance

Business

Pictures on your site can also play a part in holding you back if you don't take into consideration of image optimisation. Here is how you can optimise your images to help with your web performances.

By Ahmed khalifa

They say that "a picture speaks a thousand words", which is true for anyone whether it's online or offline

But pictures on your site can also play a part in holding you back if you don't take into consideration of image optimisation.

While you sit back and admire the creativity of your images, we can probably assume that you want other people to have the chance to engage with your visual content too.

But it's easier to do that if you look at optimising your images first, both for SEO and for general web performances.

Without it, your audience will never have the chance to engage with your entire site in general, let alone your content.

---

What is Image Optimisation?

Google has described image optimisation as the following:

"Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website: the fewer bytes the browser has to download, the less competition there is for the client's bandwidth and the faster the browser can download and render useful content on the screen."

Wherever you get your images from, it is highly likely that they are created in a very high quality, print-ready format. I'm talking about those pictures measured in 4000 x 4000 pixels in height and width, and hundreds of megabytes in file size, which looks like it is good enough to be on a billboard, not just on your site.

But it is doubtful that your site requires such huge images to be uploaded. And this even applies to image-focussed websites like photographers, fashion bloggers and artists.

For the good of your site's performance and users' experience, you should always think about optimising your images before you even think about uploading them to your site.

Why Should You Always Optimise Images?

The problem with images is that they are heavy and it is often one of the main reasons why your site is not performing, be it for search or general web performances. And there are many reasons why you should always think about image optimisation:

1. Improve page load speed: it is no secret that site speed is a ranking factor so that Google will love you for it. But ultimately, it will also improve the experience of your audience as they do not have to wait a long time for your site to download. If they do, they will not hang around.

2. Boost conversions: since users are less likely to leave your site because of slow speed, it also means that your bottom line will also be more likely to increase. Research by Kissmetrics has proved that slower pages have resulted in an increase in page abandonment.

So imagine if your customer is interested in purchasing from you...?

3. Easier to scan content: another part of improving your audience is that it's easier on the eye when they digest your content. Splitting up your text with images will make it easier to engage and also easier to scan the content.

4. Google image search is higher than you think: it is often forgotten that Google Image almost acts like a separate search engine and it can account for a huge chunk of online search. According to research my Moz and Jumpshot, 26.79% of US searches were within Google Images in 2016. So it's not just useful for looking for Halloween costume ideas.

Image via Moz

5. More traffic via social media: if you have tagged your images for social purposes (more on that later), your image will appear when links are shared across social media. And it's well-known that images can encourage click-through rates and boost your traffic.

6. Cheaper running cost on your server: sure, you can get a bigger server to help handle your large images and slow site, but the simple practice of image optimisation can improve the server speed, speed up your site and save you money in the long-run from needing a powerful server to run your heavy site.

So to put it simply, everyone should optimise their images online.

How to Optimise Your Images?

1. Choose the right file types

Whatever images you have, you need to decide which file format is the best one for your needs. Even though there are many different file types, for simplicity, we will focus on the three most commonly used and required image formats:

  • JPEG (.jpg) – this is ideal for images that have lots of colours. It is also a useful format to adjust the quality level to get a good balance of quality and file size, with no compromise
  • PNG (.png) – this is ideal for simpler images, but you want to preserve the most detail with the highest resolution, like logos. PNG files can also be slightly larger than other formats
  • GIF (.gif) – although it can be used for images, this is best used for animated images

2. Be descriptive but simple with your file names

When you acquire images, be it online or from your camera, there is a good chance that the filename will be something along the line as DCMIMAGE581237.jpg

However, you will make things much easier for yourself and search engines if you are descriptive with your file name.

Consider the following image:

Which one of these file names make more sense:

  • DCMIMAGE5812.jpg
  • 2010-bmw-5-series-hatchback-car.jpg

Google is not able to read images (yet!), so it's important to make it as easy as possible for them understand what the image is about. And being descriptive in your file name is one way of doing so.

You will also make it easier for yourself if you are trying to find a specific image saved on your hard drive or offline.

Bonus tip: using stop words like "a", "and", "each" and "here" are not always necessary.

3. Separate keywords by dashes not underscores

A common mistake that most people do is to use underscores instead of dashes to separate the words in file names. For example:

  • big_red_bricked_house
  • big-red-bricked-house

Although a small thing, Google has always recommended to use dashes, as it acts specifically as a word separator (which is another reason why words in URLs should be separated by dashes).

4. Create separate images for different purposes

You won't like the sound of this, but if you have different images to upload, such as your header, featured image, thumbnail, favicon, etc. you will need to create a specific image for each area (and you can find out what sizes you should choose by checking the next tip below).

Each of these images will require different sizes, so if you plan to use 1000px by 1000px as your favicon and thumbnail, you are guaranteed to waste your users' time and resources as your browser is working extra hard to display the right image while your users are getting frustrated with the flow experience.

If you don't have a graphic designer, using tools like Canva can allow you to create them with relative ease.

5. Resize your images to reduce the file size

To continue from above, each image may require different sizes depending on its purpose. To resize the images, you can use the standard programmes like Preview on your Mac or Paint on your Windows.

You will be able to see the option of resizing images there:

How to resize images on Mac 'Preview' app

How to resize images on Windows 'Paint' tool

The likes of PicMonkey and PicResize, where you can upload your images, can also do the job for you. Using Photoshop or free open-sourced products like GIMP work well too.

You can also use a WordPress plugin called 'Imsanity' that automatically resizes huge image uploads down to a size that is more reasonable for display in a browser by setting the maximum width, height and quality.

6. Compress your images

This is a very easy way to reduce the file size of your images further, but without lowering their quality.

There are many popular options like TinyPNG (web-based), ImageOptim (Mac only),  and Kraken (paid tool).

Demonstration of how much file size TinyPNG can save you

And as always, programmes such as Photoshop and GIMP can also compress your images too.

7. Optimise the image alt texts with keyword-rich description

Also known as the alternative text, this is a critical part of image SEO and for those who want to appear on Google Image.

Within media library, each image will have these fields, including the alt text

When describing what to fill in as an alt text, I always describe it the same way:

"How would you describe the image to a blind person in approximately 10-15 words?"

So if the image is a white dog chasing a ball in a field, fill the image alt text as "White dog chasing a ball in a field" (bonus point if you know the breed).

Typing the alt text as "dog"or even "white dog" is not descriptive enough for the above example.

However, "cute white dog with big fluffy coats is running around like crazy and looking happy while chasing a ball across a big green field" is a bit over-the-top.

Alt text is also essential for accessibility purposes too as it will allow those who can't see the images (because of slow internet or visual disability) to understand what the image is.

Simple, yet powerful for many reasons.

8. Create image XML sitemap or add images to your existing sitemap

To keep it brief, XML sitemap is a file that lists the web pages you are asking search engines to crawl and access the site. There is also valuable "metadata" associated with those pages, which can provide more information to Google about those pages.

One of those metadata is images.

You can either create a separate XML sitemap specifically for images, or you can add images to your existing XML sitemap. Even though both can work, Google recommends the latter, and it can help index the images on Google and improves your image SEO.

If you are using WordPress, Yoast already follows this recommendation and adds relevant images to the page and post XML sitemaps.

If you don't have that, you may need to look at other options, such as asking a web developer to carry out this task for you.

9. Use OpenGraph and Twitter Card tags

I've mentioned social sharing as another reason why you should optimise your images.

If tagged correctly, your images will appear when a URL from your page is shared on social media.

How the Guardian appears on Facebook and Twitter

In simple terms, these are created by a piece of code called OpenGraph and Twitter Cards.

OpenGraph, created by Facebook, allows your image to appear not just on Facebook but also on other platforms like Pinterest, while Twitter Cards acts in the same way for Twitter.

The easiest way to make use of this is to access Yoast's Social section, where you can make sure that the correct images are used across all social media platforms when your pages are shared.

And this will help to improve click-through rates and boost traffic to your site, as your shared link will appear more engaging thanks to your image.

10. Create "contextual information" around the images

Even though we have been focusing on the actual image itself, the information around it is also another essential part of image optimisation.

When you have relevant content around the images and combine it with all the factors mentioned above, it will play a part in giving Google a further understanding of what your image entails and how it fits around your content.

Even though the algorithm is still not able to "read" images, it is clever enough to understand your non-textual based content...provided that you have provided enough information on your page about it.

11. Bonus image optimisation steps

  • Use WordPress plugins: you can use plugins such as WP Smush and Imsanity to bulk compress existing images in your media library. Some people might argue whether you can just use the plugin to optimise your images. But to maximise the success of your optimisation, the process before uploading to WordPress is critical.
  • Add captions below your captions: the small text under images are called captions, but do you need to use it all the time? No, which is why I make it optional. It depends on the purpose of the image so disregard SEO for this and think about your users. If you think adding captions is useful and make sense for them, feel free to use it. Otherwise, you can leave it blank.
  • Add a title to your images: this is an easy place for you to create a title for your image. On most occasions, it tends to be a more grammatically correct version of the filename. For example, an image with a file name of cottage-countryside-garden.jpg can be titled as "Cottage in Countryside in Garden". It's another way to have to provide non-essential information, but it's not essential for image SEO.
  • Add descriptions to your images: another area which is not essential, but another place to add more information about your image and optimise it further. The easiest thing to do is to copy and paste the alt text into your description...and no it's not duplicate content.

---

You probably have noticed now that image optimisation or image SEO is a combination of many different elements.

Related Articles: Read other SEO factors that you need to take into considerations

It may look overwhelming, but once you get the hang of it, it will be part of your normal routine when you create your content, like writing a headline and adding meta description. Even for this site, I'm still learning as I go along and not every single image is as optimised as it should be.

But I'm getting there, and if image SEO and web performance are important to you (and it should be), this process can dramatically improve the odds of appearing on Google images.

And since the visual-based content is becoming more and more important, it is up to us to make sure that it is not just engaging, but also accessible to Google and our audience.