To include custom images (like logos or icons) in the Headers and Footers of your AMFG templates, you must first convert your image files into Base64 format.
This method embeds the image data directly into the template's HTML code, ensuring your assets load reliably without the need for external hosting.
What is Base64 Encoding?
Base64 is a method of converting an image file into a string of text. By using this text string, your browser can "read" the image data directly from the HTML source code rather than downloading it from a separate link.
How to Implement Base64 Images
1. Convert Your Image
Before adding the image to AMFG, you need to turn your file (PNG, JPEG, or GIF) into a Base64 string.
How: Use a trusted online "Base64 Image Encoder" or a local developer tool.
The Result: You will receive a long string of random characters starting with
data:image/....
2. Format the Data URL
The Base64 string must be properly formatted as a Data URL so the template engine recognizes it. The structure looks like this:
data:[media type];base64,[encoded data]
3. Embed into Your Template
In the AMFG template editor, navigate to the Header or Footer section and use the standard HTML <img> tag. Place your entire Data URL inside the src attribute:
Example Code:
HTML
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Company Logo" />
Best Practices & Performance
While Base64 is incredibly convenient for template customization, keep the following in mind:
Size Matters: Base64 strings are roughly 33% larger than the original file size. We recommend using this method primarily for small images (logos, icons, or signatures).
Image Optimization: Before converting, compress your image to the smallest possible dimensions to ensure your PDF exports and pages load quickly.
Format Choice: Use PNG for logos with transparency and JPEG for photographs to keep the code manageable.
Troubleshooting Common Formatting Errors
If your image isn't appearing correctly in your AMFG template, check for these common issues:
1. Broken or "Cut Off" Code
Base64 strings for images are often thousands of characters long.
The Fix: Ensure you have copied the entire string from your encoder. If you miss even the last two characters (often
==), the browser won't be able to decode the image.Pro Tip: Use
Ctrl+A(Windows) orCmd+A(Mac) when copying from your encoder to ensure nothing is left behind.
2. Missing or Incorrect Data Type
The beginning of your code (the "Prefix") tells the template what kind of file it’s looking at.
The Issue: If your prefix says
data:image/png;base64,but you actually uploaded a JPEG, it may fail to render.The Fix: Verify the file extension matches the prefix:
PNG:
data:image/png;base64,...JPEG:
data:image/jpeg;base64,...SVG:
data:image/svg+xml;base64,...
3. Extra Spaces or Line Breaks
HTML attributes do not play well with spaces inside the src quotes.
The Issue: Sometimes, copying from a PDF or a text editor adds "hidden" line breaks or spaces within the long string of characters.
The Fix: Ensure the string is one continuous line of text with no spaces between the quotes:
src="data:image/png;base64,XXXXX".
4. Special Characters and Quotes
The Issue: If you are wrapping your
<img>tag in other code, ensure you aren't accidentally using "Smart Quotes" (curly quotes“ ”) instead of standard "Straight Quotes" (" ").The Fix: Always use a plain text editor (like Notepad or TextEdit) or the AMFG code editor directly to avoid formatting interference.
5. Image is Too Large
The Issue: If the image is extremely high resolution, the Base64 string might exceed the character limit for the template field, or cause the PDF generator to time out.
The Fix: Resize your image to its intended display size (e.g., 200px wide for a logo) before converting it to Base64.
✅ Pre-Flight Checklist: Before You Save
Run through these five points to ensure your image displays perfectly every time.
[ ] Complete String: Did I copy the entire code from the encoder? (Look for
==at the end).[ ] Correct Prefix: Does my code start with the right format (e.g.,
data:image/png;base64,)?[ ] No Spaces: Are there any accidental spaces or line breaks inside my
src="..."attribute?[ ] Straight Quotes: Am I using standard "straight" quotes around the URL, rather than “curly” ones?
[ ] Size Check: Is my original image file under 100KB? (Smaller is always better for template performance).
Quick Tip: The "Broken Icon" Test
If you see a small "broken image" icon in your AMFG preview:
Copy the entire Base64 string you pasted into the template.
Paste it directly into your browser's address bar.
If the image appears: The code is correct, but there may be a typo in your HTML
<img>tag.If the image does not appear: The Base64 string itself is incomplete or corrupted.