Skip to main content

Width

Use the width transformation to request a delivered image variant with a target pixel width.

Overview​

Width is one of the most common Imgwire transformations. Use it for thumbnails, responsive image candidates, product cards, content images, and any layout where the browser should not download the full original image.

If you provide only width, Imgwire preserves the image's aspect ratio. Combine width with Height and Resizing Type when the output must fit a fixed box. Add Gravity when that fixed-size resize should keep an important region in view.

Syntax​

FieldValue
Canonical parameterwidth
Aliasw
Accepted valuesInteger 1 through 8192

Example​

https://cdn.imgwire.dev/{organization_id}/{environment_id}/{image_id}?width=640&format=auto&quality=auto
https://cdn.imgwire.dev/{organization_id}/{environment_id}/{image_id}?width=256&height=256&resizing_type=cover&gravity=attention&format=auto&quality=auto
image.url({
  width: 640,
  format: 'auto',
  quality: 'auto',
});
image.url({
  width: 256,
  height: 256,
  resizing_type: 'cover',
  gravity: 'attention',
  format: 'auto',
  quality: 'auto',
});
imgwire images url img_123 --width 640 --format auto --quality auto

Live examples​

Each image uses the same source with a different requested width.

320px wide640px wide960px wide
Demo image resized to 320 pixels wideDemo image resized to 640 pixels wideDemo image resized to 960 pixels wide

Best practices​

  • Use width to avoid sending oversized source images to smaller UI slots.
  • Generate a small set of stable widths for responsive image candidates.
  • Pair width with format=auto and quality=auto for public images.
  • Add height and resizing_type when a layout needs fixed dimensions.
  • Add gravity=attention to fixed avatar, profile picture, and thumbnail resizes when uploaded images may have off-center subjects.

Common mistakes​

  • Setting only CSS width and still delivering the full original image.
  • Using a single large width for every screen size.
  • Combining width and height without choosing a resizing type when exact layout behavior matters.
  • Expecting gravity to change a width-only resize; gravity matters when another option creates placement or crop-like behavior.

Last updated at: May 10, 2026