Cloudflare Docs
Cloudflare Image Optimization
Cloudflare Docs
Cloudflare Image Optimization
GitHub icon
Edit this page on GitHub
Set theme to dark (⇧+D)
  1. Products
  2. Cloudflare Image Optimization
  3. Transform images
  4. Draw overlays and watermarks

Draw overlays and watermarks

You can draw additional images on top of a resized image, with transparency and blending effects. This enables adding of watermarks, logos, signatures, vignettes, and other effects to resized images.

This feature is available only in Workers. To draw overlay images, add an array of drawing commands to options of fetch() requests. The drawing options are nested in options.cf.image.draw, like in the following example:

fetch(imageURL, {
  cf: {
    image: {
      width: 800,
      height: 600,
      draw: [
        {
          url: 'https://example.com/branding/logo.png', // draw this image
          bottom: 5, // 5 pixels from the bottom edge
          right: 5, // 5 pixels from the right edge
          fit: 'contain', // make it fit within 100x50 area
          width: 100,
          height: 50,
          opacity: 0.8, // 20% transparent
        },
      ],
    },
  },

});

​​ Draw options

The draw property is an array. Overlays are drawn in the order they appear in the array (the last array entry is the topmost layer). Each item in the draw array is an object, which can have the following properties:

  • url

    • Absolute URL of the image file to use for the drawing. It can be any of the supported file formats. For drawing watermarks or non-rectangular overlays, Cloudflare recommends that you use PNG or WebP images.

  • width and height

    • Maximum size of the overlay image, in pixels. It must be an integer.

  • fit and gravity

  • opacity

    • Floating-point number between 0 (transparent) and 1 (opaque). For example, opacity: 0.5 makes overlay semitransparent.

  • repeat

    • If set to true, the overlay image will be tiled to cover the entire area. This is useful for stock-photo-like watermarks.
    • If set to "x", the overlay image will be tiled horizontally only (form a line).
    • If set to "y", the overlay image will be tiled vertically only (form a line).

  • top, left, bottom, right

    • Position of the overlay image relative to a given edge. Each property is an offset in pixels. 0 aligns exactly to the edge. For example, left: 10 positions left side of the overlay 10 pixels from the left edge of the image it is drawn over. bottom: 0 aligns bottom of the overlay with bottom of the background image.

      Setting both left and right, or both top and bottom is an error.

      If no position is specified, the image will be centered.

  • background

  • rotate

​​ Examples

​​ Stock Photo Watermark

image: {
  draw: [
    {
      url: 'https://example.com/watermark.png',
      repeat: true, // Tiled over entire image
      opacity: 0.2, // and subtly blended
    },
  ];

}

​​ Signature

image: {
  draw: [
    {
      url: 'https://example.com/by-me.png', // Predefined logo/signature
      bottom: 5, // Positioned near bottom right corner
      right: 5,
    },
  ];

}

​​ Centered icon

image: {
  draw: [
    {
      url: 'https://example.com/play-button.png',
      // Center position is the default
    },
  ];

}

​​ Combined

Multiple operations can be combined in one image:

image: {
  draw: [
    { url: 'https://example.com/watermark.png', repeat: true, opacity: 0.2 },
    { url: 'https://example.com/play-button.png' },
    { url: 'https://example.com/by-me.png', bottom: 5, right: 5 },
  ];

}