Your Guide to Optimizing Images for SEO

By Greg Snow-Wasserman

Your Guide to Optimizing images for SEO

This article is part of an SEO series from WooRank. Thank you for supporting the partners who make SitePoint possible.

Images are a vital part of creating quality, engaging content online. People have short attention spans and no one wants to open a page only to find an unbroken wall of text staring back at them. Photos, infographics, illustrations and other images are a key way to supplement your text to make your page look attractive and consumable. In fact, here at WooRank, we have a two image minimum policy for our blog (for posts about things other than company and product news). And, as an added bonus, images have the potential to bring in more traffic through image search results.

However, to make this happen you need to optimize your images for search engines as well as human users. Lucky for you, we’ve created this guide to using images in a way that will complement the rest of your on page SEO.

How to Choose Your Image

Image Relevance

Making your pages engaging and easy to read is a major part of user experience, which can have a noticeable impact on your SEO; bad UX leads to high bounce rates, which is a ranking signal used by search engines. So choosing the right image for your page can be almost as important as how you optimize it for SEO.

Choose your article and blog images strategically so they:

  • Have the same subjects or topics as your articles,
  • Emphasize the point you are making,
  • Enhance the reading/viewing experience instead of disrupting it.

It’s also important for you to place images on your page that are relevant to the text around it. Along with file name, alt attributes and image titles (which we’ll cover a little bit later), search engines use the page content surrounding images to determine what the image is showing. It’s an important signal used to determine relevance to a keyword used when searching Google or Bing image search.

Avoid using stock photos. They make your page look generic and unengaging, or give it the feel of a marketing brochure. Plus, it’s pretty difficult to find one you can use without paying a lot of money. If you want to use images, make them yourself, or get a photographer and/or illustrator.

Free Images

Use your own images whenever possible. This will help you use images that are the most relevant to your content, and it will also help you avoid the potentially thorny issue of copyright. However, if you can’t reliably create your own quality images, there are some tools and services out there that will help you find images:

  1. Canva: Canva is an extremely helpful tool you can use to create designs for your content. They have a library of stock images, vectors and illustrations you can use to make custom graphics. There are also filters and other features you can use to edit your own images.
  2. Freepik: Freepik is an image search engine that crawls hundreds of free image sites and returns results most relevant to your search term. It’s a great resource for free vectors, photos, illustrations, PSDs, icons and almost any other design feature you could need.
  3. Google Images: Google’s free image search engine, Google Images, has a huge selection of images. However, it returns results regardless of copyright status. To avoid usage issues, select “Labeled for reuse in Usage rights under Search tools:

Google Images usage rights

  1. Flickr: Flickr is one of the biggest, if not the biggest, image hosting and sharing sites. Many Flickr users share their work under the Creative Commons license, which has multiple versions that allow for reuse with certain restrictions:
  • Attribute License: This license allows you to reuse an image (or an edited version, known as a derivative) as long as you give the original owner, in this case the Flickr user who posted it, credit.
  • No Derivative License: This is similar to the Attribute License except you can’t create derivatives. That means you can post the original version as long as you give proper attribution.
  • Noncommercial-No Derivative License: You can use the original images only for noncommercial purposes. This license does not support the use of edited versions of the image.
  • Noncommercial License: Or, attribute noncommercial license. You can use these images for noncommercial purposes only, as long as you give property credit.
  • Share Alike License: This means that the images licensed through Creative Commons are covered by a different, original copyright. These licenses can include attribution and noncommercial aspects as well.
  • Public Domain Dedication: These works are completely in the public domain. You are free the use these images without restriction.
  • Public Domain Work: This is slightly different from the Public Domain Dedication license. These images have lost their copyright, due to it expiring or lapsing, or they are not eligible for copyright protection.

File Names

After you’ve found, or created, the right image, optimization begins with choosing the right filename. They provide a benefit to your page’s SEO, and are critical for ranking in image search results. Just like when you’re creating a URL, use your target keyword and use it at the beginning. Never use the default image file name, like “DSC00087.jpg” unless it’s absolutely unavoidable. Many content management systems use the file name to create the image title, so this will pay off for you even more later. Some other file name best practices to follow for SEO are:

  • Use hyphens (-) as word separators. Don’t use underscores ( _ ) between words. Search engines use hyphens as markers between words, but they don’t recognize underscores at all. That means they’ll see “image_file_name.jpg” the same as if you used “imagefilename.jpg”. This is important because, obviously, human searchers will use spaces when using Google. It also means that Google will be able to better determine the topic of an image and how it relates to a keyword.
  • Be descriptive and accurate. Try to include as much detail as you can. If Google can’t find suitable page content, it will use the image’s filename as the page’s search snippet for image search results. If you’re writing a blog post about cars, include the make, model, year and color.
  • As usual, make sure you’re using your keywords naturally. Trying to use too many keywords, or keywords that aren’t related to the rest of the page content, will look like spam and could hurt your SEO.

Title and Alternative Attributes

Image titles and alternative attributes (commonly called alt attributes, alt tags or alt text) are attributes that go in the image tag. In an image tag, they look like this:

<img src="image.jpg” alt=”alternative text” title =”image title”/>

Use image alt attributes to provide more detail about your images that you weren’t able to include in the filename. Think of it as a description of an image for someone who can’t see it — because that’s exactly what the alt text does. It’s used by text-only browsers and screen readers for visually impaired users. Search engines rely heavily on alt text because they can’t actually see an image.

Alternative text is considered one of the more important aspects of an image for SEO. In fact, Google has an entire heading dedicated to it in their image publishing guidelines. Make sure your alt attribute accurately describes the image and includes your target keyword, ideally in ten words or so. There is no hard and fast character limit for alt attributes like there is for title tags and meta descriptions, but it’s best to be as concise as possible.

A good example of well-optimized alt text for a page about men’s fashion accessories would look like this:

<img src="mens-dress-shoes.jpg” alt=”Markowski Italian mens leather dress shoes” />

Using just “mens shoes” or “mens dress shoes” as alt text is less than ideal, but it’s better than leaving it blank. Keep your keywords specific to the image — using something like alt=”mens dress shoes mens leather dress shoes Markowski leather shoes mens” is obviously keyword stuffing and is unlikely to help your search ranking. If you have multiple images targeting the same keyword, differentiate the alt text by including characteristics like color, brand name or size.

Use WooRank’s SEO audit to verify that your images have correctly implemented alt attributes.

WooRank alt attribute criterion

Image titles are less important for SEO. They should provide any additional context that wasn’t in the alt text. Image titles are generally reserved for human users — Google doesn’t really look at them as a search signal.

Image Size

Page speed is an important part of optimizing your site, both from human UX and SEO perspectives. People don’t like to wait for pages to load; a study from 2011 found that desktop users abandon a page if it hasn’t loaded after three seconds, and Amazon famously determined that even just a second of latency could cost them $1.6 billion in lost sales per year.

Maximize your page speed by scaling your images down to the smallest file size possible while maintaining image quality. One option, if you create or edit your own images, is to use “Save for the Web” in Adobe Photoshop. This option will automatically minimize the file size while optimizing image quality. If you don’t have Photoshop, there are tools online you can use to compress images and scrub unnecessary stuff like EXIF data:

Use Google’s PageSpeed Insights tool to find instances of unoptimized images slowing down your page. You can also use Developer Console in Chrome, Web Console in Firefox or Tools Console in Internet Explorer to find assets that are slowing down the page speed.

PageSpeed Insights optimize images

See here for more ways to optimize images and other on page assets to decrease page load time.

Image Sitemap

There’s one more way to optimize your images for SEO: your XML sitemap. Add <image> attributes to your normal sitemap after the <loc> tags. An XML sitemap including images looks like this:

<url>
    <loc>https://www.example.com</loc>
    <image:image>
   <image:loc>https://www.example.com/image.jpg</image:loc>
    </image:image>
</url>

The following attributes are optional, but you should include as many as you can to give search engines all the information they need about your images:

  • <image:caption> – A short caption or description for the image.
  • <image:geo_location> – The geographic location of the image. This value should be city, state or country, not numerical longitude and latitude.
  • <image:title> – Your image’s title.
  • <image:license> – The URL pointing to the license of your image.

You can include up to 1,000 <image:image> tags for each URL. However, if you have that many images, you should consider creating an image sitemap and a sitemap index file, which is a sitemap for your sitemaps.

More than On Page SEO

Image optimization has great benefits for your on page SEO: Increasing user engagement, decreasing bounce rate and consistent use of keywords throughout the page. You can use images as an avenue for link reclamation. Use Google Image’s reverse image search to find instances of other people using your graphics, and send a nice email asking for attribution when a site hasn’t given you credit. This should be a relatively easy step in your link building campaign with a high success rate.

  • http://auct.eu/ Dima Taras

    how bad are autogenerated image names like 157c571e91a028.jpg ?

    • WooRankTeam

      Filenames are very important for image SEO. Filename is one of the ways search engines figure out what in your image is about. A name like “157c571e91a028.jpg” doesn’t tell Google anything about your image, so it’s unlikely to rank well in image search results.

      • http://auct.eu/ Dima Taras

        and if the alt will be ok, but filename is random string?
        I mean does
        filename is ok , alt is ok ~= filename is random, alt is ok ?

        and 1 more question is this will make your images to be in google image search, or it will also increase google page search position ?

  • WooRankTeam

    A few years ago Google stated that image metadata is something that they “looked at,” but it isn’t used as a ranking signal. Depending on your CMS, image metadata can be mapped to image attributes that we do know search engines use. For example, WordPress is able to map image title and caption data from Adobe Lightroom. So you can use metadata to streamline your SEO process, but by itself won’t have an impact.

  • https://www.cycle-africa.co.za/ Cycle Africa

    Very interesting reading. Many thanks for this awesome article, time to pull my website apart and check the finer points..

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Instant Website Review

Use Woorank to analyze and optimize your website to improve your website to improve your ranking!

Run a review to see how your site can improve across 70+ metrics!

Get the latest in Front-end, once a week, for free.