# Image placement handoff

An original fictional exercise from Overskill. Use the filled example to understand the decision, then complete the blank sheet with your own asset and destination. This sheet does not upload an image, change a saved app or certify accessibility.

## Filled example: one lamp, one square card

| Field | Completed fictional example |
| --- | --- |
| Asset identity | Source A, `source-a-desk-lamp.svg`; original vector illustration supplied with this exercise |
| Provenance and permitted use | Created for this exercise. No photograph, customer likeness or external artwork. For a real asset, record its source and confirm permitted use before proceeding. |
| Original dimensions | 1200×800 source pixels |
| Specific destination | The illustration inside one square desk-lamp card, reference size 300×300 |
| Required content | The complete green lamp: source bounds (850, 250) to (1050, 550) |
| Current treatment | `object-fit: cover; object-position: 50% 50%` |
| Calculated problem | The square shows source x=200…1000, y=0…800. The lamp reaches x=1050, so its rightmost 50 source pixels are excluded. |
| Chosen treatment | `object-fit: cover; object-position: 100% 50%` for this card only |
| Expected geometry | The square shows source x=400…1200, y=0…800. The entire required lamp rectangle fits. Other treatments may also satisfy the requirement. |
| Nearby readable text | “Green desk lamp — fictional illustration.” Do not put essential instructions only inside the image. |
| Text alternative for this stated context | Empty `alt` if the adjacent text already supplies the same information and the illustration adds no required meaning. Reassess if the context changes. |
| Real result | Not tested. Inspect the actual component at its observed desktop and phone sizes, including the saved/reloaded result. |

### One complete placement request

Supply Source A separately through an available supported input. The request below has no unresolved slots:

> In the square desk-lamp card, use the supplied Source A illustration (1200×800). Keep the entire green lamp within source bounds x=850…1050 and y=250…550 visible. For that card's image, use cover with right-center alignment, equivalent to `object-position: 100% 50%`. Keep the image's proportions and the square card shape. Keep the readable caption “Green desk lamp — fictional illustration.” Because the adjacent caption supplies the same information in this example, use an empty image alternative. Change only this card's image placement. Show the result so I can inspect the lamp at the actual desktop and phone sizes before accepting it.

This is a requested result, not a promise that a particular Overskill input, crop control or saved edit has been tested. If the required asset or named card is unavailable, stop and resolve that input rather than inventing a replacement.

## Filled alternative: two objects cannot fit the crop

Source B is a fictional desk kit. Both the notebook at (100, 250)–(300, 550) and the lamp at (850, 250)–(1050, 550) must remain in the same image. Their horizontal span is 950 source pixels.

| Destination | What a cover crop can show | Decision |
| --- | --- | --- |
| 600×300 hero | 1200 source pixels wide; centered vertical crop y=100…700 | Both objects fit with centered cover. Check the actual display before accepting. |
| 300×300 square card | 800 source pixels wide | No horizontal alignment can preserve a 950-pixel span. Use contain, a different composition or a different image. |
| 240×360 portrait panel | 1600/3 source pixels wide, about 533.33 | No horizontal alignment can preserve both objects. Use contain or redesign the placement. |

For the square, `contain` centers the whole image at 300×200 inside 300×300: 50 pixels of unused space above and below at the reference size. For the portrait, it is 240×160 inside 240×360: 100 pixels above and below. These are calculated sizes, not observed browser measurements. On a smaller display both the image and margins shrink proportionally; detail readability still needs inspection.

Do not remove the notebook from the requirement and call the lamp-only crop a repair. Do not stretch the source into the target shape: square `fill` scales width by 1/4 and height by 3/8, changing the objects' proportions.

## Choose the alternative text for its context

| Actual image job | Example treatment | Why |
| --- | --- | --- |
| Informative image without equivalent nearby text | `alt="A green desk lamp at the right of a wooden desk."` | Describes the relevant subject. It is an example for this illustration, not a universal formula. |
| Image is the only content of a link to the original artwork | `alt="Open the desk-lamp illustration"` | Gives the link its destination or action. |
| The same link already has visible text “Open the desk-lamp illustration” | Empty image alternative | The visible link text supplies the accessible name; avoid duplicating it. |
| Redundant illustration beside a complete equivalent caption | Empty image alternative | The caption already supplies the information. A more informative image would require a different decision. |

The comparison plate's captions state each subject, crop treatment and outcome. No essential wording exists only inside the SVG. This is a content decision exercise, not a complete accessibility audit.

## Blank handoff sheet

Leave unknowns visible. This is a planning template, not a prompt to paste with blank slots.

| Field | Your answer |
| --- | --- |
| Asset ID and exact filename/version | |
| Original source and permission to use it | |
| Original width × height | |
| One destination component and its job | |
| Observed or proposed container width × height | |
| What must remain visible, and why | |
| Required bounds in source coordinates, if known | |
| Current fit/alignment | |
| Selected fit/alignment, no-crop layout or different asset | |
| Readable nearby text | |
| Image's informative, functional or redundant role here | |
| Context-specific alternative text or reason for empty alt | |
| What is still unknown | |
| Actual desktop observation: viewport, component, retained content | Not run |
| Actual phone observation: viewport, component, retained content | Not run |
| Saved/reloaded result and exact asset identity | Not run |
| Decision: accept, revise, or hold; reason | Hold until the necessary observations are complete |

## Next step in Overskill

For an existing app, resolve the unknowns, provide the chosen asset through a supported input and request one named placement change in that app's composer. Review the result and the saved/reloaded state. This sheet does not establish that upload, processing, crop editing or persistence works in your app.

For a new app, use the [app brief builder](https://www.overskill.com/learn#brief-builder), edit its input fields and review the generated text before choosing **Start build**. Supply the asset and completed handoff separately; the link imports neither. Use [the design review](https://www.overskill.com/learn/make-an-app-easier-to-use) for the rest of the screen.

Keep the current layout or hold the request if permitted use, required content or the destination is unknown. A no-crop treatment can preserve the source, but it still needs an actual-size readability check.

Technical references: [CSS object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit), [CSS object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-position), and [W3C's image alternative-text decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/), read October 14, 2026.