KBA-01586: Embedding Images (Signatures) in HTML fields

Questions:

  1. How do I embed an image into the HTML editor in Chrome?
  2. How do I get an image into the Signature field on the Connections tab of my Contact?
  3. Why do I get a little red box in Microsoft Word instead of the image I pasted into the HTML editor?
  4. Pasting my logo into Company | Site Logo doesn’t work, what do I do now?

Answer:

Internet Explorer usually does these steps for you automatically, but with certain network connection and devices the images are not stored in an Internet-friendly fashion. Here‘s how to do that manually:

  1. Open NotePad and type or paste
    <img src='' />
  2. Use IE or Chrome and visit a base64 helper site such as – https://dataurl.sveinbjorn.org/#dataurlmaker
  3. Drag your image onto the box or the ‘Choose File‘ button to upload your GIF, PNG, or JPG.
    1. Click in the text box.
    2. Press CTRL+A then CTR+C to copy everything from the text box.
  4. Return to NotePad.
    1. Position the cursor in between the quote marks in notepad.
    2. Paste the base64 data.
    3. Press CTRL+A then CTR+C to copy everything.
  5. In the sfPMS HTML editor,
    1. Switch to HTML view (tab at bottom).
    2. Paste the IMG tag from your clipboard.
    3. Type height=”50px” right after the <img tag.  Once this is in place you can easily adjust the size up or down after you see how the image appears wherever you want it. [Note: if the characters shown below appear right after what you type, ignore them. They may come back even after you delete them.]
    4. Switch back to DESIGN view. Your image should appear.
    5. Save.
    6. Test to see if you need to adjust the size of the image.

There are other sites that will do the image to base64 conversions.

  • http://base64image.org/ – use ‘copy as HTML‘.  As of this writing the tag provided is malformed: use notepad to add the closing /> manually
  • http://base64online.org/encode/ – similar to above, but must select the file and check the ‘format as data url check box.

KBA-01586; Last updated: August 3, 2020 at 10:26 am
Keywords:  base64; signature images, contact signature