01
Step-by-step
- 01
Use an image with a purpose
The image should explain, demonstrate, identify, compare, or support content.
- 02
Export appropriate dimensions
Do not deliver a much larger file than the rendered size requires.
- 03
Choose an efficient format
Preserve required transparency, detail, and compatibility.
- 04
Reserve layout space
Provide width and height or an aspect ratio.
- 05
Write appropriate alternative text
Describe meaningful function or use empty alt text when purely decorative.
- 06
Load responsibly
Prioritize above-the-fold media and defer lower-priority images.
02
Verification
- The visible page matches the intended topic and audience.
- The page can be crawled, rendered, and indexed when intended.
- Claims, examples, code, and links have been checked.
- The page has a measurable next action or outcome.
- A future reviewer can understand what changed and why.
03
Before you change the website
- Define the purpose and expected result of website images.
- Capture the current state using semantic structure, keyboard operation, focus order, labels, names, contrast, alternatives, errors, and assistive-technology behaviour.
- Identify the source template, component, plugin, content owner, and release path that controls the output.
- Prepare a test case, approval path, backup or rollback method, and post-release verification plan.
04
Quality-control checks for website images
- Repeat automated checks, complete the relevant manual task, and record the browser and assistive-technology context.
- Check representative page types and edge cases instead of confirming only the example used during implementation.
- Confirm the change did not create repairing markup without checking the complete keyboard and screen-reader task.
- Record the implementation date, owner, release reference, evidence, and next review trigger.
Next useful action
Turn website images into an accountable record.
A tested implementation of website images with deployment notes, rollback context, and retained verification.