image file size budget: measure exports against the job each placement performs

An image file size budget is a local delivery rule tied to a purpose. A large instructional detail image and a small decorative card should not automatically receive the same allowance. Start with the component and the information it needs to communicate, then measure real exports.

Genace supplies source image outputs. It does not guarantee a final byte size for your website or email. Resizing, encoding, quality selection, storage, and browser delivery are separate tasks in your post-processing pipeline.

Inventory the intended placements

Record the display width, crop family, visual importance, and whether the image contains exact text or fine product detail. Identify the largest size that is actually useful for the component, including the density choices your design supports.

Choose example internal budgets as starting points for your own review, not as universal industry limits. A team might allow more bytes for a primary explanatory illustration than for a repeated decorative tile. The justification should be visible in the asset specification.

Build a measurable acceptance table

Placement	Priority	What must survive optimization
Product detail	High factual detail	Label and structural edges
Article card	Fast recognition	Main subject at small size
Documentation figure	Instructional meaning	Labels and relationships
Decorative section	Supporting atmosphere	Broad composition
Email image	Compact message delivery	Meaning in narrow preview

Keep actual byte counts next to the budget. A quality setting or a format name is not a measurement of the resulting file.

Create and inspect trial exports

With ImageMagick installed, this example creates a trial derivative and reports its local size. The dimensions and quality are experiment values to review.

magick master.png -resize "960x>" -quality 82 trial.webp
wc -c trial.webp

Use the ImageMagick options reference to understand the chosen transformation. Compare the trial with the approved master at the actual display size before accepting the savings.

If a trial exceeds the budget, decide whether to reduce dimensions, simplify the composition, change encoding, or make a documented exception. Do not shrink important instructional text until the file passes numerically while becoming unusable.

Measure the delivered object too

Inspect the browser network response or the actual downloaded object after upload. A delivery layer may transform files or serve a different derivative. The local working file’s size is useful evidence, but it is not proof of what a visitor received.

Keep responsive selection in the review. A page can have well-optimized small derivatives and still request the largest master because the markup points to the wrong source. MDN’s responsive-image guide provides the relevant source-selection model.

Acceptance checklist

Verify placement purpose, measured dimensions, actual exported bytes, readable detail, and delivered-object selection. Record exceptions with a reason and reviewer. Keep the master and recipe so budget changes can be handled through another export rather than another generation request.

See responsive derivatives, format delivery, and newsletter images.

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 format delivery pipeline: choose an encoding from measured exports
• Browse all media delivery guides