Custom Template Image Support in your PDFs

Introduction

The PDF engine Gravity PDF uses, mPDF, supports the following image formats:

• png with transparency or alpha channel
• jpg or jpeg
• gif with transparency
• svg
• bmp
• wmf

To display images in your PDF template use the standard <img src="" /> HTML tag.

The software will accept a URL or absolute path to the image file, although we've found using an absolute path to the image offers better cross-server compatibility, and it's the recommended solution.

Performance

Images can slow the PDF generation time. If you are rendering an image heavy document and it is taking considerable time to generate you can optimise the process by:

1. Run your images through a compression service like TinyPNG and/or resize the image to a smaller format.
2. Use absolute paths to the images
3. Use JPG images over the other file types as they are quicker to process
4. PNGs with no alpha channel or transparency come in a close second to JPGs.

Float Support

There is partial support for floating images in mPDF, however, the following limitations apply:

• You can only have one floated image left, and one floated right per container.
• Unlike your browser (which will overflow the image out of the container), the containing HTML element is extended at the bottom if necessary to enclose the floated image.
• Floats are ignored if the image is too wide for the container, inside a table, or page-break-inside: avoid is set.

Further Reading

View the mPDF documentation for more information about image support.