zesty.io

Product

Use Cases

Integrations

Learn

On-The-Fly Media Optimization and Dynamic Image Manipulation

Zesty.io's DAM has on-the-fly (OTF) rendering options to improve and manipulate media that both developers and content authors can use.

Auto Image Optimization - Default Output

Zesty.io automatically transforms images as the content-type "webp", which is a format made to optimized image download speed and rendering speed, developed by Google.

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. - Read the full Google launch article https://developers.google.com/speed/webp

When optimization happens, Zesty.io does a few things to the file:

  • All metadata (for example, EXIF, XMP, or ICC) is removed.
  • Any ICC profile on the image is applied directly to the image to ensure color output is correct. If the image doesn't have an ICC profile, a default profile is added.
  • If the source image contains orientation metadata, this orientation will be applied directly to the image data and metadata will be removed.
  • Images are served with their original name and extension, but will still output as content-type "webp"

OTF DAM Quick Examples

Bypass Image Optimization

To bypass image optimization to get the raw encoding and data of the origin image, append ?raw=true to the end of the image request like so:

https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?raw=true

This is useful for fetching EXIF data or other meta data hidden in your image file.

Image Manipulation Options

All image may be manipulated on-the-fly by passing query parameter to the end of the image URL. See the example below

Query ParamExample
nonehttps://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?width=https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?width=300
?orient=https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?orient=v
?bg-color=https://9skdl6.media.zestyio.com/parsley-logo-brackets.png?bg-color=006699

Example Image
Original Image Source: https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg

We recognize the following parameters in the query string of the image request:

ParameterDescription
autoEnable optimization features automatically.
bg-colorSet the background color of an image.
bypassIgnore all optimization and fetch the raw original image
blurSet the blurriness of the output image.
brightnessSet the brightness of the output image.
canvasIncrease the size of the canvas around an image.
contrastSet the contrast of the output image.
cropCrop an image by removing pixels from an image based on a ratio. Great for thumbnails.
dprDevice Pixel Ratio - Serve correctly sized images for devices that expose a device pixel ratio.
fitSet how the image will fit within the width and height provided.
heightResize the height of the image.
optimizeAutomatically apply optimal quality compression.
orientChange the cardinal orientation of the image.
padAdd pixels to the edge of an image, like css padding.
qualityOptimize the image to the given compression level for lossy file formatted images.
saturationSet the saturation of the output image.
sharpenSet the sharpness of the output image.
trimRemove pixels from the edge of an image.
widthResize the width of the image.

Image Manipulation Processing order

Manipulation query parameters can be specified in any order, but they are processed in this order:

OrderQuery Call
1trim
2crop
3orient
4width height dpr fit
5pad canvas bg-color
6brightness contrast saturation
7sharpen
8blur
9auto optimize quality profile level

Zesty.io OTF DAM: On-The-Fly Image Options API

All query parameters listed below may be used in conjunction with one another, and may be stacked. Some query params conflict with each other, for example pad and canvas. This behavior is documented under each example API call.

GET Auto Optimize

/image.jpg?auto=

Auto Optimize

GET Background Color

/image.jpg?bg-color=

Image Bg-color

Image Bg-color2

GET Bypass

/image.jpg?raw=true

GET Gaussian Blur

/image.jpg?blur=

Image Blur

GET Brightness

/image.jpg?brightness=

Image Brightness

Canvas

Canvas is used for advanced targeted cropping of images.

The canvas image modifier query parameter takes multiple values which can get complicated, so we included example references as they are best to understand the behavior. To get a feel for it, experiment with the image url example provided, and play with the numbers.

Canvas1

The canvas query param takes comma separated values SIZE,POSITION, where SIZE is a pixel width and height 500,100or a ratio like 2:1. The POSITION is represented as a percentage offset from the center of the image using offset-x and offset-ylike offset-x50,offset-y95 . POSITION and SIZE together look like this:canvas=400,130,offset-x50,offset-y95. If POSITION is omitted, the image centers by default.

Canvas2

Canvas3

  • The background color of the canvas will default to transparency for image output formats that support transparency and white for formats that don't. This behavior can be changed by adding the bg-color parameter.
  • When using canvas and pad at the same time, pad will be ignored.
  • Fractional pixel measurements are rounded to the nearest whole pixel.

GET Canvas Control

/image.jpg?canvas=

Canvas Control

GET Contrast

/image.jpg?contrast=

Image Contrast

GET Crop

/image.jpg?crop=

Image Crop

Image Crop

GET Device Pixel Ratio (dpr)

/image.jpg?dpr=

Image DPR

GET Fit

/image.jpg?fit=cover&height=200&width=200

Image Fit

Image Fit Bounds

Image Fit Cover

GET Height

/images.jpg?height=

Image Height

GET Image Optimize

/image.jpg?optimize=

GET Orientation

/image.jpg?orient=

Image Orient

GET Image Padding

/image.jpg?pad=

Image Pad

GET Image Quality

/image.jpg?quality=

Image Quality1

Image Quality100

GET Saturation

/image.jpg?saturation=

Image Saturation-50

Image Saturation100

Image Saturation-100

GET Sharpen

/image.jpg?sharpen

Image Sharpen1

Image Sharpen2

Image Sharpen3

GET Trim

/image.jpg?trim=

Image Trim

GET Width

/image.jpg?width=

Image Width

About Zesty.io On-The-Fly Media Technology

Zesty.io leverages Fastly's Image Optimization technology layered on top of the Zesty.io DAM Media Manager. Features documented here relate to what is supported through Zesty.io WebEngine and Media services.

Connect with Content Experts

Book a free 15-minute consultation with a content expert. Discuss your application, pain points and requirements. Understand how Zesty's lower total cost of ownership, features, functionality can elevate your business by creating extraordinary digital experiences.

Trusted By

zesty customer logo Sonyzesty customer logo Rocket Leaguezesty customer logo Singlifezesty customer logo Acornszesty customer logo Phoenix Sunszesty customer logo Wattpadzesty customer logo Corner Shopzesty customer logo Bjs

G2 MOMENTUM LEADER

zesty customer logo zesty customer logo zesty customer logo zesty customer logo

Enter your details to connect with a Content Expert

First Name

Last Name

Email

Phone (optional)

Company

Please tell us about your project (optional)