responsive image derivatives: create reviewed sizes from an archived master

Responsive image derivatives let your application deliver an appropriate version of an approved image without discarding the master. The important distinction is between reducing the same composition and creating a different crop. Both produce new files, but only the second changes what the viewer sees.

Genace returns image output locations. It does not create your site’s breakpoint exports or responsive markup. Collection, resizing, crop review, encoding, storage, and HTML delivery belong to your own post-processing pipeline.

Measure the actual layout

Inspect the component’s displayed widths at representative viewports. Record the largest useful source size and whether the image’s shape changes across layouts. Avoid generating dozens of arbitrary widths that no component uses.

Choose a small derivative family. For example, a card might need a compact and a larger source while a hero also needs a wide version. Keep the choices tied to real layout measurements rather than treating every generated pixel as something every visitor must download.

Create derivatives explicitly

With ImageMagick installed, this example reduces a local archived master while preventing enlargement. It does not contact a model.

magick approved-master.png -resize "480x>" card-480.png
magick approved-master.png -resize "960x>" card-960.png

The ImageMagick resize reference documents the operation. Record the tool version, input hash, requested geometry, actual dimensions, and output hash in your derivative manifest.

Distinguish resolution from art direction

Change	Meaning	Required review
Smaller dimensions	Same composition with fewer pixels	Detail and compression check
New crop	Different visible region	Meaning and subject check
Different format	Different encoding	Visual and compatibility check
Text overlay	New composed content	Copy and layout approval

Do not label a cropped file as a simple resize. If a narrow placement needs a closer subject view, record its crop rectangle and review it independently.

Connect files to browser hints

Use srcset and sizes to describe available widths and the expected display slot. MDN’s responsive-image guide explains this selection mechanism. Keep the width descriptors accurate for the actual exported files.

A browser can select among supplied files, but it cannot repair a bad composition or a missing subject. Review the rendered page at wide and narrow widths, then inspect which file was requested in the browser network panel.

Keep alternative text tied to the image’s page role. A crop that removes a meaningful object may require another description or may be inappropriate for that placement entirely.

Acceptance checklist

Confirm the master is archived, every derivative has measured dimensions, no unintended enlargement occurred, and crop changes have separate approval. Verify browser selection in the real component and compare delivered bytes with the expected variant. A failed derivative export should be retried from the archived master rather than triggering another generation request.

When the master is narrower than a requested derivative, the no-enlargement recipe produces a smaller actual width. Name the manifest entry from that measured result and do not advertise an inaccurate width descriptor in your markup.

Continue with format delivery, image budgets, and asset lineage.

Continue with media delivery

• accessible AI image descriptions: describe the selected image according to its role
• image content hash cache: identify immutable media from collected bytes
• image file size budget: measure exports against the job each placement performs
• Browse all media delivery guides