Quick answer: Give each image a job, keep the essential information in readable page text, and export only as much detail as the reader needs. A beautiful picture that hides the answer or arrives after the reader leaves is an expensive decoration.
Start here: Choose the right visual · See a worked example · Copy the image record
For: small-business owners editing service pages and practical guides. This is an editorial production checklist, not a measured speed test or a promise of better search rankings. The example figures are hypothetical.
- Choose the visual by the question it answers
- Check provenance before polishing
- Size for the place it will appear
- Check the mobile crop before reducing bytes
- Worked example: a service-page photograph
- Alt text, captions and page text have different jobs
- Publish one image, then inspect the actual page
- Copy this image record
- Keep the rest of the page useful
- Useful detail: Use the same photo with a different text job
Choose the visual by the question it answers
Before opening an image library, finish this sentence: “After seeing this, the reader should understand…” If the only ending is “that our website has pictures,” reconsider the slot. A small diagram can explain a handover better than another photograph of a laptop having an excellent day.
Different questions need different evidence. A real photograph can show the entrance customers must find. A screenshot can locate a setting. A comparison table can expose a trade-off more precisely than an illustration. Sometimes a sentence is the clearest visual aid available.
On a small screen, scroll this table horizontally.
| Reader question | Useful format | Check before publishing |
|---|---|---|
| Where do I go? | Current entrance or location photograph | Recognizable landmark, correct location and text directions |
| Which option fits? | Comparison table or decision diagram | Same criteria for each option; exceptions explained |
| Where is this control? | Focused screenshot | Product version, readable label, no private data |
| What happens next? | Short process diagram | Owner, handover and failure route in accompanying text |
| What does this service feel like? | Relevant photograph or conceptual illustration | No implied real customer, result or product test |
Check provenance before polishing
Keep a record of who created the image, where it came from and the permission or licence supporting your intended use. A search result is a way to discover a picture, not evidence that you may reuse it. If permission is unclear, use an asset you own or obtain a suitable licensed alternative.
For a screenshot, inspect browser tabs, account names, email addresses, customer records and notifications before capture. Use a demonstration record where possible. Removing a name while leaving an identifying order number is not much of a disguise. Do not publish secrets and plan to blur them later.
Label conceptual or generated imagery where readers might otherwise mistake it for a real location, customer or tested product. An invented dashboard must not become the evidence for a feature claim.
Size for the place it will appear
Start with the rendered slot: a narrow article card and a full-width hero do not need the same file. Keep the original separately, crop for the intended composition, export a candidate and inspect it at the actual display size. Avoid enlarging a tiny source until text or faces become visibly soft.
There is no universal kilobyte target that makes every image good. A detailed chart may need more data than a simple illustration. Record a provisional size budget for your layout, then judge whether important detail survived. If you cannot read the labels, shrinking the file further has solved the wrong problem.
Try more than one export format or quality setting when your publishing tools support it. Compare file size and visible defects: ringing around letters, smeared details, broken transparency and rough gradients. Keep the smallest candidate that still performs its job. Do not change formats solely because a filename sounds modern.
Check the mobile crop before reducing bytes
A wide desktop image can become an unhelpful strip on a narrow phone. Inspect the same asset in its actual article slot at desktop and mobile widths. If the subject disappears after cropping, make a separate crop or choose a different image; a smaller file does not repair lost meaning.
Keep text a customer needs—service areas, opening times, a price condition or the next step—in the page itself. A screenshot of that text may help illustrate a process, but it should not be the only readable copy. Check the image with loading delayed: the surrounding heading and paragraph should still explain the section.
Worked example: a service-page photograph
Hypothetical case: a service page contains a 4,000-pixel-wide original weighing 3.2 MB. The editor tests a 1,200-pixel-wide crop weighing 240 KB, using decimal units for this illustration. The candidate removes 2,960 KB from the asset: 3,200 minus 240. Before accepting it, compare the subject position and legibility at the actual mobile crop; if the crop fails, try another composition even if its file is larger. That is a 92.5% reduction in this one file, not a measured 92.5% improvement in page speed.
- Preserve the purpose: the entrance and its sign remain visible in the crop.
- Check desktop: inspect the photograph at its largest intended display size.
- Check mobile: confirm the layout does not crop away the entrance or cover it with text.
- Check delivery: inspect the public page after publication; changing the local file is not proof that the site now serves it.
- Record the result: keep the old and new sizes, export settings, page URL and any remaining limitation.
If the sign becomes illegible, use an additional close-up or provide clear text directions. The reader should not need to pinch-zoom a photograph to discover which door to use.
Alt text, captions and page text have different jobs
W3C’s alt decision tree bases the text alternative on the image’s purpose. Describe meaningful visual information briefly. For an image that functions as a link or button, communicate the destination or action when it is not otherwise clear. Pure decoration can use an empty alt attribute. Complex information needs an equivalent explanation elsewhere on the page.
For the hypothetical entrance photograph, useful alt text might be “Clinic entrance beside the green pharmacy sign.” A caption can add the practical instruction: “Use the street-level door; the upstairs entrance belongs to another business.” Directions should also remain available as ordinary text. Do not stuff search phrases into a description that is meant to help someone understand the picture.
For a chart, preserve the values and conclusion in a nearby table or paragraph. A caption saying “comparison chart” does not carry the comparison. If a diagram only repeats a complete explanation, consider whether its text alternative would create unnecessary repetition.
Publish one image, then inspect the actual page
WordPress’s Image block documentation describes adding images and configuring image-related options. The options available in your editor can vary. Check the saved page rather than assuming a Media Library change updates every existing placement.
- Confirm the image loads on the public page and is not distorted.
- Check the crop at desktop and mobile widths, especially faces, labels and important edges.
- Test any enlarge-image link and provide useful link text.
- Make sure text in the image is still readable; otherwise provide an enlarged view and a text equivalent.
- Check the page without relying on the picture: is the essential instruction still understandable?
Copy this image record
Page and image: [URL / filename]
Reader question: [what this visual explains]
Source and permission: [creator / source / permission record]
Role: [informative / functional / decorative]
Alt text and caption: [final text]
Display and file size: [slot / exported dimensions / bytes]
Desktop and mobile result: [pass / issue / untested]
Owner and review trigger: [person / product redesign, location change or content update]
Release decision: publish when the image clarifies the page, its use is supported, important information survives the crop, and readers can obtain that information without seeing the picture. Replace or remove images that fail those checks.
Keep the rest of the page useful
Use the contact-page checklist for enquiry routes, the WordPress update checklist after maintenance, and the website handover checklist to record who maintains the assets.
Sources checked September 29, 2026: W3C WAI alt decision tree and WordPress Image block documentation, linked above. The production workflow and numerical example are editorial proposals, not source benchmarks.
To check the rest of the page beyond its images, use our website accessibility first-review guide. Include keyboard use, labels and the enquiry route in the review.
Useful detail: Use the same photo with a different text job
W3C’s alt decision tree considers how an image is used in its specific context.
The same photograph can be evidence in a case study and decoration on a contact page. Decide its text alternative at the point of use rather than copying one description into every placement.
Try this:
- State the information the image adds in this placement.
- Check whether nearby text already provides that information.
- Choose the appropriate alternative for this use, then check that a linked version still communicates its action.
Source: W3C WAI: the alt decision tree. Checked October 3, 2026. The practical check is a PSL suggestion.
