Including images in your documents
Last updated
Was this helpful?
Last updated
Was this helpful?
The is a way to provide a complete image without requiring any HTTP request.
You can inline an image in your Template by defining its source as data-uri:
If you send your images as data-uri:
you can then use it in your HTML:
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.
To get an image included in your Document you can define an img
tag:
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:
Using it in your Template would look like this:
You can define a background image in the CSS tab:
and then apply it to any element in your HTML tab:
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:
Or you can use inlined CSS
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:
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.
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.
You could also use if you want to keep all you CSS in the CSS tab.
Our recommendation is to favor formats that provide small images. PDFMonkey supports recent image formats like and . You can find free image converters online that can help you get smaller images without sacrificing quality.
If you wish to keep using more classic formats like JPEG or PNG, our recommendation is to use a tool like to get smaller images.