LOG IN SIGN UP
Documentation

Overlay Width

Description

The overlay width parameter sets the width of the overlay in pixels or percent.

API Pattern

Parameter

Parameter Description
overlay-width Width of the overlay image.

Parameter Values

Value Units Description
Integer Pixels A whole number between 1 and 8192.
Float Percentage Decimal number between 0.0 and 0.99.

Notes

  1. When the overlay width value is specified as a percentage the width is relative to the output image.
  2. Because we use a positive float between 0.0 and 0.99 to return a percentage-based scaled overlay width, in order to return an overlay image that has a 100% width or more, a p parameter can be appended to the value. For example, overlay-width=250p would return an overlay image that is 250% the width of the output image. We use p as a simple way to represent percent.
  3. If the overlay image width is larger than output image dimensions set using width, the overlay image will be cropped.
  4. Pixel rounding is performed on all calculations in a decimal format (with as much accuracy as possible). The final value is then rounded down.

Examples

Pixel Overlay Resize - Resize the overlay width to 50px.

sub vcl_recv {
  #FASTLY recv
    if (req.url.qs ~ "overlay") {
      set req.http.X-fastly-imageopto-overlay = "overlay=/img/overlay.png&overlay-width=50";
    }
  return(lookup);
 }

Percentage Overlay Resize - Resize the overlay to be 75% the width of the output image.

sub vcl_recv {
  #FASTLY recv
    if (req.url.qs ~ "overlay") {
      set req.http.X-fastly-imageopto-overlay = "overlay=/img/overlay.png&overlay-width=0.75";
    }
  return(lookup);
 }