SEOelinks field guide · useful visual systems
A useful website image has a job before it has a filename. Start with an honest visual purpose, place it beside the explanation it supports, choose the right text equivalent, deliver a durable public asset and test the page visitors actually receive.
An image can make an unfamiliar service easier to understand, let a reader compare two steps, show the shape of a process, break up a long explanation or make a page feel more navigable. It can also become a vague decoration, a slow blank rectangle, a confusing screen-reader interruption, a stale asset from a former campaign or a file that exists only in an editor preview. Those outcomes are not solved by adding a keyword to an alternative attribute. They are solved by treating each important image as a small public-content release with a purpose, context, owner and final check.
This guide is for a small business that creates service pages, educational articles, case-study-free explainers or marketing pages and wants a defensible image workflow. It is not a promise of Google Images traffic, a command to use every image format, a stock-photo shopping list, a substitute for an accessibility review or a request to fill a media library with generic files. Its narrower purpose is to make image decisions easier to explain. A reader, editor, designer and developer should be able to agree on what the visual contributes, what the text alternative should communicate, where the file came from, how it is delivered and what was checked in the public page.
Start with the image brief, not the format or keyword
Before searching a library, opening a design tool or uploading a file, state the image’s job in one plain sentence. “This diagram helps a reader see the five checks before a visual is published” is a job. “This photo makes the service workflow less abstract” is a job. “This icon labels the call button” is a job. “We need more images for SEO” is not yet a job, because it does not identify a reader question, a page location or an observable contribution.
A brief does not need to be heavy. It can record the intended page, adjacent heading, reader question, visual type, source or rights note, what information must be visible, what detail can safely be omitted, text-equivalent decision, preferred crop and delivery requirements. The purpose of the record is not to turn routine editing into bureaucracy. It is to stop a team from compensating for an unclear image with exaggerated captions, stuffed alternatives or unsupported claims about what the visual depicts.
Google’s Image SEO documentation places images in the context of the page. It says Google extracts information about an image’s subject matter from page content, including captions and image titles, and recommends placing images near relevant text on pages relevant to the image subject. It also says filenames can offer light clues and that alt text should be useful, information-rich and appropriate to its surrounding content. [1] The practical lesson is not that every nearby sentence must repeat a keyword. It is that a reader should understand why an image appears where it does.
Consider the difference between a generic skyline beside an article about local service pages and a simple diagram that separates a service area, a real address and a customer journey. The skyline may establish mood, but it cannot prove local presence or explain the decision. The diagram can earn its place if the article introduces the decision in text, the visual clarifies it and a caption says what the reader should notice. Both can be legitimate assets if honestly described. Neither should be presented as client evidence, an actual location, a ranking result or a local business fact when it is not one.

Decide what kind of image the reader is meeting
Alternative text is not a universal inventory of every visible pixel. It is a text substitute for the information or function that matters in context. Google’s technical-writing accessibility guidance describes alt text as a short, descriptive functional equivalent for people who cannot view an image. It recommends explaining an image in the context of the surrounding text, briefly summarizing its purpose and avoiding repeated surrounding content. [2] That means the same photograph can need different wording on two different pages because the reader task is different.
W3C separates common image roles: informative, decorative, functional, images of text, complex images, groups and image maps. [3] A small-business workflow does not need to memorize every category before publishing a post. It should ask a direct question: if the image vanished, would the reader lose information, lose a useful control, lose a required text statement or simply lose decoration? The answer identifies the appropriate treatment more reliably than a CMS field label.
Informative image
It conveys a concept, example, comparison or real visual information. Use a concise alternative that communicates the essential point the reader needs here. Place supporting detail in surrounding copy or a caption where everyone can read it.
Decorative image
It adds atmosphere, separation or surface texture without contributing required information. Use an empty alternative when it is genuinely decorative, so assistive technology does not announce an irrelevant filename or repeated description.
Functional image
It is a link or control. Name the action or destination—such as “Open contact form”—rather than describing the button artwork, unless the visual treatment itself changes the action.
Complex image
It carries a process, chart, map or dense diagram. Keep the alternative brief and give the complete meaning in nearby body text, a caption, a data table or a linked detailed explanation.
Decorative does not mean low quality. A decorative wave, texture or visual divider can contribute to hierarchy while being ignored by screen readers through an empty alternative or a CSS-background treatment. The important distinction is that the page should still make sense without the element. If the image contains an instruction, an offer condition, a location claim, a service comparison, a data point or a required name, it is not decoration. Put that information in actual page text as well as—or instead of—inside an image.
Functional images need a different habit. A chat icon that opens a chat route is not usefully announced as “Blue speech bubble.” Its accessible name should explain what happens: “Open chat,” “Request a review,” or “View the image checklist,” as appropriate. A logo that links home normally needs an action-oriented name or an equivalent accessible link label. The purpose is to make navigation clear to a person using a screen reader, speech input or keyboard, not to narrate a graphic style.
Text inside an image deserves special care. W3C advises avoiding text in images when it can be presented as real text, except for cases such as logos. [3] On an educational page, a critical process step should not exist only inside a graphic. Put the explanatory sequence in headings, paragraphs or list items. The image can reinforce that sequence. This also gives a narrow-screen reader an accessible route when the graphic is too small to inspect comfortably.

Write alternatives from purpose and context, not a keyword pattern
Useful alternatives often sound ordinary because they are written for a person trying to understand the page. A visual beside a paragraph about verifying a business fact might be described as “Checklist connecting an approved fact, visible copy, an owner and a public test.” On a different page, the same checklist could need a different description if its role is to show the final validation step. A bare “SEO checklist” is too vague when the process matters. A long catalogue of colors, shadows and every arrow can be too noisy when the reader needs one decision.
Google gives a similar distinction in its examples: missing alternatives provide no text substitute, keyword stuffing creates a poor user experience and contextual descriptions are better. [1] The goal is not to remove meaningful search language from a description. If the image truthfully depicts a visual content-refresh workflow, those words may be naturally useful. The goal is to avoid using an alternative attribute as a hidden collection of query variants that a reader would never find helpful.
Start with the adjacent section’s question. What does the image help answer? Then name the central object or relationship, the meaningful action or change, and any detail essential to that answer. Stop when the description functions as a replacement rather than a script. A final period improves listening flow because many screen readers pause at punctuation. Google’s technical-writing guidance suggests one or two sentences when possible and advises against introductory filler such as “Image of” or “Photo of.” [2]
| Page situation | Unhelpful approach | Purpose-led alternative decision |
|---|---|---|
| Decorative separator under a heading | Describe the gradient, wave and colors. | Use an empty alternative because no meaning is lost without the separator. |
| Diagram explaining an article workflow | Use only the filename or repeat the heading word-for-word. | Name the process relationship briefly and explain the stages in the article body and caption. |
| Icon used to open a quote form | Describe the icon’s shape. | Provide an accessible label for the form action or destination. |
| Before/after visual with a factual comparison | Claim results that cannot be supported or label both panels “image.” | Describe the visible comparison only when its facts and context are actually present and maintainable. |
| Repeated brand mark beside text already naming the brand | Announce the brand mark on every occurrence. | Use an empty alternative if the text already provides the same information and the mark is not a unique link/control. |
Captions and alternatives can cooperate without becoming duplicates. A caption is visible editorial text; it can explain why a diagram matters, name a figure for later reference or provide a brief takeaway. Alternative text is primarily a replacement for the visual. For a complex figure, use both: a short alternative that identifies the kind of process, and a caption plus nearby headings and paragraphs that make the entire sequence available in ordinary reading order. This page’s diagrams follow that pattern deliberately.
Do not use an alternative attribute to repair a weak source. If a photograph was supplied without clear permission, if a chart has no verifiable dataset, if a screenshot includes private information, or if a generic stock scene could be mistaken for a client site, changing the wording does not solve the problem. Pause the asset, find a lawful and truthful source, create an explanatory diagram that does not imply real-world proof, or publish the page without the visual. An omitted image is easier to revisit than a misleading one.
Plan the public file before uploading it
A media file is part of the delivered page, not merely an item in an editor library. Decide where it will live, whether the public URL is durable, whether it will be reused consistently, what file form is appropriate, whether its intrinsic dimensions fit its job and how it will behave when a narrow screen renders it. The answer is not always “make it as small as possible.” A blurry visual can prevent a reader from understanding a diagram, while an unnecessarily heavy one can delay the text and controls around it. The requirement is appropriate quality for the task and a deliberate delivery method.
Google says standard HTML image elements help crawlers find and process images, specifically noting that it can find images in the `src` attribute of an `img` element and that it does not index CSS images. [1] This does not prohibit CSS backgrounds for purely decorative surface treatments. It does mean that an informative photograph, diagram or product visual should not rely only on a background image if the page needs the image to be a normal content asset with a text alternative.
When a page uses `picture` or `srcset` for responsive sources, Google recommends keeping a fallback URL in the image’s `src` attribute. [1] The fallback is a practical resilience measure: not every browser, crawler or client supports every responsive-source pattern. A content image should remain meaningful and reachable without depending on one advanced branch of the delivery system.
Supported file formats are an implementation choice, not a marketing claim. Google documents BMP, GIF, JPEG, PNG, WebP, SVG and AVIF for images referenced through `img src`. [1] The useful choice depends on the asset: a crisp schematic may fit SVG or PNG; a photograph may suit WebP or AVIF where the delivery chain supports it; a legacy or compatibility fallback may be necessary in a responsive setup. Match filename extension to the actual type and preserve the visual information the reader needs.

Use descriptive filenames as light metadata, not a substitute for context
Filename decisions are easier when they happen before upload. A short descriptive name gives editors a recognizable asset in the library, helps prevent accidental reuse of the wrong version and supplies a light subject clue. Google recommends short descriptive filenames instead of generic names such as `image1.jpg` or `IMG00023.JPG`. [1] A sensible pattern might be `image-asset-workflow-validation.png` rather than an internal export label or a long string of repeated keywords.
Filename detail has limits. It should not turn into a sentence fragment stuffed with service, city and ranking terms. It should not claim that an illustration depicts a real project, an actual customer, a verified team member or a local office if it does not. It also cannot make an irrelevant visual relevant. The page’s heading, nearby paragraph, caption, alternative and actual image subject all need to agree. A file called `brampton-seo-results-chart.png` is not acceptable evidence of results merely because a filename says it is.
Version control matters for durable images. When a visual changes materially, either replace it through a controlled asset workflow where the public URL is intended to remain stable or create a clearly versioned new asset and update the page deliberately. Avoid leaving several nearly identical uploads whose relationship is unclear. An editor should not have to guess whether `diagram-final-final2.png` is the current accurate process. The asset ledger described later gives a small team a way to name an owner and change trigger without creating a complex media-management system.
Make captions, nearby copy and visual hierarchy work together
Images are easier to understand when readers encounter them after—not before—the question they answer. Introduce a process in a heading and paragraph; use the visual to consolidate the relationship; use the caption to identify the figure and state the takeaway; then continue with the next decision. That order supports scanning without forcing a reader to decode a diagram before they know why it is there. It also creates a useful text route if the image is blocked, hidden, minimized or read through assistive technology.
Do not make a caption carry a new claim that the surrounding article cannot support. “Figure 2. Four alternative-text decisions for image roles” is a clear explanation. “Figure 2. The proven way to rank image results” is an unsupported outcome claim. Captions should help readers locate and interpret a visual, not manufacture authority. Where an image uses a fictional or generic example, say so through neutral labels such as “example workflow” or “illustrative decision,” rather than presenting it as a customer story.
Visual hierarchy also affects responsiveness. A wide dense process diagram may look orderly on a desktop while its labels become illegible on a narrow screen. Reduce labels, place the detailed explanation in prose, create a vertical layout where appropriate or use a table that can scroll accessibly. The goal is not to force every desktop composition into a mobile screenshot. The goal is to preserve the essential reading order, image purpose, captions and actions when the space changes.
The site’s broader website redesign SEO checklist explains how a visual and template change can alter page signals, while the technical SEO checklist places image delivery inside the wider crawl, rendering and page-foundation review. The on-page SEO checklist covers broader relevance and page clarity. This guide supplies the more specific asset decision routine: define the visual’s job, make its meaning available in text, deliver it reliably and validate the public version.
Give the image an owner and a change trigger
Most image failures are maintenance failures. A process graphic can describe an older workflow. A staff photograph can remain after a role changes. A product visual can show an outdated model. An accessibility alternative can no longer match a redesigned diagram. An image URL can point to a temporary file that disappears after a campaign. These are ordinary reasons to maintain an asset record, not reasons to treat every image as permanent once uploaded.
A compact ledger can include the public URL, source or rights note, the intended page and section, image role, summary alternative decision, caption, owner, last review date, relevant change trigger and validation state. A trigger can be a page redesign, service-process change, source-image replacement, campaign expiry, content refresh, business-fact change or reported accessibility issue. The record makes it easier to locate an affected asset when a wider change occurs.
Ownership should name a role or accountable person who can verify the image’s public use, not imply credentials that do not exist. An editor may own a caption, a service lead may verify a factual process diagram, a developer may own delivery markup and an operations lead may approve an asset source. The important point is that someone can answer a correction request. “The marketing folder” is a storage location, not a maintenance owner.

Use CDNs and image sitemaps as discovery inputs, not promises
A content delivery network can be a sensible way to serve durable public files. Google notes that image sitemaps can include image URLs from other domains and says a site using a CDN is encouraged to verify ownership of the CDN domain in Search Console so crawl errors can be reported. [1] That is a practical discovery and diagnostics consideration. It does not mean every CDN-hosted asset will be crawled, selected, indexed or shown in a particular Google feature.
Use an image sitemap when it adds real discovery value, such as an image set that might not otherwise be found through ordinary page crawl paths. Do not create an image sitemap as a substitute for a usable landing page. The important image should be embedded in contextual public HTML, served successfully, connected to relevant text and not blocked from the environment where it needs to be seen. An XML entry can point to an asset; it cannot supply missing page relevance, source truth or useful alternative treatment.
Consistency matters when a site reuses one image on several pages. Google recommends consistently referencing the image with the same URL so it can cache and reuse it rather than request it repeatedly. [1] Use that guidance as a maintenance prompt: decide which version is canonical within the content system, avoid accidentally serving conflicting variants and document the intended public path. It is not a reason to reuse one generic image across unrelated pages simply to reduce asset work.
Validate the delivered page, not only the editor library
An upload confirmation does not show what visitors receive. A content editor can see a local preview while the public URL returns an error, a caching layer can serve an earlier page, a responsive branch can fail on a narrow device, a lazy-load rule can delay a critical image, or a template can rewrite an alternative attribute. Validation starts after the release in the public rendered page. Open the target URL, inspect whether the intended image is present, confirm that it loads, read the nearby copy and caption, and check that the text alternative and HTML delivery method match the image role.
For an informative image, verify that a standard image element exists, its source resolves publicly and its natural dimensions are plausible for the intended asset. For a responsive image, check that the fallback `src` remains available. For a decorative image, confirm that it does not interrupt assistive reading with a misleading name. For a complex diagram, confirm that the article contains the complete explanation in text. For a functional image, test the keyboard and pointer path to its destination. These are delivery and accessibility observations, not evidence of a future search result.
Performance checks also need scope. Google says images are often a major contributor to page size and advises applying modern image optimization and responsive techniques to provide quality and speed. [1] That supports checking whether an image is appropriately sized and whether the page remains usable. It does not justify making an unmeasured claim that a format change will produce a specified loading improvement or ranking effect. Report what is observed: file loads, visual is readable, fallback is present, page layout remains stable, or a delivery issue needs further work.

Review image changes during content, template and service updates
Image maintenance should appear in the same release routine as copy, links and metadata. A content refresh can change the surrounding argument so an existing figure no longer answers the right question. A template update can strip captions or change image dimensions. A service update can make a process diagram stale. A redesigned layout can turn a functional icon into an unlabeled control. A move to another asset host can leave old URLs in markup. These changes become easier to handle when the team includes image checks rather than assuming media remains correct because it still appears in the editor.
The separate content refresh workflow helps decide whether a page should be retained, revised, combined or deferred. Apply the same choices to its visuals. Retain a diagram when it still reflects the current process. Revise it when labels or steps change. Replace it when a source or rights note no longer supports use. Remove it when it has become decorative noise or duplicates nearby prose. Defer a new visual when its purpose, factual basis or accessible description is not ready.
Teams should resist the urge to solve an image concern by bulk editing every alternative attribute with a repeated phrase, changing all filenames into a location-keyword pattern or applying the same lazy-loading rule to every image. Those actions ignore context. A useful workflow makes one page’s asset more truthful and usable at a time, then records the observed delivered result. This mirrors the evidence-first logic in the structured data governance guide: public representation should follow a maintained fact and purpose, not a dashboard prompt or a coverage target.
A small-business image release check
- Name the reader question and visual purpose before sourcing or designing the image.
- Record a truthful source or rights note; do not imply a generic visual is local, client work or proof.
- Classify the image as informative, decorative, functional or complex before choosing alternative treatment.
- Place the image near the text it supports, and use captions to state a visible editorial takeaway where helpful.
- Use concise context-specific alternative text; use empty alternatives only for genuinely decorative or duplicated content.
- Keep required instructions, data and claims available in ordinary page text rather than image pixels alone.
- Use a durable public URL and a crawlable HTML image element for informative visual content; retain a fallback `src` in responsive patterns.
- Confirm public load, layout, alternative treatment, captions and narrow-screen reading order after release.
- Record the owner and the change trigger, then state only the observed delivery facts—not a promise of search outcomes.
Common questions
Does every image need alt text that describes every visual detail?
No. The alternative should provide the essential information or function in context. Decorative images can use an empty alternative, while complex images need a short summary plus a detailed explanation in nearby document text or a linked accessible equivalent. A long visual inventory often interrupts rather than assists reading.
Will descriptive filenames and alt text make an image appear in Google Images?
No. They are useful discovery and accessibility inputs when they truthfully describe relevant content, but Google controls crawling, indexing and presentation. A valid filename, alternative, image sitemap, CDN URL or public load test does not guarantee image inclusion, preview selection, rankings or traffic.
Can an important diagram be a CSS background image?
Not when it carries information that users need. Google documents that it finds images in HTML image elements and does not index CSS images. More importantly, a background image is not a reliable route for a meaningful alternative text. Use a normal image element and provide the explanatory information in text.
Should an image be lazy-loaded?
Make the decision from the image’s place in the experience, not a blanket rule. Below-the-fold assets may be candidates, while a hero or other immediately needed visual requires testing so it does not delay useful page content. Validate the actual delivered narrow and desktop page after the change.
Can a stock image support a local or customer claim?
No. A generic illustration or licensed stock image may be useful for a conceptual section if it is presented honestly. It should not be labeled or described as a real client, actual office, service result, staff member or local proof unless that fact is independently supportable in the page.
Keep image work connected to the reader’s task
Images are strongest when they remove a small piece of ambiguity for a real visitor. They can make a process easier to follow, show the relationship between steps, label an action, add a useful comparison or make a page easier to navigate. Those jobs depend on the surrounding content and public delivery, not on a claim that every asset must become a search result. A concise source-to-public workflow gives a small business a repeatable way to add visuals without turning their media library into a collection of unsupported marketing signals.
When an asset has a clear job, a supportable source, a context-appropriate text equivalent, nearby explanation, a durable public path and an owner who can revisit it, publish it and verify the delivered page. When those conditions are uncertain, simplify the visual, add the needed text, replace the asset or defer it. That is not missed optimization. It is a disciplined way to keep public visual content useful, accessible and maintainable while leaving crawling, indexing, preview selection and ranking to the systems that determine them.
