SVT Image Proxy

This project is a simple image proxy, enabling the fetching of images and and transforming them on the fly using ImageMagick. This project was originally used to process Escenic images via various data from ObjectAPI, but the source images has been replaced with several S3 buckets instead. The service will try to fetch an image for the configured backens sequentianally and return the first hit.

This is the current backend priority, the last one will soon be disabled when Escenic is shut down. Most Escenic images should be migrated to Legacy bucket, and all play images should be in Edx bucket.

1. Edx bucket
2. Legacy bucket
3. Escenic/ObjectAPI

API

/type/width/id
/type/width/id/version

URL rewrites:
Rewrite .../article12345.svt/BINARY... requests to /original/unscaled/12345
Rewrite .../article12345.svt/alternates/square requests to /square/200/12345

type - image type (crop)
width - width in pixels, default or unscaled
version - version of the image (Versioned images are cached for longer periods of time)

• Image types (crops)
• Image sizes
• Timestamp
• Image format
• Quality
• Chroma sub-sampling
• Default images
• Logo
• Live
• Öppet arkiv
• Next Episode
• Fortsätt Titta
• Text
• Publication date
• Blur
• Accessibility
• Dim
• Grayscale
• Retina
• Picture tag examples

Image types (crops)

Image type is selected using the first parameter in the path. Type can be one of the examples below.

With the custom type you can request a custom crop ratio by adding a ratio query parameter which will be used to calculate the image height. The crop will be centered to the image.
E.g. /custom/300/10204699?ratio=0.666 See image examples below.

Image sizes

Images are resized using the second parameter in the path (width).
If width is specified as unscaled, the image will not be resized.
If width is specified as default, the image will be resized to the size specified in the content definition (Escenic).

Size limits on originals

Using originals above 2560 * 1440 total pixels decreases quality. Due to memory constraints, images whose original size is above 2560 * 1440 total pixels will use the largest image from Escenic as source instead of the original. To check if your image is treated this way, fetch the unscaled image in original crop.

Example

100

400

800

1200

Unscaled

Timestamp

An optional timestamp can be added after the id, for cache busting

Example

Image format

Per default, jpg images are served if not specified. To specify the image format, simply add the format as file ending.

The following image formats are supported:

• jpg
• png
• gif
• webp
• avif
• heic

Automatic format (JPEG/WebP/AVIF) static image

With format=auto browsers that support it will automatically get WebP (except when a file ending is specified). By additionally adding enableAvif=true browsers that support AVIF will get that.

Example

Automatic format (GIF/WebP) animated image

With format=auto browsers that support it will automatically get WebP animated images (except when a file ending is specified).

Example

Quality

The quality (ie level of compression) can be adjusted, if the quality=[0-100] query parameter is included.

Quality defaults will vary depending on image format and dpr setting.

• 30 if dpr above 1
• 50 if image format is avif or heic
• 70 otherwise

Example

Chroma sub-sampling

Chroma sub sampling can be enabled or disabled with the chromaSubSampling=true|false query parameter Chroma sub sampling can reduce image size by ~20%, but may lead to artifacts in the image. It is usually ok for photos, but does not work so well for images with logos and texts. It only has effect for jpeg images, webp does not allow for adjusting chroma sub sampling.

Chroma sub sampling defaults to true

Example

Progressive jpeg

Progressive can be enabled or disabled with the progressive=true|false query parameter It only has effect for jpeg images, webp does not support progressive

Progressive defaults to false

Example

Default images

Default or placeholder images can be fetched not including an id

Example

Logo

An SVT play logo can be inserted in the top-right corner, if the watermark=true query parameter is included

Example

Live

A live flag can be added if the textSettings={%22live%22:true} query parameter is included

Example

Öppet arkiv

A ÖA flag can be added if the textSettings={%22openArchive%22:true} query parameter is included

Example

Next Episode

An Next Episode flag can be added if the textSettings={%22nextEpisode%22:true} query parameter is included

Example

Fortsätt Titta

An Fortsätt Titta flag can be added if the textSettings={%22continueWatching%22:true} query parameter is included

Example

Text

Text can be added as overlays on an image, by including the query parameter textSettings={}, which takes in an json object

The types of texts that can be overlayed are:

• Title used as title of an image
• Title with title prefix, title prefix cannot be shown if there is no title present
• Label, show a centered label

Example

Title

Title with title prefix

Label

Publication date

Publication date can be added as an overlay by including the query parameter textSettings={%22published%22:%222020-02-02%22}

You can either provide a full date string (2020-02-02) or only the year (2020).

Example

Full date

Year only

Blur

Blur can be added to the image, if the blur=[0-20] query parameter is included (defaults to 0)

Example

Accessibility

Accessibility symbols can be added to the image using the signInterpreted=true and audioDescribed=true query parameters.

Example of sign interpreted

Example of audio described

Example sign interpretation and audio description

Dim

The image can be dimmed, if the dim=[0-100] query parameter is included (defaults to 0)

Example

Grayscale

Use gray=true for grayscale.

Example

Retina

For devices with "Retina"-style high resolution screens, you can get images with higher pixel density. Size of logos and texts keep their relative size.

Use the dpr=[1-2] query parameter (defaults to 1)

If dpr is above 1 the default quality drops to 30 (but still respects quality parameter).

Example

Default	Retina

Compose

You can add a gradient by including the query parameter "compose"compose="gradientLeft | gradientRight | kidsLeft | kidsRight"

This is primarly only done for superHero image

Example

Picture tag examples

Example: Serving WebP with fallback

Letting the browser decide:

<picture>
    <source srcset="https://www.svtstatic.se/image/square/600/16224554/1512470877.webp" type="image/webp">
    <img src="https://www.svtstatic.se/image/square/600/16224554/1512470877">
</picture>

If you want WebP for CSS backgrounds, you need Modernizer to detect WebP support etc.

Using format=auto, letting the server decide:

<img src="https://www.svtstatic.se/image/square/600/16224554/1512470877?format=auto">

Example: Retina images

<style>
    img { width: 600px; }
</style>
<picture>
    <source srcset="https://www.svtstatic.se/image/square/600/16224554/1512470877?dpr=2 2x">
    <img src="https://www.svtstatic.se/image/square/600/16224554/1512470877">
</picture>