Image Engine

Resize / Apply Filters / Watermark / Crop / More

You can use Tuned Global’s automatic image resizing end-point in order to generate images in the size you wish.  The system will resize from the original image automatically.  In order to use and access these images, you will need to first get the Thumbor settings from the TUNED APIs or TUNED directly.  The standard URL for Thumbor is provided below in the example, if you have custom URLs configured this may change.

In order to get an image., you can then add the Thumbor URL ahead of the image URL (available from the APIs) along with the parameters to resize the image.

An image example is here:

 
https://dxfve6m7pg0pq.cloudfront.net/unsafe/fit-in/1000x1000/d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20241016_1100.jpg

• Yellow = Thumbor URL Fixed URL - this is provided to you by Tuned Global Use this for all your thumbor requests
• Orange = request parameters Detailed below
• Green = image information returned in the GetImageURL Note that the API will return the full URL to the image. In the example above this would be:  http://d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20241016_1100.jpg This image will be the full sized image delivered by the label (format may be converted) Exclude the https:// component and use the remainder in your Thumbor request.

Image Request

You must build your URL to request an image suitable for your application.  Below is a Basic model, for a quick start.  There is also an Advanced section if you want to customise and optimise the images being retrieved

To simply ask for a resized image, specify the size of the image as follows;

[Thumbor URL]/unsafe/[image size]/[image URL returned in API]

Image size is defines in pixels width x height

Example:

[Thumbor URL]: https://dxfve6m7pg0pq.cloudfront.net/

unsafe/[image size]: unsafe/

[image URL returned in API]: d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20220222_1307.jpg Full URL

 
https://dxfve6m7pg0pq.cloudfront.net/unsafe/fit-in/1000x1000/d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20241016_1100.jpg

ADVANCED

Resize

Specify the width and height you want the image to be resized to.

Crop

If you do not specify fit-in, the image will be resized to the largest requested dimension (width or height) and then cropped to the smaller dimension.

For example, the image below is resized to 420 × 1420:

 
https://dxfve6m7pg0pq.cloudfront.net/unsafe/fit-in/420x1420/d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20241016_1100.jpg

Notes

• The image retains its original proportions.
• The entire image remains visible (no cropping).
• The image is resized to fit within the requested dimensions.
• If either dimension is specified as a negative value, the image will be flipped horizontally or vertically.

Filters

You can specify multiple filters within a single request by separating them with a colon (:).

Quality

Quality is measured from 1–100, with higher values producing better image quality. You may want to experiment with different quality settings to achieve the best balance between image quality and download size.

We recommend a quality setting of 70 as a good compromise between quality and file size.

Example:

 
https://dxfve6m7pg0pq.cloudfront.net/unsafe/fit-in/420x420/filters:quality(70)/d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20241016_1100.jpg

Brightness and Contrast

Adjust the brightness and contrast of an image for a specific visual effect. Both values range from -100 to 100.

Example:

 
https://dxfve6m7pg0pq.cloudfront.net/unsafe/fit-in/420x420/filters:quality(70):brightness(-10):contrast(100)/d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20241016_1100.jpg

Format

Specify the output image format if required.

By default, the system usually returns a JPEG image. Depending on the original image format, it may occasionally return a PNG. JPEG is recommended because it generally produces the smallest file size.

Supported formats:

• format(jpeg)
• format(png)

Example:

 
https://dxfve6m7pg0pq.cloudfront.net/unsafe/fit-in/420x420/filters:quality(70):brightness(-10):contrast(100):format(jpeg)/d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20241016_1100.jpg

Watermark

Use the Watermark filter to overlay a watermark on your images. You can define its position, opacity, and optional scaling.

Usage

watermark(imageUrl, x, y, alpha [, w_ratio [, h_ratio]])

This filter adds a watermark to the image. The watermark can be positioned anywhere within the image, with the desired transparency (alpha), and can optionally be resized relative to the image dimensions by specifying the width and height ratios (see Resizing).

Arguments

• imageUrl – The URL of the watermark image. The same image loader used by Thumbor is also used for the watermark. If the URL contains parentheses, they must be URL encoded, as Thumbor uses parentheses as delimiters for filter parameters.
• x – The horizontal position of the watermark.
  • Positive values position the watermark from the left.
  • Negative values position it from the right.
  • center centers the watermark horizontally.
  • repeat repeats the watermark horizontally.
  • A value ending with p (for example, 20p) is treated as a percentage of the image width.
• y – The vertical position of the watermark.
  • Positive values position the watermark from the top.
  • Negative values position it from the bottom.
  • center centers the watermark vertically.
  • repeat repeats the watermark vertically.
  • A value ending with p (for example, 20p) is treated as a percentage of the image height.
• alpha – The watermark transparency, from 0 (fully opaque) to 100 (fully transparent).
• w_ratio – The maximum width of the watermark as a percentage of the image width. Defaults to none, meaning the watermark width is not limited and is not resized based on the image width.
• h_ratio – The maximum height of the watermark as a percentage of the image height. Defaults to none, meaning the watermark height is not limited and is not resized based on the image height.

Example

 
https://dxfve6m7pg0pq.cloudfront.net/unsafe/fit-in/420x420/filters:watermark(https://d2byqs7e78w6a1.cloudfront.net/DEMO/video/test_meta2/tg-logo-web-1.png,-10,-70p,50)/d16npyvi7pcxgr.cloudfront.net/images1004/100/4_0/060/252/790/910/3/104_1004_00602527909103_20241016_1100.jpg