Images

05 / Media

Images are part of a page's content, not just visual decoration. Proper filenames, useful alt text, defined dimensions, and relevant surrounding content help browsers, users, screen readers, and search engines understand how an image fits into the page.

Where internal links connect pages to each other, image attributes connect each visual to the topic of the page it sits on. A well optimized image answers one simple question:

This lesson covers the alt attribute, image filenames, width and height, surrounding content, and accessibility. It also explains how to use SiteAuditLint to find missing alt text, generic filenames, and images without defined dimensions.

1. Alt text

Describe the image's purpose

Alt text provides a text alternative for an image when the image cannot be seen or loaded. Screen readers read the alt text aloud to users, while search engines can use it as additional context about the image and the surrounding page, including for image search.

Good alt text describes the meaningful subject or function of the image rather than stuffing keywords into the attribute:

<img src="technical-seo-audit.png"
     alt="Technical SEO audit showing broken links and missing page titles">

Avoid descriptions that add no useful information:

<img src="image123.jpg" alt="SEO SEO audit SEO tool">

For decorative images that provide no meaningful information, an empty alt attribute tells assistive technology to skip the image:

<img src="divider.svg" alt="">

Check for

• Missing alt attributes.
• Empty alt text on meaningful images.
• Uninformative descriptions.
• Keyword-stuffed alt text.
• Alt text that does not match the image.
• Decorative images that should have empty alt text.

2. Image filenames

Give images meaningful names

The filename can provide additional context about an image before the image itself is interpreted. Compare a camera-generated name with a descriptive one:

A descriptive filename makes the image easier to identify in content management systems, media libraries, downloads, and audits.

Check for

• Generic filenames.
• Camera-generated filenames.
• Excessive numbers or random characters.
• Filenames unrelated to the image.
• Excessively long filenames.

3. Width and height

Define image dimensions

Images without defined dimensions can cause the browser to adjust the layout as images load, pushing text and buttons down the page. This movement is measured as layout shift. Providing width and height lets the browser reserve the right amount of space before the image file arrives:

<img src="seo-audit.png"
     alt="SEO audit report"
     width="1200"
     height="675">

The dimensions should represent the image's intrinsic proportions. An image that is 1200 by 675 pixels has a 16:9 aspect ratio and should keep that ratio when displayed. CSS then controls the final, responsive presentation:

img {
  max-width: 100%;
  height: auto;
}

Check for

• Missing width attributes.
• Missing height attributes.
• Incorrect aspect ratios.
• Images that are unnecessarily large in file size or pixel dimensions.
• Images that create layout shifts.

Dimensions are primarily a technical and user experience consideration, but they belong in an on-page audit because poorly handled images affect how a page loads and behaves.

4. Surrounding content

Give images context

An image rarely exists in isolation. Headings, paragraphs, captions, links, and nearby content explain what the image represents and why it matters:

<h2>Find broken internal links</h2>

<p>
  Review broken URLs and the pages linking to them before making changes.
</p>

<img src="broken-links-report.png"
     alt="Broken internal links displayed in an SEO audit report"
     width="1200"
     height="675">

The heading and paragraph establish the topic, while the alt text describes the image itself. Each layer does its own job.

Avoid relying on an image to communicate information users cannot access elsewhere when that information is important to understanding the page, such as prices, instructions, or data embedded as text inside a graphic.

Check for

• Images placed near relevant content.
• Useful captions where appropriate.
• Images that support the page topic.
• Important information hidden only inside images.
• A mismatch between image content and surrounding text.

5. Accessibility

Make images usable for everyone

Image optimization is also an accessibility task. Users may browse with screen readers, disable images, use slow connections, or interact with pages in ways that differ from the site's visual design.

Accessibility should guide the implementation, rather than treating alt text simply as an SEO field.

6. Image optimization checklist

Before publishing a page, check each meaningful image.

7. SiteAuditLint workflow

An image audit should not stop at finding images without alt text. Review the relationship between the image, its HTML attributes, and the content surrounding it.

8. Before and after example

Consider an image showing a broken link report:

<img src="IMG_4827.jpg"
     alt="SEO report"
     width="1200"
     height="675">

The dimensions are fine, but the filename is camera-generated and the alt text is vague. A more descriptive implementation would be:

<img src="broken-internal-links-report.png"
     alt="Broken internal links displayed in an SEO audit report"
     width="1200"
     height="675">

9. Practical exercise: Audit five images

Choose five images from a website you manage and record what you find for each one.

The goal is not to give every image more text. The goal is to make every meaningful image understandable, accessible, and properly connected to the page content.

10. Key takeaways

• Alt text provides an accessible text alternative for meaningful images.
• Image filenames should describe the image rather than use meaningless generated names.
• Width and height help browsers reserve space and reduce layout movement.
• Surrounding content gives images additional meaning and context.
• Accessibility should be part of image optimization from the beginning.
• Image SEO is contextual. A descriptive filename or alt attribute cannot compensate for irrelevant or poorly placed content.

Knowledge check

Ready to go further? Review the technical SEO checklist, or revisit how pages connect in the Internal links lesson.