Onpage SEO, also known as Technical SEO, refers to the process of optimizing various elements on the pages of a website to improve that website’s rank in search engines. This includes optimizing each page’s title, description, URL, text and more. An often overlooked aspect of onpage optimization are the images used on the website.

image optimization hacks

People add images to a website mostly for aesthetic or visual reasons. They are often completely unaware of the images’ properties that relate to search engine optimization.

In addition to helping improve a website’s rank, optimizing images can also lead to a better user experience. After all, websites should be built with people in mind, and every effort should be taken to maximize the user experience.

Why image optimization is important

Search engines like Google, scour the internet looking for webpages to index. When they find a website, search engines will analyze the content of each page to figure out what the page is about.

Using a set of algorithms, search engines are essentially trying to rank every webpage for the words people will be using to search for the information they are looking for.

Every element on the webpage is an opportunity to help search engines understand what the page is about.

Search engines will examine various elements on the webpage including the page title, URL, links embedded on the page, and page text. Unfortunately, images cannot be parsed by search engines; however, there are some attributes of an image that we can use to tell a search engine what the image is about.

So how are images optimized for better user experience and improved SEO? This article will examine several tricks we can take advantage of.

To help illustrate the image optimization techniques used in this article, I will apply the techniques against a random image I downloaded from the internet.

Here’s our sample image:

The image above is the final optimized image. For comparison, click the image to see the original unoptimized version.

The following are a few pieces of information from the original image to keep in mind as we explore our image optimization techniques:

Original filename: pexels-photo-414630.jpeg
Original image size: 4,800 KB
Original dimensions: 5,997pixels wide by 4,000pixels high

Tip #1 – Reduce Image Size

The process of optimizing an image for SEO starts even before an image is uploaded to the website. The first thing to consider is the size of the image.

Whether you are using a photo downloaded from a stock photography website or using a photo taken with your phone or DSLR camera, chances are the size of the image is much bigger than it needs to be for your website.

Most modern cameras and phones produce high resolution images that are at least 3,000 KB – 5,000 KB in size or even larger.

The size of the images you use on your website directly affects the overall loading speed of the website. Research by Google has found that nearly half of all visitors will leave a website if the pages don’t load within 3 seconds.

Keeping the image sizes as small as possible will mean you won’t be losing potential customers due to a slow loading website.

As a rule of thumb, aim to keep most of the images on your website below 100 KB in size.

So how do you go about reducing the size of images you plan to use on your website? It’s quite simple, really. There are many online tools you can use, but one of my favourites is ResizeImage.net.

Let’s head over to resizeimage.net now to start optimizing our sample image.

The interface has lots of options and might be overwhelming for someone using the tool for the first time. But there are only 3 things you need to do:

1) Upload the image: This might take a few seconds depending on the size of the image. Wait until your see a preview of the image on the page.

resize image step 1

2) Resize the image: Once the upload is complete, scroll down to Step 4 in the tool to Resize Your Image. The desired dimensions of your image will depend on what the image is being used for. For example, the size of an image being used as a banner will be different from an image being used in a blog post. But for most purposes, the width of the image doesn’t need to exceed 800 pixels. So go ahead and change the width to 800px. Make sure to keep the “Keep Aspect Ratio” flag checked. This will allow your image to keep its original proportions and not have it unnaturally “stretched”!

resize image step 2

Note: The dimensions of your images will ultimately depend on the design of your website and how the images will be used. You might need to experiment with different dimensions if you find 800px to be either too big or too small.

3) Optimize the image: Now scroll down to Step 7 to optimize the “quality” of the image. Select Progressive compression and set the Image Quality to 80%. The lower the Image Quality value the smaller the file size of the resized image. However, going too low will also reduce the visual quality of the image, making the image appear blurry or pixelated. Again, experiment with different values to get the right balance between quality and image size.

resize image step 3

That’s it!  Click the “Resize image” button to resize and compress the image in one step. Wait for the tool to do its thing and take a look at the results. In our example, we were able to reduce the image size down to 48.7 KB! That’s a reduction of about 99%!

resize image step 4

Tip #2 – Optimize the Image Filename

When you take a photograph using your phone or DSLR camera, or download a stock photo to use on your website, do you look at at the filename of the image?

A photograph taken with a phone or camera will typically be named as follows:

IMG_20170912_224752.jpg

When you upload the image to your website, the filename becomes part of the URL:

https://nubranch.ca/images/IMG_20170912_224752.jpg

When search engines come across an image on your webpage, they will parse the filename in an effort to identify what the image is about.

Keeping the default filename that is given to an image by a camera or a stock photography site will not provide any useful information for search engines to use when parsing your website.

That’s why it’s important to change the filename to something more descriptive helping search engines paint a clearer picture of what the image is about.

But what do you change the image filename to?

Well, that depends on the image itself and also the topic of your page. Let’s go back to our sample image to take a closer look. The original filename is:

pexels-photo-414630.jpeg

This doesn’t tell search engines anything useful. A more informative filename should include words that describe the image. Examples of filenames with descriptive text include:

coffee-cup-laptop.jpeg or coffee-cup-office-desk.jpeg

Some important naming conventions to keep in mind when renaming files:

  • Keep the filename short and descriptive.
  • Use dashes to separate the words to make it easier for search engines to parse the filename.
  • Avoid using stop words – these are words like “a” and “the”.
  • Start the filename with the more important keywords. For example, if our article was about office culture, a more appropriate filename might be office-culture-coffee-cup.jpeg.

Tip #3 – Use Alternative Text

The Alternative text, Alt text for short, is an HTML attribute of the image tag. The Alt text serves as a way to provide a short description of the image. Since Google can’t “read” an image, the Alt text provides Google with useful information about the subject matter of the image.

Additionally, special software, known as Screen Readers, used by the visually impaired rely on the content of the Alt text as a replacement to the images that appear on a webpage. So there is a user experience element to the Alt text, as well. This means using Alt text ensures your images are broadly reaching and provide an optimized user experience for everyone!

Another important consideration when generating the content of the Alt text is to make sure you include keywords you are trying to rank your page for. Including important keywords in the Alt text of an image can help search engines understand its relevance.

Consider these simple examples using our image of the coffee cup:

No Good:
<img src="coffee-cup" alt="" />

Better:
<img src="coffee-cup" alt="coffee" />

Best:
<img src="coffee-cup" alt="drinking cup of coffee at work" />

As you can see, an effective Alt text is one that paints a picture of what the image is depicting. A good way to come up with effective content for the Alt text is to ask yourself: How would I describe this image to someone who can’t see it?

You might be wondering at this point how to go about adding the Alt text to images on your website. Well, that really depends on the platform you are using for your website. The good news is that most platforms, like WordPress, Joomla, Wix and others, provide an easy-to-use interface for typing in the Alt text.

Since WordPress is the most popular platform, I’m going to use WordPress to illustrate how you would add the Alt text to your images.

Log in to your website’s admin area, and then head over to the Media Library area:

wordpress media library

Next, click on the image you wish to add the Alt Text to. Scroll down and locate the “Alternative Text” field. Add your text in the space provided, and hit the Update button. That’s it, you’re done!

wordpress add alt text to image

Bonus: Logo Image Optimization

A company logo is an image that is found on pretty much every business website out there. Typically appearing in the header, it is the first image a search engine will encounter on a website.

A properly optimized logo image is an opportunity to tell search engines what a website is about, and so the logo requires some special attention.

Surprisingly though, the logo is often the least SEO optimized image on a website.

That’s probably because the logo is added to a website when the website is first designed, way before optimization is part of the business’s SEO strategy.

Most logo image files are named “logo.png”. Although one could argue this filename is short and descriptive, it doesn’t really tell search engines what the website is about.

Here’s what the a typical IMG tag for a logo looks like:

<img src="logo.png" alt="">

The filename has been kept as the standard “logo.png” name and the Alt text was left empty.

So how do we optimize the logo image? Let’s put into action some of the image hacks we learned so far.

1) Logo Filename

Let’s take a look at the logo of the nuBranch website to illustrate a better way to name a logo image:

<img src="nubranch-web-design-local-seo-logo.png" />

Adding the main business activities to the filename can help provide a strong signal to a search engine letting it know what the site is about.

2) Logo Alt Text

As we discussed earlier, the Alternative Text is an attribute of the IMG tag that is meant to provide a textual description of the image. It’s also an opportunity to include important keywords we want our website to rank for, including the location of the business.

Looking at the nuBranch website again, let’s examine the ALT text of the logo image:

<img src="nubranch-web-design-local-seo-logo.png" alt="Web Design & Local SEO, Toronto" />

Just like the filename, the Alt text sends a strong signal to search engines, helping them understand what the website is about.

Wrapping Up

Image SEO hacks are often overlooked when it comes to optimizing a website or a blog post. The optimization areas outlined in this article include:

  1. Image Size: keep it under 100 KB
  2. Image Filename: keep it short and descriptive
  3. Alternative Text attribute: remember to include your keywords

Performing these simple image optimization techniques only takes a few seconds, but can result in boosting your search engine rankings, which can give you the competitive edge to outrank your competition!

Join our newsletter to receive our blog posts as soon as they are published!

Pin It on Pinterest

Share This