resize

The resize transformation scales an image to specific dimensions. Specify width and/or height to scale proportionally or to exact dimensions using different strategies (fill, fit, pad, crop). Essential for creating responsive images, thumbnails, and optimizing image delivery for different screen sizes.

Serving Content via CDN

The Media API is a CDN-based service that serves transformed images via GET requests. When you request a transformed image URL, the transformation is applied dynamically on the first request and then cached for subsequent requests.

URL Pattern

https://media.vyso.io/resize:width=W:height=H:strategy=STRATEGY/ASSET_ID.jpg

Examples

Resize to 800x600 (Exact)

curl -i GET https://media.vyso.io/resize:width=800:height=600/ASSET_ID.jpg

Resize to 300px Width (Height Proportional)

curl -i GET https://media.vyso.io/resize:width=300/ASSET_ID.jpg

Resize to 500px Height (Width Proportional)

curl -i GET https://media.vyso.io/resize:height=500/ASSET_ID.jpg

Resize Thumbnail Size

curl -i GET https://media.vyso.io/resize:width=150:height=150:strategy=fill/ASSET_ID.jpg

Resize with Padding (Fit Strategy)

curl -i GET https://media.vyso.io/resize:width=640:height=480:strategy=fit:background=rgb(255,255,255)/ASSET_ID.jpg

On the first request, you'll receive a X-Cache: MISS header while the transformation is applied and cached. Subsequent requests will return X-Cache: HIT.

Parameters

widthOPTIONAL

Target width in pixels. Accepted values:

  • Positive integer (e.g., 800)
  • If only width is specified, height is calculated proportionally
  • Maximum recommended: 4000px
heightOPTIONAL

Target height in pixels. Accepted values:

  • Positive integer (e.g., 600)
  • If only height is specified, width is calculated proportionally
  • Maximum recommended: 4000px
strategyOPTIONAL

Resizing strategy to apply. Accepted values:

  • fit (default) - Scale to fit within dimensions, add padding if needed
  • fill - Fill dimensions exactly, crops if necessary
  • crop - Center crop to exact dimensions
  • pad - Add padding around the image
backgroundOPTIONAL

Background color for padding (when using fit or pad strategies). Formats:

  • Hex color: ffffff (without #)
  • RGB: rgb(255,255,255)
  • CSS color name: white

Response

The API returns the resized image with the specified dimensions and strategy applied. The response format depends on the format of the asset stored in the Vyso asset cloud.

Content-Type: Determined by the stored asset format (e.g., image/jpeg, image/png)

← Back to Transformations