Image SEO

This is an SEO factor that commonly gets overlooked, but it can make a big difference between ranking lower on the web page, ranking at the top for your target keyword, or even ranking in the zero position. 

The fixes are simple, but not identifying or even realizing that the images are causing a problem is something that I see quite often with SEO web pages. 

In this post, we will share best SEO suggestions for optimizing images on your web pages and your website. 

What are the factors that you should consider when optimizing your images?

Based on the US Patent for ranking images for web retrieval, the following factors should be optimized.

The file naming technically and contextually.

  • Keyword relevancy between search queries and the file naming of images. 
  • The image size.
  • Other websites that have a similar version of the image. 
  • Links to the URL of the image.
  • Colours and pixels
  • Computer readable media
  • Click-through data on images in relation to search queries [9]

Image optimization at the server level.

Favicon

The Favicon loads in the browser and is a file that sits in the root folder. Many people don’t optimize this file and don’t realize that it can delay the page loading time on your website. 

This can be the case if you upload the favicon via a CMS and the CMS requires you to upload the file in a format that is larger than the 16 x 16px required if you upload it directly to the web hosting server as favicon.ico. [4]

Test the page loading time and check the waterfall to see the loading impact that the favicon has on the website. 

Resource: Favicon optimization

Image file naming

The naming convention used for the URL is important. You want the file name to be in lower-case and as descriptive as possible, and not use any unnecessary characters such as version numbers or special characters. [3, 5 , 6]

For example, if you have a web image that is of a diamond engagement ring, then add the image file to the web hosting server with the extension diamond-engagment-ring.

Make sure to use hyphens/dashes to separate the words as well. 

Image file requests

Make sure that the images are uploaded and served from the local server and that they aren’t being requested from an external site through a link embed. 

Once the images are optimized, you can configure the images to be served from a CDN network. 

Keep the image library clean

You don’t want unused or duplicate images to take up unnecessary storage space. This could slow down the site. Delete any unused or multiple variations of files. 

Configure browser caching

You don’t want users to keep reloading the images from your local server on every visit. Instead, configure browser caching so the images can load quicker. 

Web page images

Image size

The file size or weight will have an impact on the web page loading time. It is important that the size is optimized in terms of the dimensions (pixel width and height), as well as the format that the image is saved in. 

Image resizing

You may need to convert the image into a BMP format to convert it to a smaller file size. You will then be able to reduce the dimensions and save the file in a JPEG or PNG format. 

Optimize the image based on the dimension specifications that’s required. Ideally, keep the dimensions less than 900px, or ideally around a working range of 640px. Then save the image in a file format that will minimize the file size. [2]

You can also save the file size in a smaller dimension than the default size and let the image expand, however you risk the quality of the image being affected. 

Resource: Converting images to webP

Image compression

This is useful if you need to compress an image file format that you have to work with. In this case, using an image compressor such as Compressor.io or TinyPNG should suffice. 

If you want to convert the image to a WebP, you can also use Squoosh

I personally don’t recommend the server-side compression since it will be limited to compressing the file sizes down if you haven’t optimized the files prior to uploading them to the web server. 

Note – There may be additional compression tools on your web server that can be used once the local image files on your server are optimized. 

Image title

Name the title of the image with a description of what the image is about. 

Image alt tags

Add alt text that describes what the image is about. 

Image description

Create a brief description with the target keyword to describe what the image is about. 

Image caption

Add a keyword description to the image caption. Search engines will use the information in the caption to better understand what the image is about. 

Structured data for images

You can add structured data mark-up to the HTML to help search engines understand the content and context of the image. You can follow the guidelines on Schema.org and in Google’s Developer Guidelines

Loading images

Lazy load

You can opt to lazy load images on your web page. However, if the site’s images are optimized for size, then the entire page will load quickly anyway. If you are loading large image files, then lazy loading them could offer a better solution. 

These can also be an ideal solution when deciding to use images as placeholders for videos. 

You can check optimization guidelines on Google’s guide for lazy loading for images and video

You can also click here to read more about lazy loading techniques

Pre-load

Pre-loading the image files can also offer a good solution if you need to load larger image files. You should still optimize your image files so that they are small in size and quick to load. You may want to consider using the pre-load feature for any large hero or header images. 

Pre-loading images using JavaScript

Here is the JavaScript code for preloading images.The JavaScript can be added into the HEAD or BODY tag. In order for the pre-loading to work, the user’s browser must have JavaScript turned on. 

The only customization it needs is the list of images to preload. Info is in the code.

<script type="text/javascript"><!--
// Image Preloader version 1.0
// Copyright 2009 Bontrager Connection, LLC
// https://www.willmaster.com
//
// Leave the next line as is.
var preload = new Array();

// List the images to be loaded, each 
//   image assigned to preload[#], with 
//   consecutive numbering starting at 0.

preload[0] = "/images/imageA.jpg";
preload[1] = "/images/imageB.jpg";
preload[2] = "/images/imageC.jpg";
preload[3] = "/images/imageD.jpg";
preload[4] = "/images/imageE.jpg";

// Leave the next 5 lines as they are.
var loadedimages = new Array();
for(var i=0; i<preload.length; i++) {
loadedimages[i] = new Image();
loadedimages[i].src = preload[i];
}
//--></script>

[8]

Pre-loading images using HTML and CSS

This is simply a div with CSS style “display:none;”. The div’s content is an HTML img tag for each image to preload.

It is prudent to specify a width and height of “1” in case a browser is surfing with CSS turned off. One-pixel square images would be little if any distraction.

The CSS/HTML tag can only be put in the BODY of the web page.

Here is the code.

<div style="display:none;">
<img src="/images/imageA.jpg" width="1" height="1" border="0" alt="Image 01">
<img src="/images/imageB.jpg" width="1" height="1" border="0" alt="Image 02">
<img src="/images/imageC.jpg" width="1" height="1" border="0" alt="Image 03">
<img src="/images/imageD.jpg" width="1" height="1" border="0" alt="Image 04">
<img src="/images/imageE.jpg" width="1" height="1" border="0" alt="Image 05">
</div>

[8]

Static vs dynamic image solutions

Many designers are keen to use dynamic image solutions such carousels or moving images such as gifs. As engaging as they are, they slow down the loading time of the website and can actually distract the web user. 

Instead, it is better to serve static images on the web page. 

Choose engaging images!

You want people to engage with the content that is on your web page. People will engage with content that they can extract value from. So you will need to know the types of images to select so that you will maximize the engagement with your audience. 

There are a few types of engagement that you will be optimizing your web images for. 

Time on site

Images will keep and drive people’s attention when they are browsing through the web page. This will improve the time on site, minimize bounce rates, and may lead to more conversions. 

Shareability

This will allow you to get inbound links to your web page, and will allow you to get the flow of Page Rank from the linking page so your site will rank higher in the organic search results. Links to the image files themselves won’t improve the flow of Page Rank to the web page that you want to improve the ranking for. [6]

What types of images should you consider publishing?

Photos

High-resolution photos are highly engaging. You can source images from Creative Commons or sites such as Unsplash, Flickr or Pixabay. Or you can pay to license the content from sites like Shutterstock, Getty Images or iStockPhoto

Alternatively, you can hire a photographer to take pictures for you. Just be sure to get the correct license arrangement. 

Benefit

They are great for engaging people with the web page content and provide a ‘high-end’ feel, which should make the aesthetics of the web page look more like a magazine. 

Data visualization

Visualizing data in the form of:

  • Graphs
  • Charts
  • Infographics
  • Maps
  • Drawings
  • Proof

These images can trigger web visitors to not only engage and validate your web content, but to also share it on the web since it creates a reference source. 

You will need access to data or statistics. [1]

You can use the data that you have access to such as analytics. Alternatively, you can source data from surveys or polls that others have conducted or you can do it yourself through Google Surveys or polls on Facebook. 

Image commentary

This can be news or even running commentary that’s been made by someone. For example, you can create a commentary headline with an image like the front page of the newspaper. 

Alternatively, you can take commentary or quotes and upload them as images. 

You can take screenshots from social network sites such as Twitter, Instagram, Reddit, YouTube, Tumblr, and Facebook. You can then repurpose the commentary and republish the image. 

Note: You should obtain the necessary permissions or add the relevant credit that’s required. 

Badges

If you want people to claim credit or affiliations to your website, you can create an image badge and provide instructions for them to add the badge to their website. This is common with award link building, partners that have gained accreditation, or sites that want credit or recognition. 

Stock images

You can publish your own stock images and reuse those images as Creative Commons images on sites like Flickr to gain link attributions back to your web pages. 

You can do a search to see which web images are getting alot of links to their site. Then those stock images can be reused to get inbound links on the web. 

Taking pictures of landmarks, landscapes, buildings, surfaces, and models can be popular for gaining link attributions. 

User-generated images

You can invite people from your target audience to submit their images to be featured on your website. There is a good chance that they will naturally share the link to the web page if you publish their image. 

Comparison or transformation pictures

These are popular and you can easily find sites that are interested in showcasing this theme. Once the image is published on your website, you only need to share a link to the page where the image is featured. 

Quotes or inspirational text

These can get shared easily since it connects with the reader emotionally. You can have the reader share the image to their social media and instruct them how to share and attribute the image if they share it on their website. 

Cool images of stuff in your industry. 

There are images that will interest people in your industry. Find out what that ‘stuff’ is and publish images of those items on your site. Then share it with the sites in your industry so they can share the images  on their sites and attribute the link back to your web page. 

Corporate or business images

You can easily share images about your business and attribute the links back to your website. Images that can work include:

  • Corporate headshots
  • Logos
  • Products
  • Staff members
  • Office
  • Working environment
  • Workers in action
  • Product reviews
  • Testimonials
  • Before and after
  • Proof of work
  • Case Studies

Reverse image credit

You can also use images from publishers and reference their image. You can then contact them to let them know that you have featured their image on your website. The aim is to get them to publish a link on their site referencing the post. This can be done as a roundup. 

This tactic uses the ego link building tactic. 

This guide should help you realize how to influence ranking images and how to incorporate images into your site’s SEO strategy. 

If you have any thoughts that you would like to share, please comment below. 

Thank you for reading. 

References

[1] Image link building – Stacey Macnaught

[2] How to Reduce a Image size Less than 20KB

[3] File names and file types – Google

[4] How to make the fastest loading favicon for mobile-first speed. 

[5] Google image best practices

[6] SEO starter guide – Google

[7] Google – Links to images do not help Page Rank

[8] Pre-load images with CSS or JavaScript

[9] Click-through re-ranking of images and other data – Google Patent

Join the newsletter

Get updates that will allow you to grow your website's income over the next 12 months.

Powered by ConvertKit

2 thoughts on “Image SEO”

Leave a Comment