LOG IN SIGN UP
Documentation

Montage

Features

Description

The montage parameter adds the ability to combine multiple images into a single image, based on a predefined set of layout templates.

API Request Header

req.http.x-fastly-imageopto-montage

Parameters

Value Description
width Width of the output image.
height Height of the output image.
layout A template (see template layouts below).
images A semicolon separated list of root-relative image URLs.
dpr Device Pixel Ratio. (optional)
padding Add additional pixels to the inside edges of an image. (optional)
bg-color Background color of the output image, when applying padding. (optional)
format The output image format. (optional)
quality Output image quality for lossy file formats. (optional)

Template Layouts

2a

image optimization montage template 2a layout

2b

image optimization montage template 2b layout

3a

image optimization montage template 3a layout

3b

image optimization montage template 3b layout

3c

image optimization montage template 3c layout

3d

image optimization montage template 3d layout

4a

image optimization montage template 4a layout

4b

image optimization montage template 4b layout

4c

image optimization montage template 4c layout

4d

image optimization montage template 4a layout

4e

image optimization montage template 4e layout

Notes

  1. By default, all images will fill the area by cropping from the center of the image.
  2. The maximum number of images currently supported is 4.
  3. An image montage is counted as 1 image optimization request regardless of how many images the montage contains. However, on a cache miss each sub image will count as a non-IO request.

Examples

Basic

This VCL:

sub vcl_recv {
  #FASTLY recv
      set req.http.x-fastly-imageopto-montage =
      "width=500&height=500&layout=2a&images=/image1.jpg;/image2.jpg";
  return(lookup);
 }

might look like this:

https://www.fastly.io/montage/2a

Advanced

This VCL:

sub vcl_recv {
  # recv
      set req.http.x-fastly-imageopto-montage =
      "width=500&height=500&layout=2b&images=/image1.jpg;/image2.jpg"
      "&" if(req.url.qs ~ "(?:^|&)(bg-color=[^&]+)", re.group.1, "")
      "&" if(req.url.qs ~ "(?:^|&)(dpr=[^&]+)", re.group.1, "")
      "&" if(req.url.qs ~ "(?:^|&)(quality=[^&]+)", re.group.1, "")
      "&" if(req.url.qs ~ "(?:^|&)(format=[^&]+)", re.group.1, "")
      "&" if(req.url.qs ~ "(?:^|&)(padding=[^&]+)", re.group.1, "");
  return(lookup);
 }

might look like this:

https://www.fastly.io/montage/2b?padding=10&bg-color=000&format=png