The key is to swap out the line at the top that says:

<img src="">

to use a base64-encoded file instead of the http:... reference.


Here are the steps:


  1. Begin with the logo file you wish to use as a PNG file
  2. Use an online utility like where you can upload the PNG file and transform it into a Base64 string equivalent. Be sure to check the "Create a valid data&colon;image" button! Copy the results to the clipboard. You will find a string like this: data&colon;image/png;base64,iVBORw...Jggg==
  3. Replace the http://... text with the clipboard, so you have a final line that says something like this:
    <img src="data&colon;image/png;base64,iVBORw...Jggg==">​

In the above cases, I used ... to represent "lots of other letters/numbers", so this will be a long string!


Here are the upsides/caveats:

  • your emails will look correct
  • you can continue to style the <img> tags any way you want
  • your image, once encoded, won't change, whereas the old way uses the default store logo image, even if it changes
  • you won't be able to use the template visual editor anymore -- HTML view only
  • you can use this same technique to add any images anywhere you want, too
  • if you know how, it is best to "optimize" your images first, which makes the images load faster. search the internet if you don't know how. I use ImageOptim, myself.