The playbook
Website Image Optimization: Template and Field Guide
This website image optimization template turns a broad task into a record another person can use. It captures asset, display size, file size, then connects that information to a decision. Copy the table into your working document or system and create a separate record for each item in scope.
Put the task in context
Export screenshots near the sizes at which they will display and verify that interface text remains legible. Reserve dimensions in the layout. Compression that removes useful detail may reduce file size while making the image fail its explanatory purpose.
Copyable worksheet
| Field | Entry instructions |
|---|---|
| asset | Record the asset associated with this page or interaction record. Use a stable reference so later updates can be matched. |
| display size | Record the display size associated with this page or interaction record. Keep the value specific enough for another owner to interpret. |
| file size | Record the file size associated with this page or interaction record. Keep the value specific enough for another owner to interpret. |
| format | Record the format associated with this page or interaction record. Keep the value specific enough for another owner to interpret. |
| Decision field | Entry instructions |
|---|---|
| Observed problem | Describe the actual condition and where it was observed. |
| Recommended action | State the smallest action that resolves the documented problem. |
| Evidence | Link to the record, observation, or test supporting the action. |
| Owner and next review | Name the accountable person and when the decision should be revisited. |
How to complete the worksheet
Begin with asset. Use the same reference throughout the record so notes are not attached to the wrong item. Then choose suitable dimensions formats and compression. This establishes the information required before the worksheet becomes a request for action.
Next, reserve image space to avoid visible layout movement. Use the observed problem and evidence fields to explain why that step is needed. A useful entry describes an actual condition, such as uploading huge source images to small thumbnail slots, rather than a broad instruction to “improve performance.”
Finally, check clarity at actual display sizes. Put export responsive sizes and inspect visual quality on devices in the action field only when it addresses the observed condition. If the problem is different, change the action. The template is a structure for judgment, not a reason to apply the same fix everywhere.
Illustrative completed decision
| Part | Illustrative entry |
|---|---|
| Problem | Uploading huge source images to small thumbnail slots |
| Action | Export responsive sizes and inspect visual quality on devices |
| First check | Choose suitable dimensions formats and compression |
| Follow-up check | Check clarity at actual display sizes |
| Outcome to define | image weight on important pages |
Adapt the fields without losing meaning
You can add fields required by your team, but each should change a decision or preserve necessary context. Keep factual observations separate from recommendations. If display size changes, record the new value and its effective date instead of silently rewriting the context of an earlier decision.
Use the record in a handoff
Ask the receiving owner to explain the next action using only the worksheet. Missing context becomes visible quickly during that exercise. Repair the record before applying the structure to a larger batch. Keep image weight on important pages connected to the item so the team can later assess whether the action was useful.
Design recovery as part of the experience. People enter incomplete information, use slow connections, and return to interrupted tasks. A clear error and a preserved input are often more useful than another decorative element.
Skip the manual steps. Let AgentixHUB run this for every client.
Start now