Documentation

mark Mark Image URL

Prefer Base64 Variant

imgix recommends using the Base64 variant version of this parameter to make encoding values easier.

Adds a watermark to the bottom right-hand corner of the image. The watermark is given a 5 pixel gap from the edge of the image.

The URL for the watermark can be either absolute or relative. An absolute URL has no restrictions in that it may reside on a separate host and path from the source image. If the URL is relative, the calculated absolute URL will have some restrictions based on the source type:

  • Web Folder: Relative URLs must not resolve to an absolute URL outsize of the base URL defined in the source.
  • Web Proxy: Relative URLs may resolve to to an absolute URL using any path with the host of the source URL.
  • Amazon S3
    • Relative URLs must resolve to a resource within the same bucket.
    • Relative URLs must not resolve to a path outsize of the prefix if one is set.
    • The resolved URL will be signed using the same authentication credentials as the source URL.

Watermarks that are served by imgix can take our parameters within the input of the mark. The entire input, including the URL and query string, needs to be URI-encoded before placing it in the mark parameter. Only UTF-8 character encoding is accepted.

In the following example, w=160 is added into the input to set the base width of the watermark to 160. Note that this is URI encoded when added to the query string of the watermark’s URL.

Text Watermarks

With the Typesetting Endpoint, you can create a pre-formatted text overlay that can be composited over your image. In its simplest form, this could be just the text, but because the text block is treated as an image, you can add a background color, opacity and positioning. You can also add a second 1-line text block using the standard txt parameter, so it’s possible to have multiple text blocks overlaid as long as one can be limited to a single line.

Because the text watermark is rendered before it is applied to the base image, we recommend against using the markscale parameter to adjust the size of the watermark relative to the image. Doing so will cause a loss of sharpness as the image is scaled up or down.

Note: We recommend the following when creating text images for overlays.

  • Use + signs in place of any spaces in the txt and txtfont parameters.
  • Do not pre-encode any of the characters in the text string (the value for txt). Doing so will cause those characters to be double-encoded when the full ~text URL is encoded and the text will not display correctly.
  • If you’re using the imgix Sandbox to generate the initial text image, limit yourself to the A-Z a-z 0-9 . - _ characters to avoid double-encoding errors.
Text overlay
Bridge.jpg?markalign=center%2cmiddle&mark=https%3a%2f%2fassets.imgix.net%2f~text%3fw%3d200%26txtclr%3dfff%26txt%3dwhen%2bone%2bburns%2bone%27s%2bbridges%2c%2bwhat%2ba%2bvery%2bnice%2bfire%2bit%2bmakes

Image Parameters

exp=-3
w=280
fit=crop
markalign=center,middle
mark=*`[^1

Text Block Parameters

w=200
txtclr=fff
txtlead=2
txtpad=15
bg=80002228
txtfont=Avenir-Heavy
txt=When+one+burns+one's+bridges,+what+a+very+nice+fire+it+makes.+—+Dylan+Thomas

Text overlay + hashtag
Bridge.jpg?markalign=center%2cmiddle&mark=https%3a%2f%2fassets.imgix.net%2f~text%3fw%3d200%26txtclr%3dfff%26txt%3dwhen%2bone%2bburns%2bone%27s%2bbridges%2c%2bwhat%2ba%2bvery%2bnice%2bfire%2bit%2bmakes

Image Parameters

exp=-3
w=280
fit=crop
markalign=center,middle
mark=*

Text Block Parameters

w=200
txtclr=fff
txtlead=2
txtpad=15
bg=80002228
txtfont=Avenir-Heavy
txt=When+one+burns+one's+bridges,+what+a+very+nice+fire+it+makes.+—+Dylan+Thomas

Text Parameters

txt=#coolquote
txtalign=center,bottom
txtclr=ff0
txtsize=12
txtfont=HelveticaNeue-Medium

\* Text for the overlay is URI-encoded along with the parameters being applied to it and is appended as the value of the `mark` parameter. **For a more in-depth exploration of how to use ~text outputs as layers in composite images, [read the tutorial](/tutorials/multiline-text-overlays-typesetting-endpoint).**