Resizing

Resizing

Introduction

The Images API is a read-only API for delivering images to apps, websites and other touchpoints.

The Images API is available via a global CDN. The server closest to the user serves all content, which minimizes latency and especially benefits mobile apps. Hosting content in multiple global data centres also improves the availability of content.

You can request images in specific sizes and crops.

Images are returned with a cdn_files field. This object returns a url param that you can use as a basis for resizing the image needed for your app.

The URL contains a part that is returned as {format} you need to replace this with the desired format.

argumenttyperequireddescription
wStringfalseDefines the width.
hStringfalseDefines the height.
qStringfalseDefines the image quality.
cStringfalseDefines the crop. Default: centre. Options: north, northeast, east, southeast, south, southwest, west, northwest, center, centre

The format is constructed as {option}_{value} so if we would want to get the image in a 200px width form, {format} should be replaced with w_200.

To simplify this it's possible to let the API construct those URLs for you. Just add them as an extra field in the cdn_files field. This extra field is called resized.

Example

We want a landing image of 232x232 and a thumb of 123x123.

The fields are constructed as followed:

GET: /assets/{id}?fields=cdn_files{resized{landing.width(232).h(232),thumb.width(123).h(123)}}

Example response:

{
  // Particle response of /assets endpoint.
  "cdn_files": {
    "total": 1,
    "items": [
      {
        "id": "bfaac48b-fb0d-4d12-84da-af8d65244c4b",
        "created_on": "2023-06-12T08:44:43+00:00",
        "label": "CdnFile",
          "file": "371apne44zy3.jpg",
          "url": "https://example.stream.prepr.io/{format}/371apne44zy3-5az.jpg"
        "resized": {
          "landing": "https://example.stream.prepr.io/w_232,h_232/371apne44zy3.jpg",
          "thumb": "https://example.stream.prepr.io/w_123,h_123/371apne44zy3.jpg"
        }
      }
    ]
  }
}

This will add an extra param(s) to the object with the pre-rendered URL. It is possible to add up to 3 different formats into the request.

Was this article helpful?

We’d love to learn from your feedback