On-The-Fly Media Optimization and Dynamic Image Manipulation

Zesty.io Open Source ATOM Plugin Start Trial

Search…

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) will 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
1
<!-- using the direct media url, append query parameters to the url --> 
2
<img src="https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?width=200" alt="space ship example">
3
<!-- using parsley, append query paramters outside th call -->
4
<img src="{{this.image.getImage()}}?width200&crop=1:1" alt="parsley example">
5
​
6
<!-- example using src set images to be used at different display pixel densities -->
7
<img srcset="{{this.image.getImage()}}?width=320&dpr=1.5 1.5x,
8
             {{this.image.getImage()}}?width=320&dpr=2 2x"
9
     src="{{this.image.getImage()}}?width=320"/>
10
     
11
<!-- HTML5 art direction, use different images based on browser width -->
12
<picture>
13
  <source srcset="{{this.image.getImage()}}?width=600&crop=16:9" media="(min-width: 600px)"/>
14
  <img src="{{this.image.getImage()}}?width=320&crop=1:1"/>
15
</picture>
16
​
17
<style>
18
  .header {
19
    background-image: url(https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?width=2000)
20
  }
21
</style>
Copied!
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 Param
Example
none
​https://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​
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:
Parameter
Description
​auto​
Enable optimization features automatically.
​bg-color​
Set the background color of an image.
​bypass​
Ignore all optimization and fetch the raw original image
​blur​
Set the blurriness of the output image.
​brightness​
Set the brightness of the output image.
​canvas​
Increase the size of the canvas around an image.
​contrast​
Set the contrast of the output image.
​crop​
Crop an image by removing pixels from an image based on a ratio. Great for thumbnails.
​dpr​
Device Pixel Ratio - Serve correctly sized images for devices that expose a device pixel ratio.
​fit​
Set how the image will fit within the width and height provided.
​height​
Resize the height of the image.
​optimize​
Automatically apply optimal quality compression.
​orient​
Change the cardinal orientation of the image.
​pad​
Add pixels to the edge of an image, like css padding.
​quality​
Optimize the image to the given compression level for lossy file formatted images.
​saturation​
Set the saturation of the output image.
​sharpen​
Set the sharpness of the output image.
​trim​
Remove pixels from the edge of an image.
​width​
Resize 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:
Order
Query Call
1
trim
2
crop
3
orient
4
width     height    dpr     fit         
5
pad     canvas     bg-color
6
brightness     contrast     saturation
7
sharpen
8
blur
9
 auto    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
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?auto=webp
Auto Optimize:   /image.jpg?auto=
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?format=pjpg&auto=webp
get
https://9skdl6.media.zestyio.com/parsley-logo-brackets.png
?bg-color=690167
Background Color:   /image.jpg?bg-color=
https://9skdl6.media.zestyio.com/parsley-logo-brackets.png?bg-color=105,1,103
https://9skdl6.media.zestyio.com/parsley-logo-brackets.png?bg-color=323CF3
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?raw=true
Bypass:   /image.jpg?raw=true
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?blur=20
Gaussian Blur:   /image.jpg?blur=
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?blur=20
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?brightness=20
Brightness:  /image.jpg?brightness=
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?brightness=20
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.
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?canvas=500,100
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. 
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?width=500&canvas=320,100
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?width=1000&canvas=400,130,offset-x50,offset-y95
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
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?canvas=500,100
Canvas Control: /image.jpg?canvas=
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?canvas=500,400,offset-x20,offset-y20
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?contrast=20
Contrast: /image.jpg?contrast=
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?contrast=100
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?crop=1:1
Crop: /image.jpg?crop=
Crop Example: https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?crop=1:1&width=200
Crop example: https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?crop=4:1&width=800
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?dpr=2
Device Pixel Ratio (dpr):   /image.jpg?dpr= 
DPR example: https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?dpr=2&width=200
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?fit=cover&height=200&width=200
Fit: /image.jpg?fit=cover&height=200&width=200
Fit Crop Example: https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?fit=crop&width=200&height=400
Fit Bounds example keeps within the width, reducing height: https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?fit=bounds&width=200&height=400
Fit cover fits within the largest bounds, which is height in this examples: https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?fit=cover&width=200&height=400
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?height=200
Height:   /images.jpg?height=
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?height=100
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?optimize=high
Image Optimize   /image.jpg?optimize=
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?orient=l
Orientation:    /image.jpg?orient=
Orientation example: https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?orient=l
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?pad=10,20,50,10
Image Padding:   /image.jpg?pad=
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?pad=10,10,50,10&bg-color=FFC0CB&width=500
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?quality=55
Image Quality:   /image.jpg?quality=
Reduced from 56KB to 4KB https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?quality=1
56KB full quality https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?quality=100&width=500
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?saturation=-50
Saturation:    /image.jpg?saturation=
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?saturation=-50
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?saturation=100
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?saturation=-100
get
https://9skdl6.media.zestyio.com
?sharpen=a5,r5,t4
Sharpen:    /image.jpg?sharpen
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?sharpen=a10,r1000,t100
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?sharpen=a5,r5,t4
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?sharpen=a10,r500,t10
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?trim=25,50,75,100
Trim  /image.jpg?trim=
Trim: https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?trim=25p,50p,20p,10p
get
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg
?width=100
Width:   /image.jpg?width=
https://9skdl6.media.zestyio.com/Arcade-Space-Ship-Example.jpg?width=800
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.