Focus on the Details: Optimizing Images for Humans and Machines

In this article, I discuss how to get the most out of your site’s images by optimizing them for both people and search engines..

For many sites, images play an important role in the communication process. If used correctly, images have the power to make your articles come alive with clarity and vibrancy. Some visitors may merely notice the image and continue reading, while others will want to know more about your images and dig deeper.

While checking out your images, inquisitive guests will explore any clues available to them: alt tags, title tags, and captions, for example. Likewise, when classifying, categorizing, and ranking your site’s images, search engines such as Google employ complex algorithms that evaluate many different image-related aspects in their calculations.

Focusing on the details related to image optimization helps both search engines and live visitors to maximize the usefulness of your images. In this article, I present a healthy collection of image-optimization strategies designed to help you get the most from your images.

Fundamental Image Requirements

Before we begin our discussion of image-optimization techniques, let’s examine the basic requirements of implementing images on your site. Assuming that your content is delivered via some flavour of (X)HTML, here is the basic, standards-compliant format required to add an image to a web page:

<img src="path/image.png" alt="Image description" title="Image information" width="33" height="33" />

Let’s take a look at each attribute contained within the image element (<img>):

• src — (required) specifies the URL of the image.
• alt — (optional) describes the content of the image.
• title — (optional) image meta displayed as tooltip upon mouseover.
• width — (optional) declares the width of the image specified in pixels.
• height — (optional) declares the height of the image specified in pixels.

While only the src attribute is required technically, the alt attribute plays an important role in usability, accessibility, and optimization. Whenever possible, alt should be used to describe the contents of the image. Of course, images used for design, or other non-semantic purposes do not require a description.

The title attribute is also important, as it provides users with an additional layer of information about the image. Many people get confused when it comes to the use of alt and title; a good rule of thumb to keep it straight: “alt describes” while “title informs” — use alt to define the image and title to tell us about it. Finally, width and height are not required, but are recommended whenever possible for several reasons, including:

• Explicitly defined image dimensions (width and height) reportedly improve performance via faster page rendering.
• Use of width and height attributes preserves layout during page load and when images are missing.
• Use of width and height attributes prevents potential browser miscalculation of image size.

Now that we have reviewed the basics of image use, let’s dive into the fascinating realm of image optimization! Woo-hoo! ;)

Image Optimization Techniques

Ensure that your images adhere to web standards

If you haven’t been doing so already, get in the habit of implementing images in standards-compliant fashion. Web standards are designed to improve the quality of the web for everyone. Use of title attributes, for example, provides readers with additional context for your images. This is particularly helpful for screen-reading devices and other non-visual browsing methods. Likewise, using alt attributes ensures that your image content is represented even when your images are not displayed. Similarly, width and height attributes reduce inconsistencies and potential browser miscalculations, among other benefits. Moral of the story: web standards are for everyone!

Employ keywords in your alt attributes

Write clear alt attributes using descriptive keywords. Keywords help your visitors immediately recognize the nature of your images, while ensuring that search engines correctly classify and rank your images. Use concise alt descriptions that clearly define the content of the image, such that interpretation of the image is possible even without seeing it. This is especially important for search engines, which cannot as of yet understand and classify purely visual information. Search engines must rely exclusively on contextual data such as alt and title tags in order to distinguish and calculate the inherent worth of various images.

Optimize your image title attributes

Titles are great tools for image optimization because of their flexibility. In general, title attributes are meant to add additional context to an image by providing additional information concerning its properties. Thus, image title attributes may be written elaborately, with plenty of juicy keywords and juicy search phrases. Optimizing image titles with well-written, descriptive information will help your readers obtain more information while also facilitating proper search-engine classification and indexing.

Use descriptive, keyword-rich file names

Many people overlook the importance of optimizing the naming of your image files. Rather than naming an image file something like “image01.png”, use something more descriptive, employing hyphenated keywords whenever possible. For a tuff image of a Chevy Monza, for example, “1980-chevy-monza.png” would be preferred over “car001.png”. Hyphenation in your file names ensures that search engines interpret correctly the intended keywords, while descriptive names in and of themselves also help people recognize downloaded copies of the image without having to open it.

Create keyword-rich, hyphenated image directories

This tip holds especially true when dealing with large image collections. The idea here is that the URL or file path is inherently associated with the image itself and is potentially used in the ranking algorithm of various search engines. Thus, it is reasoned, naming your image directories with a couple of optimized keywords such as /chevy-monza/ will contribute to the overall ranking of your images and thus increase traffic. With large collections of images, name each subdirectory with a representative collection of hyphenated keywords. While this technique may prove less beneficial to your visitors, it may ultimately help reel more of them into your site.

Add a caption to each of your images

Of course, not every image needs a caption, but showcase post images, gallery chunks, and other sideline image-content may be greatly enhanced with the addition of a keyword-rich and descriptive caption. As mentioned, search engines rely on the immediate context within which your images are located. Captions are great for contributing semantic value to your overall image strategy by associating literal meaning and keyword-rich search phrases. Even better, human visitors greatly benefit from available captions, which may be read without requiring a mouseover.

Use longdesc attributes for key images

The nearly dead longdesc attribute provides a link to a lengthy description of the image, and may be used to associate the image with a keyword-rich context, which is very useful to non-visual interpreters. Although some will argue the usefulness of this tactic, it is clear that search engines such as Google employ contextual clues such as image attributes to evaluate and classify images. Use of the longdesc attribute may seem like overkill, but it provides an opportunity to associate even more keyword-rich search phrases with your image content. Not only will the extra boost possibly help the ranking of key images in your collection, it will also facilitate greater understanding for visitors dropping in via text-only browsers such as Lynx. Plus, proper implementation of longdesc would convey a sense of completeness and attention to detail that most sites simply fail to achieve.

Enable search-engine access to your image directories

If your images are being displayed along with your web pages, any visitors with access to your pages obviously also have direct access to the images contained therein. Search engines also have such access to images, however if you are shooting for more traffic by targeting direct image searches, then you should ensure your image directories are accessible as well. Such access not only enables search engines to crawl comprehensively your collection, it also may provide additional SEO benefit, as target images are associated within the context of other, keyword-named images. Visit your image directories directly to see if they are accessible to search engines. If they are not, check your robots.txt, .htaccess, and JavaScript files for rules that may be preventing access.

Locate images in proximity to headings, strong and emphasized text

As search engines establish semantic relationships between your various images and their immediate context, images located near keyword-matching headings, strong and emphasized text may appear as more relevant and receive higher ranking than similar images unassociated with such textual elements. Place key images directly beneath article titles, next to emphasized text, strong text, and perhaps even keyword-laced links. Let the search engines know that your images play a vital role in the communication of your message, thereby elevating and/or emphasizing their perceived level of importance. Fortunately, many bloggers implement this technique by default, as post images are generally located near the top of the article, beneath the title.

Surround images with relevant, keyword-focused text

Following the same principles as discussed in the previous section, surrounding your images with targeted, keyword-focused text will further the associative relationship between relevant textual material and image content. In my experience, text within 20 words or so of either side of your image element should directly concern itself with the semantic emphasis of the image. In other words, if you were to examine the source code of a web page employing such a technique, you would see the <img> element surrounded with highly relevant, keyword-focused text. If you think about this, such strategy is logical from the perspective of human visitors as well: use of images should occur within a relevant context, such that comprehension of the intended message is facilitated.

Deploy focused keywords in image-link anchor text

As with links to image-containing web pages, any direct links to images should deploy keyword-focused anchor text with correspondingly relevant title attributes. Although directly linking to images seems rather rare, any opportunities to do so should involve link text that directly applies to its target image. Search engines place heavy emphasis on the anchor text of links, thereby benefiting the target resources of such links, whether web page or direct image. Of course, well-crafted and relevant anchor text also helps visitors navigate throughout your site. It’s a “win-win!”

Use optimized, high-quality images (or make them available)

Using high-quality images is a good thing. Of course, you want to optimize them for bandwidth considerations, and whatnot, but they definitely should be of decent quality. Use of quality images not only conveys a sense of professionalism for your blog, it also encourages visitors to download a copy and perhaps even surf for more. High-quality images also help convey meaning with greater authority; sites employing shoddy images may be perceived as less legitimate than sites with crisp, clear versions of the same material. Especially if you are targeting image searchers, use or make available high-resolution versions of your key images. Engines such as Google provide image searchers a way to filter results according to size, enabling wallpaper hounds a way to scout free chunks without all the hassle. Catering to such behavior with a few high-quality gems seems like an excellent way to funnel traffic to your site.

Surely, not everyone will want to employ every trick on the list. Hopefully, if you have been blogging for any significant amount of time, you have already implemented a strategy encompassing a variety of these methods. If you are new to the game of blogging — or image-optimization, for that matter — feel free to employ as many of these techniques as is necessary to improve the effectiveness of your images. Further, if you have ideas or tips related to the use and optimization of images, please share them with us by dropping a lil’ comment via the form below.

About the Author

Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.