Agent Wranglers

SEO-65Recommended

Name image files for what they show

Give every content image a short file name that says what it shows, in lowercase words joined by hyphens. Place it with an <img> element near the text it belongs to, never as a CSS background.

By Agent Wranglers. Updated .

How to do it

Google asks for short, descriptive file names instead of names such as IMG00023.JPG, and says it does not index images set in CSS. It also looks at the text around an image, so put the photo next to the paragraph it explains. Use a format Google indexes, such as JPEG, PNG, WebP, AVIF or SVG. With srcset or <picture>, keep a fallback in src. Make the files small as Send small, modern images says.

Examples

JavaScript example

const GENERIC = /^(img|image|dsc|pxl|photo|screenshot)[-_ ]?\d+/i;
const badNames = images.map(src => src.split('/').pop().replace(/\.\w+$/, ''))
  .filter(name => GENERIC.test(name) || name.split('-').length < 2);
assert.deepEqual(badNames, []);

Python example

import re
from pathlib import PurePosixPath

GENERIC = re.compile(r"^(img|image|dsc|pxl|photo|screenshot)[-_ ]?\d+", re.I)
bad_names = [PurePosixPath(src).stem for src in images
             if GENERIC.match(PurePosixPath(src).stem) or len(PurePosixPath(src).stem.split("-")) < 2]
assert bad_names == []

How to check

A build test lists every image in the main content. Each is an <img> with a src, and no file name matches ^(img|image|dsc|pxl|photo|screenshot)[-_ ]?\d+ or has fewer than two words.

Sources

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/seo/images-and-video/descriptive-image-names">Agent Wranglers SEO playbook</a>. In code you write, add a comment next to it with the same link.