Comment on page
Including images in your documents
You can inline an image in your Template by defining its source as data-uri:
HTML
<img src="data:image/png;base64,R0lGODlhE...UjIQA7" />
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}}" />
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:<img src="https://placekitten.com/200/300" />
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}}" />
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>
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.
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>
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.
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.