On the Scenario platform, all images are distributed toward a protected content delivery network. All URLs are signed when you perform GET requests.

💨 Expiration

The signed URLs expire between 7 days and 14 days after the request. As a result, you can easily cache delivered content on the client side: signed URLs don't change for at least seven days.

🚧

Distribution URLs are signed URLs that expire. You can't rely on them as permalinks. You must either cache the file content on your system or request signed URLs with each distribution.

📐 On-demand resize

The Assets API returns an asset entity with a URL attribute. This attribute is a pre-signed URL granting access to the asset. You can modify this URL by adding a query string to transform the asset according to your display requirements.

Possible additional query string attributes include:

• width: represents the final asset width in pixels with a numerical value. The default value is auto, the only string allowed in this field.
  • auto is used to maintain the original asset ratio when only the height is specified, or to use the default width when both width and height are unspecified.
• height: represents the final asset height represented in pixels with a numerical value. The default value is auto, the only string allowed in this field.
  • auto is used to maintain the original asset ratio when only the width is specified.; or to use the default height when both width and height are unspecified.
• fit: refers to the resize mode used when resizing an image without maintaining its aspect ratio. The allowed values are: (auto, cover, contain, fill, inside, outside). The default value is auto, now equivalent to cover. But this subject will change in the future.

• format: defines the output format of the asset. Available options include origin, auto, jpeg, png, and webp. Selecting an option other than origin may change the output asset entity's content-type. The default value is origin, which preserves the original asset format. When auto is selected, the best format is determined based on the request's accept-header. Currently, if webp is available, it will be used; otherwise, the original asset's format will be used.
• quality: adjusts the image quality of the encoded output. The allowed values range from 0 to 100, with the default set to 100. Lower quality results in a smaller asset size but with fewer details. A good configuration is having a quality set to 80, which is nearly imperceptible to the human eye but results in an asset that is nearly 2 times smaller.
• background: when resizing an image requires the addition of a background, the default value is ffffff (don't use the usual #). You can use any hexadecimal color.
• rotate: rotates the given asset by any value between 0 and 360 degrees. Please note that if the rotation angle is not a multiple of 90 degrees, the final image may be larger due to inclined content. The default value for the rotation angle is 0.
• blur: adds a Gaussian blur to the asset. Uses an integer value. The default value is 0.
• greyscale: Convert asset in greyscale. Allowed values are true or false. The default value is false.

Usage sample with a given asset's baseUrl, which looks like:

https://cdn.scenario.com/assets-transform/assetId?signature=generatedSignatureForAsset&width=128

🚧

Never change the given signature query strings, it would result in an Access Denied Error.

Recommendations

If you are displaying the asset solo or in a grid and you do not need transparency on the asset, make a request with the parameters "format=jpeg&quality=80" at least.

If you know the size of the asset's display, let's suppose the maximum width for this asset at this position is 250px. We recommend setting up the parameter "width=300" in addition to "format=jpeg" and "quality=80".

Examples

Now some examples and the resulting file size:

Going further

In a web browser, you can specify multiple available versions and the browser will automatically select the most appropriate one.

<img src="flower-large.jpg">

<img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw">

More details here.