There are a lot of reasons you might want to embed images directly into your HTML email. They will be quicker to load, they will look good even if the reader if offline, and they will never break if the image online moves or becomes unaccessible.
Of course there is a downside. Encoded images take up more space. So I only recommend them for icons, logos, and other small images.
Base64 Image is my online tool of choice. I recommend turning on the image optimization option (unless you are already using a local tool as I previous recommended). I like how they offer strings pre-formatted for both the src attribute of IMG elements and background-image CSS.
For example, here is a Facebook icon: And the data string for it used in IMG src attribute.
Sorry it's an image. My blogging editor is apparently too smart about escaping what it considers might be malicious code, so it won't let me insert this code into the body of the message. 😕 If you right-click on the Facebook icon above and choose Inspect Element, you can copy the actual data from the page source.
Comments