Skip to main content

Padding

Use the padding transformation to add canvas space around a delivered image variant.

Overview​

Padding is useful when an image needs breathing room inside a card, thumbnail, preview, or generated asset layout. The padding is added to the delivered variant and leaves the original upload unchanged.

Syntax​

FieldValue
Canonical parameterpadding
Aliaspd
Accepted valuesall, x:y, top:x:bottom, top:right:bottom:left, or an SDK object
Side rangeInteger pixels from 0 through 8192

Example​

https://cdn.imgwire.dev/{organization_id}/{environment_id}/{image_id}?padding=48&background=F3F4F6
image.url({
  padding: 48,
  background: 'F3F4F6',
  format: 'auto',
  quality: 'auto',
});
imgwire images url img_123 --padding 48 --background F3F4F6 --format auto

Live examples​

Demo image with 24 pixels of padding
24px padding
Demo image with 48 pixels of padding
48px padding
Demo image with uneven padding
Uneven padding

Best practices​

  • Use background with padding when the added canvas should match a page or component surface.
  • Use the shortest shorthand that clearly expresses the intended spacing.
  • Prefer consistent padding values for repeated card and gallery layouts.

Common mistakes​

  • Confusing padding with resizing. Padding adds canvas space around the image.
  • Adding padding after already requesting dimensions that are too large for the final UI.
  • Forgetting that the URL shorthand uses numeric side values; use an SDK object when you need object-only options.

Last updated at: May 9, 2026