By Bruce Clay

When you include pictures, video, or other non-text elements in your website, you need to describe them in the surrounding text for SEO purposes. This is the key to optimizing your multimedia elements so that search engines know what they’re about. Search engine spiders can’t watch a video or see a picture accurately yet, though they are working on it. So you must explain the image, video, or any other non-text element using words.

For images (including JPEG, GIF, and other types of picture files), you have several places where you can put descriptive text that the search engines can read. You can refer to what the image is about in the following locations:

  • Text surrounding the element: Include descriptive text either above, below, or next to the picture, video, or other non-text element. A caption or a lead-in sentence that explains what the image shows works well. This gives search engine spiders text they can read and index, but it also helps communicate your intended meaning to users.

  • Filename: The filenames of your image, video, and other types of multimedia files should contain actual words.

  • Alt attribute: You can also put brief descriptive text into the Alt attribute attached to any image. For example, alt=1968 Ford Mustang California Special Gas Cap.

Naming images

Because both people and search engines are going to read your filenames, make sure to use good, descriptive words when naming your image, video, and other types of multimedia files. Here is another opportunity to provide readable content to the spiders. Instead of naming your image A1234.jpg, call that photo of a skier falling on his face skier-faceplant.jpg so that the search engines know what it is, too.

To separate words, don’t use a space or an underscore. Instead, use a hyphen or a period to separate words in your filenames. But try not to overuse them either — just because you can have many dashes in a URL doesn’t mean that you should.

Also, keep filenames brief. Remember that long filenames cause URLs to get longer, too (such as if one of your images gets returned in an image search). Because people generally avoid clicking long URLs, keep your names to a reasonable length. Six words in a filename would generally be too much.

Keep it simple: A picture of a Ford Mustang with a dented fender shouldn’t be called ford-mustang-with-a-dented-fender.jpg, just call it dented-ford-mustang.jpg or mustang-dented-fender.jpg. You’ll have on-page text and Alt attributes to explain to the engines what the content of the image is.

Handling image size

Size matters, especially when it comes to images. Here are some recommendations for resizing your images and their Alt attributes.

Alt attribute length

You want to write descriptive text around images and in their Alt attributes. But how much text you use depends on the size of your image. For example, if you have a 50-x-70-pixel photo of a writer’s face next to an article, it’s enough to just put the person’s name in the caption. You could include a longer description of her credentials in the byline copy, but you wouldn’t need an entire paragraph of text captioning a small image like this.

On the other hand, larger pictures should have longer text descriptions. If the image is important enough to take up a lot of screen space, it’s important enough to tell the search engines about. Explain the picture with at least a sentence of text.

Image dimensions

If pictures help engage your users, big pictures can satisfy them even more. If you’re offering very large images, you might want to put them on a separate page so that only users who really want to see the full-size view have to wait for them to display. However, you don’t want the search engines to miss the fact that that picture is part of your page’s content, and not some separate, unrelated page.

To keep it related, you can show a thumbnail or small version of the image on your original page, with a text description, Alt attributes, and the works. Then if a user clicks to view the full-size image in a separate window, consider including a text description there, too — but definitely give it an Alt attribute and filename that describes what’s in the image.

When writing Alt attributes for images, make the length proportionate to the image’s size on-screen. Create a brief Alt attribute for a small image, and longer ones for large images. As a general guideline, try to make sure that Alt content does not exceed 12 words.

Image size for mobile

Someone visiting your website on a smartphone doesn’t want to wait long for your page to display. One second is about all the time you have to show at least the top of the page before a user decides your site is not mobile friendly.

Slow site speed can be caused by many things, but fat image files are a common culprit. You want to make an image’s dimensions shrink so that it fits on a smartphone screen, and webmasters have several tricks up their sleeves to do that (by including responsive design; using JavaScript, which is a coding language; and specifying height and width attributes in the image tag).

However, simply squeezing a big image to fit a smaller layout can cause your page to load too slowly, which may be compounded by an image-heavy web page. That’s because changing the viewing size doesn’t reduce the size of the image file that’s being sent, sometimes across low-bandwidth connections, to a person’s mobile device. So not only do you want your images to look good, you also them to download quickly.

Image optimization for mobile should involve reducing the amount of data by reducing the picture’s file size, not just its dimensions. This can be done with various web design techniques including image compression, JavaScript, and/or the HTML5 <picture> element.