17 Apr 2012

The Ultimate Guide for Web Images and SEO

Fresh images can make websites more attractive

Image content is a powerful way to make an impression on a webpage. Instead of presenting a site full of dry, dull text-based content (of which I am frequently guilty!), the right image or graphic element can bring new life and visual interest excitement for readers.

As I’ve said many times before, search engine crawlers love text-based content. It’s easiest for them to consume and parse for relevance. As smart as computers are these days, they are still surprisingly dumb when it comes to interpreting the contents of a visual image. The Old School adage of never using text in images is being chipped away at with Google’s use of optical character recognition (OCR) tools when reviewing the content of a webpage. However, the kernel of truth in that adage still has relevance, as while OCR can be employed to reveal the text content within an image, it is far more unreliable than simply creating styled text to be read instead.

But what about non-text images? That’s even harder to get correctly interpreted. Generally speaking, without using some search engine optimization techniques, much of the human appeal value to great images is lost on search crawlers. Let’s learn how to change that. I’m going to look at how to use images on a webpage through my eyes as an SEO and explain ways to help optimize a page using images for search.

Develop keyword relevance in file names

  • Use keywords in the file name. To help the search engine most easily interpret the contents of an image file, use a file name that contains a descriptive keyword rather than a generic name. For example, the keyword signal found in an image named lasagna.jpg is much stronger than the same image named image0001.jpg.
  • Parse keywords correctly. When one-word file names just won’t do (which is the usual case), use hyphens to parse keywords in file names. For example, oregon-pinot-noir-wine.jpg describes an object in detail. Don’t mistakenly use underscores, plus signs, or CamelCasing in file names. These elements concatenate multiple words together and may not be parsed as you intend.
  • Leave out stop words. Stop words are words that do not contribute any keyword value. While your writing on the page should always be in natural language, your image file names should not contain non-keywords such as “the”, “a”, “she” and the like.

Keyword relevance via text content

  • Don’t put text to be crawled in images. This admonition holds especially true with local information, such as street addresses and phone numbers. As stated earlier, OCR is being used more and more to scan images, but it’s far from being universally reliable, especially outside of Google. Keep all critically important content you want crawled and indexed in text form.
  • Use alt attribute text to define the image content.The <img> tag offers the alt attribute where you can describe the image contents in words. The search engines regard the alt attribute text as a very strong source of keyword relevance, so this is an important SEO consideration. Note, however, that there are certain criteria you should follow when creating alt text:
    • Limit the alt text to a maximum of 150 characters, including spaces. Anything beyond that may not be read by the search engines.
    • The search engines put greater keyword relevance on words used at the start of the alt attribute (similar to the <title> tag), so write your alt text descriptions thoughtfully. As such, always put the copyright declaration at the end of the alt text.
    • When writing alt text, consider the image in context to the page (the actual target for keyword relevance). I like to use the example of a photo of wine bottles. The most optimal alt text for this image will differ when used on sites dedicated to a winery, wine bottle label collecting, and green glass recycling. The generic text “wine bottles” contributes next to nothing in keyword relevance to the page in any of these circumstances.
  • Don’t use <img> title text instead of alt text. The <img> tag supports both text used in both the alt and title attributes. The title attribute text does appear as popup text when the user’s mouse is paused over the image, but the search engines are specifically looking for alt text for establishing descriptive keyword relevance.
  • Don’t duplicate the image file name as alt text. I’ve seen this done, even down to the actual image name using hyphens and the file name extension, .jpg. Be more thoughtful in developing your keywords than that.
  • Omit alt text on non-content images. There’s no SEO value in adding alt text to images used as foundational color blocks or as your analytics tracking pixel (yes, I’ve seen that done). You don’t need keywords developed for those images.


  • Avoid using images in headings and anchor tag text. Because the text used with these tags convey SEO value to their targets, the aforementioned unreliability of getting keyword value from images containing text, it is best to use actual text in these locations.
  • Avoid displaying image content within scripts. While this can be done, this method typically means that there’s no viable way to provide the metadata about the image to the search engine crawlers. Even when text is provided in the script, it likely doesn’t convey the same keyword relevance as <img> alt text.

Page load speed considerations

  • Use minimal image size needed for web resolution. For editing photos, programs like Photoshop often offer “Save for Web” options to optimize the images for use on websites by automatically compromising between image compression (via the JPEG format) and minimal file size. If your image editor does not offer such a setting, configure your image compression settings so they look acceptable at 72 pixels per inch (ppi, or sometimes also referred to as dots per inch, or dpi), using the pixels setting as unit measures for width and height. Set the pixel dimension (typically width) to the size you want the image to be on your page. You can often use JPEG compression as high as 70-85% and retain the image quality you want.
  • Use the right image format. There are three image formats used on the web:
    • GIF is an old format used for 8-bit (256) color images. It compresses into very small files, and thus is not suitable for photos.
    • JPG supports millions of colors, so is a suitable format for photos, but uses a “lossy” compression scheme to reduce the file size. As a result, editing and saving JPG images multiple times can make an image muddy in appearance.
    • PNG is an alternative to GIF that supports more colors and has a higher compression rate than GIF. However, it’s not intended for photos, and may encounter compatibility issues with older, mobile browsers.
  • Consider using thumbnail images. If offering a large image size makes sense in the theme of the page (such as a photo image gallery), consider using very small thumbnail images (shown at 50 pixels width) on the page, linked to full-size versions of the images.
  • Use CSS sprites for non-content images. CSS sprites are multiple images that are aggregated into one file and use CSS to map out which part of the image file is shown on page. CSS sprites typically enable the web server to both serve fewer HTTP requests and download fewer kilobytes of content, which are both good for page load speed considerations. However, it also eliminates the SEO value of a keyword-rich file name and a specific <img> alt text for a particular image. As such, I recommend using CSS sprites for image-based web controls, icons, buttons, and other visual elements on the page that are specifically not content images, and using dedicated image files with <img> tags (and alt text!) for the most important content images of the page.
  • Be wary of loading images from external sources. You can’t control the size of the remote image, which can weigh on your site like a boat anchor in terms of page load speed. And there is another reason to avoid remote-sourced content: you can’t control the security of the object. Nice, clean sites can be the source of malware infections to their site visitors because the remote objects (or their servers) are themselves infected. Hosting a nasty malware vector can get your site purged from the index. Search engines look for malware when indexing sites in an effort to protect their search customers. If any is found, depending upon the type, either your SERP listing will contain a click warning or, in some cases, the listing will be removed from the SERPs altogether.

Images can make a page of boring text come alive with vivid color, imagery, and even animation, much to the delight of the reader. Optimizing the use of the images on a page for search can help earn the delight of search engine crawlers as well, which will help more searchers find your pages.


  1. Testy McBesty April 17, 2012 at 10:26 PM

    Very valuable information. You guys keep the post coming! I’ve learned so much in the hour I have been browsing your site.

  2. Rick DeJarnette April 19, 2012 at 4:44 PM

    Awesome! This is what we do! Keep coming back for more.

  3. Tara Kelley May 30, 2012 at 5:16 PM

    Great information, many thanks. Google also mentions the importance of “Provide a HTML snippet that other people can use to embed your image on their page while providing attribution. This snippet can include both the link to the image and a link to the source page on your site.” However I can’t seem to find any information on this. Is there a code block that can be copied and then modified to fit the image being optimized?

  4. Yerry August 26, 2012 at 5:21 PM

    Wow all a guide of how improve the SEO with images.
    Thanks for the info.

  5. Stephen September 29, 2012 at 12:54 PM

    Maybe I have twice overlooked this but, I have the image descriction and image. How, where and when do the two link? Does this info go under “rename” while in my file or do I post the two somewhere. I’m sorry, I have many, many images to “rename?” and this is all new to me.

  6. Steve October 3, 2012 at 4:16 AM

    “Don’t duplicate the image file name as alt text” can you elaborate on that point please? I often use the same (or very similar) for both.

  7. Brad May 31, 2013 at 2:30 PM

    Just used this article as a reference for a widget that we are working. Thanks!

  8. Robert June 20, 2013 at 6:47 AM

    Thanks for this post, Rick. But I just want to double check the part you wrote about the alt tag for images. You state that the image alt attribute text should be at max 150 characters.
    Do you have a source or experiment you’ve run which demonstrates this? I’m just curious as I have never found another source which states this. It does make inherent sense for sake of usability for visually impaired visitors to have a limit. Any sources? Thanks! 🙂

  9. Alan Wayler July 3, 2013 at 8:45 AM

    Thanks Rick. Another excellent, concise and well-written piece. Appreciate the simple lanaguage and examples.

  10. Shalin January 9, 2014 at 2:57 AM

    Using PNG images has been the way since 2.0 to reduce the file size to load a website quickly. I think you have covered all the facts regarding putting an img on a website clearly.

  11. Eugenio March 4, 2014 at 5:49 PM

    Hey, great tips about images! Thanks for sharing some great SEO tips 🙂 appreciated

  12. Lee Wilde March 20, 2014 at 10:20 PM

    Thanks for an easy to read article. I’m relatively new to seo practices, so I’m doing a lot of googling right now and I appreciate the information.

  13. Togotutor April 4, 2014 at 2:07 PM

    First of all great article Rick. I run both wordpress and static (html/css) website. On wordpress site; I have a longer article (detailed) with optimized images; load faster vs On static website I have less content; more images (non-optimized). With these differences I still see the static site do much better than the word press in serp (same backlinks) with all best practices applied to image optimization, load time, size, resolution..etc. What can be an issue here?

  14. Partha Sarathi Dutta January 18, 2015 at 11:38 PM

    The right image or graphic element (that you used on web) can entice your visitors to perform some desired action.. very true!


  15. Dan Callaghan February 9, 2015 at 7:20 AM

    Great post!

    In the new version of photoshop, you can save images with “tags” -, or you can right click on an image – go to properties and add it here. which i presume are meta tags. Do these have any major effect on the SEO?

    Many thanks!

Leave a Reply