How to add images to a template

Help Center

In DocuGenerate, not only can you create dynamic text content, but you can also add dynamic images to your templates. This feature enables you to personalize your documents even further by including unique images based on your data source.

Adding images

To add an image to your template, use a tag starting with %, like for example [%image]:

This is a smiley: [%image]

For this instance, your JSON data should look as follows. Make sure the JSON key doesn’t include the % character, as it needs to be "image" and not "%image":

[{
  "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAKqWlDQ1BJQ0MgUHJvZmlsZQAASImVlwdUU+kSgP97bzoJLSHSCb1JbwGkhNBC781GSAKEEkIgKNiRxRVcCyoi2EBXQBRcCyCLDVFsi2LvC7KIKOtiwYbKu8AhuPvOe++8OWfOfJnMPzP/f+5/z1wAKIpcsTgDVgQgU5QrifDzYsTFJzDwgwABNEABSmA2l5cjZoWFBQFUpu3f5f0dAE3YmxYTuf79//8qSnxBDg8AKAzlJH4OLxPlY6i+4IkluQAge1C//qJc8QR3okyToA2ifG+CU6Z4eIKTJhkDJmOiItgo0wAgkLlcSQoAZAbqZ+TxUtA8ZE+UrUV8oQhlMcrumZlZfJQPo2yCxqA+8kR+ZtJ3eVL+ljNJlpPLTZHx1F4mheAtzBFncPP/z+P435KZIZ2uYYQqOVXiH4FaZfTM7qVnBcpYlBQSOs1C/mT8JKdK/aOnmZfDTphmPtc7ULY2IyRompOFvhxZnlxO1DQLcnwip1mSFSGrlSxhs6aZK5mpK02PlvlTBRxZ/oLUqNhpzhPGhExzTnpk4EwMW+aXSCNk/QtEfl4zdX1le8/M+W6/Qo5sbW5qlL9s79yZ/gUi1kzOnDhZb3yBt89MTLQsXpzrJaslzgiTxQsy/GT+nLxI2dpc9IGcWRsmO8M0bkDYNAM2yAIZqEoAAwShv7wByBUszp3YCDtLnC8RpqTmMljoDRMwOCKe5WyGrbWtHQAT93XqcXhLn7yHEP3yjG+1LgBu+ePj4+0zvsDrABw9CQDpwYzPeAAA+csAXNzGk0rypnyTdwkLSEABfReoAW2gD0yABbAFjsAVeAIfEABCQRSIBwsAD6SCTLTzRWApWAWKQSnYCLaCSrAb7AV14BA4AlpAOzgLLoAr4Dq4DR6CXjAAXoIR8B6MQRCEhygQFVKDdCBDyByyhZiQO+QDBUERUDyUCKVAIkgKLYVWQ6VQGVQJVUP10C/QCegsdAnqge5DfdAQ9Ab6DCMwGabBWrARbAUzYRYcCEfB8+EUOBsugIvg9XAFXAMfhJvhs/AV+DbcC7+ERxGAyCF0RBexQJgIGwlFEpBkRIIsR0qQcqQGaUTakC7kJtKLDCOfMDgMFcPAWGBcMf6YaAwPk41ZjlmHqcTUYZoxnZibmD7MCOYbloLVxJpjXbAcbBw2BbsIW4wtx+7HHseex97GDmDf43A4Os4Y54Tzx8Xj0nBLcOtwO3FNuDO4Hlw/bhSPx6vhzfFu+FA8F5+LL8Zvxx/En8bfwA/gPxLkCDoEW4IvIYEgIhQSygkHCKcINwiDhDGiItGQ6EIMJfKJ+cQNxH3ENuI14gBxjKREMia5kaJIaaRVpApSI+k86RHprZycnJ6cs1y4nFBupVyF3GG5i3J9cp/IymQzMps8jywlryfXks+Q75PfUigUI4onJYGSS1lPqaecozyhfJSnylvKc+T58ivkq+Sb5W/Iv1IgKhgqsBQWKBQolCscVbimMKxIVDRSZCtyFZcrVimeULyrOKpEVbJRClXKVFqndEDpktJzZbyykbKPMl+5SHmv8jnlfipC1aeyqTzqauo+6nnqAA1HM6ZxaGm0UtohWjdtREVZxV4lRmWxSpXKSZVeOkI3onPoGfQN9CP0O/TPs7RmsWYJZq2d1TjrxqwPqhqqnqoC1RLVJtXbqp/VGGo+aulqm9Ra1B6rY9TN1MPVF6nvUj+vPqxB03DV4GmUaBzReKAJa5ppRmgu0dyreVVzVEtby09LrLVd65zWsDZd21M7TXuL9intIR2qjruOUGeLzmmdFwwVBouRwahgdDJGdDV1/XWlutW63bpjesZ60XqFek16j/VJ+kz9ZP0t+h36IwY6BsEGSw0aDB4YEg2ZhqmG2wy7DD8YGRvFGq0xajF6bqxqzDEuMG4wfmRCMfEwyTapMbllijNlmqab7jS9bgabOZilmlWZXTOHzR3NheY7zXtmY2c7zxbNrpl914JswbLIs2iw6LOkWwZZFlq2WL6yMrBKsNpk1WX1zdrBOsN6n/VDG2WbAJtCmzabN7ZmtjzbKttbdhQ7X7sVdq12r+3N7QX2u+zvOVAdgh3WOHQ4fHV0cpQ4NjoOORk4JTrtcLrLpDHDmOuYF52xzl7OK5zbnT+5OLrkuhxx+cvVwjXd9YDr8znGcwRz9s3pd9Nz47pVu/W6M9wT3fe493roenA9ajyeeup78j33ew6yTFlprIOsV17WXhKv414f2C7sZewz3oi3n3eJd7ePsk+0T6XPE1893xTfBt8RPwe/JX5n/LH+gf6b/O9ytDg8Tj1nJMApYFlAZyA5MDKwMvBpkFmQJKgtGA4OCN4c/CjEMEQU0hIKQjmhm0MfhxmHZYf9Go4LDwuvCn8WYROxNKIrkhq5MPJA5Psor6gNUQ+jTaKl0R0xCjHzYupjPsR6x5bF9sZZxS2LuxKvHi+Mb03AJ8Qk7E8Yneszd+vcgXkO84rn3ZlvPH/x/EsL1BdkLDi5UGEhd+HRRGxibOKBxC/cUG4NdzSJk7QjaYTH5m3jveR78rfwhwRugjLBYLJbclny8xS3lM0pQ6keqeWpw0K2sFL4Os0/bXfah/TQ9Nr08YzYjKZMQmZi5gmRsihd1JmlnbU4q0dsLi4W92a7ZG/NHpEESvbnQDnzc1pzaehgdFVqIv1B2pfnnleV93FRzKKji5UWixZfzTfLX5s/WOBb8PMSzBLeko6luktXLe1bxlpWvRxanrS8Y4X+iqIVAyv9VtatIq1KX/VboXVhWeG71bGr24q0ilYW9f/g90NDsXyxpPjuGtc1u3/E/Cj8sXut3drta7+V8Esul1qXlpd+Wcdbd/knm58qfhpfn7y+e4Pjhl0bcRtFG+9s8thUV6ZUVlDWvzl4c/MWxpaSLe+2Ltx6qdy+fPc20jbptt6KoIrW7QbbN27/UplaebvKq6pph+aOtTs+7OTvvLHLc1fjbq3dpbs/7xHuuVftV91cY1RTvhe3N2/vs30x+7p+Zv5cv199f+n+r7Wi2t66iLrOeqf6+gOaBzY0wA3ShqGD8w5eP+R9qLXRorG6id5Uehgclh5+8UviL3eOBB7pOMo82njM8NiO49TjJc1Qc37zSEtqS29rfGvPiYATHW2ubcd/tfy1tl23veqkyskNp0inik6Nny44PXpGfGb4bMrZ/o6FHQ/PxZ271Rne2X0+8PzFC74XznWxuk5fdLvYfsnl0onLzMstVxyvNF91uHr8N4ffjnc7djdfc7rWet35elvPnJ5TNzxunL3pffPCLc6tK7dDbvfcib5z7+68u733+Pee38+4//pB3oOxhysfYR+VPFZ8XP5E80nN76a/N/U69p7s8+67+jTy6cN+Xv/LP3L++DJQ9IzyrHxQZ7D+ue3z9iHfoesv5r4YeCl+OTZc/KfSnztembw69pfnX1dH4kYGXktej79Z91btbe07+3cdo2GjT95nvh/7UPJR7WPdJ+anrs+xnwfHFn3Bf6n4avq17Vvgt0fjmePjYq6EOzkKIKjCyckAvKkFgBIPABWdIUhzp+bpSYGmvgEmCfwnnpq5J8URgEbUTIxF7DMAHEbVaCWaG7UTI1GUJ4Dt7GQ6PftOzukTgkO/WPZ4T9D9zeHV4B8yNcN/1/c/LZjIag/+af8FWf8IeOgjQGcAAACWZVhJZk1NACoAAAAIAAUBEgADAAAAAQABAAABGgAFAAAAAQAAAEoBGwAFAAAAAQAAAFIBKAADAAAAAQACAACHaQAEAAAAAQAAAFoAAAAAAAAAkAAAAAEAAACQAAAAAQADkoYABwAAABIAAACEoAIABAAAAAEAAAAgoAMABAAAAAEAAAAgAAAAAEFTQ0lJAAAAU2NyZWVuc2hvdPZIhPwAAAAJcEhZcwAAFiUAABYlAUlSJPAAAALVaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4zMjwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlVzZXJDb21tZW50PlNjcmVlbnNob3Q8L2V4aWY6VXNlckNvbW1lbnQ+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4zMjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjE0NDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+MTQ0PC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KOvLoZgAAB7FJREFUWAntVmuMlFcZfs53nfvM3mZv7C6wrKXCtiXcgtBSpWKkttaYNipNYw2lxqRpjDYmJiZb/5ioNfGSNPwwNUSrgRhbkJUgrQmNJFRwLYiy5bIsu7IL7M7ObWe+6/l8vtkiO4Ut+MuY9GRmv9nvnPO+z/u8z/ueA3w4/scMiP/G/8AAlGdaeju1ZNtaEW9YoxpNyxThC88pXfTKV98OqleOtU88NS4GBuSd2r0jAKcHHjcyiye2R3vW/9TsXBVXYi0QkRQCoUEIFVK6kE4ZQX4M3uTQbHn87ecXVZ3d4tkT7u2A3BbA6M/v3ZRYfN8hs/czUSO1hA51CCUA+JH+nH0hFIQhC5VPz4NXOA9neLBaGh++v+eZYyc+CMSCAIIAYmL3+hejy7d+J9K9GZoeQ+A5jLpKEMacTTFvuwxBSeLSAM2oMeJcPALr3YMvtH75xEvcwAU3D/XmV7U34mtLN30vuvLBb0cXbWCofOcXCUJA0QR8v0pzHr/Oe18XChzoBp2jAmkzHYqAnumE1MTW5x6Qzo9eG3/rVr7mhXBjeuKVB7ZFensORBdvhcIcB9KDZkYwfG4Cp86M4ZFta6Ex7z7dIvDJiAJfBDhwYAj9/d3oW9oCzyFA6ARrwR05iMr5a5s7drx55IaXuV+0UD+O73okFm029+tNfXTswPfyCIIKKlYeh383iL07foiRM8Nkosp856iDApmZxbtnzuKXO1/Cn35/CK5FBvwSKAYIMqM19iGSVQ4N/uTTZr03hCHUj66E9Q3R2Kwoqg6412ikBBWzKFybRPXaKDZ+sQUXL4yQ/SIElS9cOiPlI8PnsOVLbZidHEMxdxVaYAFOCYpbgEr2RLrJXNPo76z39j4Ax3ft1CMp9buaFqlFDTeMgkYYTbWcIyAbuqaiXCArLgH4Zc7NMuclVHJ56KYG366iUp6hRIrUDRngfkGtaNEYzKT4wZ49j9fpLlTNf0aLPtYn4kTLchKywo0SPssBqkZKZ6ErCgyV80yJ7+YhXY8aEVxrwuBalfuUgKSGeyXl5fusTcqEGlE0CZmMmOsKVjcdjlx3WgdAS8hPCJPCETZUUjy3O6DYJGK6CyMWhetYSCdomPmVls0ZCT0SQTTjYvq8CjNmwDBm4VsOG5RKgRJAWNM+AbJKDL3MsroBoE4DEVVsDjubQmUHLDUZ0u+R4koJmThgNidx4eQIOroaoEjWJq0HlJEQEu09CZw7OoKGthSSUZYq8+97ZXjUiE8bAViq1JWpiVXXow+fdQxwW2/YTzTSR8yMgGyG6EPqSeHGB/vQflcrlnTFIas2FNZ6OHzbwV1dGWx+4VEs60uy+Lxa9MxVrYeEaQqXen5oFe21Te/9eR8AeIINRpJh8gUjwvwSQEBUtm2ju1XDku4U3HKZCzgXGglTTrgyKOOhDRmKk93S9VmaZJLAwyhsiysIxqdhSRjhtuujDoDvyVO69NcKwnWljWPHSmhtBto64ohEDZhG6NRHJB0NXTK5/NSSGLIVijGEosLl+7xVwcURpsEx0f/RONMQLqZiPPGP687DZx0AJ1Df1KT8ik7KXF/g1z8+BVfPItXyL2Rbp9DaBTS3Aal0CvFogjkNu6QDj8arFQ8zpRzYLjA5CkznFuHKUBIrtti4t38VHftQeXg5tnp8QQCVSvRInLXusWajcQ13b5pGz5bvo7OjF9NT0ygVCyiVbUzkCzx2HQpxLhGSotWjGZjcl70ngiUbU2hoacDfTxxFfOZFVokO2wmPbI/9IT20IIDep18fn9n/yctKQnYYpoq7V6/EHw4dxeef6kJf/3I0N2QQi8WpDYOpv95PiIIjIP1VyyXAMvK5KYyODOPwwbfwra+u41o65nrP8U937djLjnZj1KUgrKqrvxE7TE8O+lUH6zb04o0DL+PVr7+M9OrH0LbsPnQv/Qg629vR0JxlfUtoFJpHeqev5jA+PopLl85jauQ4Lu0fxPon+rB86RpY7AkKhWkVjWdvuJ77VRPy/JcDAwPK82v+fFJrSa0wmxScveTj8M9OoqUzh9xMDlNXgCLvIZQINVBrVbWq4cmBdATIZIEGsxXTTiMefW4F2tk/7BmW4PTMOw0Pv7Gq1jrmObwJQDh3bvfnstnu6oRoSihmo4mhv+Zx+vVxdC9KwUiwyllOPm8+pIBNiCbYagXPCN6VUJ6p4kquio89uQS93TFYUzYwU5bTk03NPdtfJZT6cUsA4ZLLex5enehQj4vGCCIEcf5cAX/54xiMkot00qToVB4RzBmrKwRjsQpyJR/x9hjWfKoHHY0a3BzvDKVZ5EfFPV1PDp6qdz3334IAwumxPdv6M63+34J0Uok2GZh1JWu7jMsXSrDybDgUXdjlNKrczJpY1JtEF6OOuAJWgQdVsWBfm9BXLf7CgX/eynn47gMBhAuGXnks05PN79MaU/eb6RjUpAaPjcpyJBxGzlbAq5gOnSehxjKziwRWrDJ6Z59XzWzPPrE3bJsLjtsCCHeGqR7/1WdXxjKFXWZS2cC2CCTMueOXHVCyx8uqxUNrFnbJ2FcoJr7Zu/23Zxf0Om/ijgDMWw9eWmLN6cJyU1SWabrd7Ulh+VKftF3znUtOcuzjT/+CV6EPx/8RA/8GZqppwnTTJn8AAAAASUVORK5CYII="
}]

In the JSON data, the image field includes a Base64-encoded string that represents the image. When the template is processed, DocuGenerate replaces the [%image] tag with the actual image as defined in the Base64 string. The result should look like this:

This is a smiley: Sample Image

🆕 Resizing images

By default, images are added to the template using their original dimensions. However, you can customize the image size using the following syntax, if you enable the enhanced syntax for your template:

[%image | size:'width':'height']
  • The width value is an integer representing the image width in pixels. You can also use 'auto' to determine the width automatically based on the image height, while keeping the aspect ratio of the image.

  • The height value is an integer representing the image height in pixels. Similarly, you can use 'auto' to determine the height automatically based on the image width, while keeping the aspect ratio of the image.

Examples:

[%image | size:200:100]
[%image | size:200:'auto']
[%image | size:'auto':100]

These examples demonstrate how to set specific dimensions or utilize automatic scaling for either width or height.

Image formatting and restrictions

When adding images to your templates, it’s essential to keep a few things in mind. The image you provide should be encoded in Base64 encoded format, and the accepted image formats are PNG, JPEG and SVG. To be interpreted as an image, the tag should start with %, like for example [%image], [%logo], [%user.avatar], etc.

You cannot pass a URL to the image to avoid fetching the image from the internet during document generation. This could increase the execution time and potentially cause issues. To ensure a smoother and faster generation process, we recommend that you convert the image to Base64 on your side before using it in your template.

Please note that the size of the Base64-encoded string impacts the size of the JSON data and potentially the processing time of the document. Be cautious about using large or high-resolution images, as these can significantly increase the size of your JSON data.