Including images in your documents

Including an image as data-uri

The data-uri format is a way to provide a complete image without requiring any HTTP request.

Static image

You can inline an image in your Template by defining its source as data-uri:

HTML

<img src="data:image/png;base64,R0lGODlhE...UjIQA7" />

Dynamic image

If you send your images as data-uri:

{
  "imageUrl": "data:image/png;base64,R0lGODlhE...UjIQA7"
}

you can then use it in your HTML:

<img src="{{imageUrl}}" />

Including an image from URL

Paid account only

Including images based on their URL is only possible on a paid account. Documents including external images will fail on a free account.

Static image

To get an image included in your Document you can define an img tag:

<img src="https://placekitten.com/200/300" />

Dynamic image

If you pass the URL of an image in your data, you can then use it as source of an image in your Template.

Let's say your data looks like this:

CSS

{
  "imageUrl": "http://placekitten.com/200/300"
}

Using it in your Template would look like this:

HTML

<img src="{{imageUrl}}" />

Using a background

You can define a background image in the CSS tab:

CSS

.some-class {
  background-image: url("https://placekitten.com/200/300");
}

and then apply it to any element in your HTML tab:

HTML

<div class="some-class">
  ...
</div>

Using a dynamic background

You can't call dynamic data from the CSS tab like you do in the HTML tab. But you can do two things to use an URL from the data as source of a background.

You can use inline styling:

HTML

<div style="background-image: url('{{imageUrl}}');">
  ...
</div>

Or you can use inlined CSS

CSS

.some-class {
  background-image: url(var(--some-class-bg));
}

HTML

<style>
  .some-class {
    background-image: url('{{imageUrl}}');
  }
</style>

<div class="some-class">
  ...
</div>l

You could also use the CSS custom properties technique if you want to keep all you CSS in the CSS tab.

Using SVG images

Another way to use images in your Document is to use inlined SVG. You can do so by inserting the code of a SVG image in your HTML:

HTML

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="purple" stroke-width="3" fill="pink" />
</svg> 

Performance concerns

Image size

If you're concerned about the time it takes to generate your PDF, using smaller image is a very good start. The smaller the images, the faster they are to load and thus, the faster your Document generation will be.

Our recommendation is to favor formats that provide small images. PDFMonkey supports recent image formats like Webp and AVIF. You can find free image converters online that can help you get smaller images without sacrificing quality.

Another good idea is using inlined SVG or data-uri images as they will not need to load. But even for those cases, optimizing the images will be beneficial.

If you wish to keep using more classic formats like JPEG or PNG, our recommendation is to use a tool like ImageOptim to get smaller images.