Montage

      Last updated May 18, 2020

    The montage parameter adds the ability to combine up to four 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:

    1
    2
    3
    4
    5
    6
    
    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:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    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

    Back to Top