Using images

Generation time

In the same way that images influence the time a web page takes to load, adding a lot of images or heavy images to a document will influence the time it takes to generate.

If you want to keep your documents generation fast, be mindful about the images you use.

For files you own, you can leverage free tools like ImageOptim for bitmap images and svgo for SVG files.

Insert with URL

PDFMonkey doesn’t host images. If you want to use images you’ll need to make them accessible online via a specific URL and use this URL in either the HTML or the CSS code.

Let’s say we have an image accessible at https://example.com/my-image.jpg.

In the body

To insert your image in the body you would use the following tag:

<img src="https://example.com/my-image.jpg">

The URL can also be stored in a dynamic data:

<img src="{{imageURL}}">

In styles

To use your image as background you can define it as such:

.someClass {
  background-image: url('https://example.com/my-image.jpg');
}

Inline SVG

For small vector images, you can export the XML and insert the content directly in the body.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="160" xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon points="150,75 112.5,140 37.5,140 0,75 37.5,10 112.5,10" fill="#006791"></polygon>
</svg>

Inline data: URI

In case you cannot host your image, you can choose to inline it using the datauri format.

In the body

You can reference an inline image using its data: URI as source:

<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7">

In styles

In a similar way, you can inline your image in the CSS tab:

.someClass {
  background-image: url('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7');
}