Adding an image to an HTML email

I am looking for the definitive way to add images (like a logo or social media icon) to my HTML email templates. What this means:

• Should be loaded in all email clients as well as webmail
• Should not require to add an image as an attachment
• Externally hosted images is not a problem
• Should require minimal data to be sent with the email
• Should not intervene with HTML or CSS used by webmail clients

Approaches tried so far:

• Adding a base encoded image as image (not rendered)
• Adding a base encoded image as CSS background (not rendered)
• Adding externally hosted (blocked by default by gmail)
• Adding externally hosted image to CSS background (not rendered by Windows Mail)

I am able to find very long articles discussing all the pros and cons of a myriad of approaches without telling you the best way to do it. If there are other (better ways) to format transactional emails I am also all ears. Thanks!

I could technically take the angle that it's preference as to which you choose, but I think that adding a hosted image as an <img> is the best approach for this problem - regarding gmail blocking the image from display I'd look into hosting the image on a few different servers and testing each because our company emails have our company logo at the top and it displays perfectly fine through gmail and it's solely a hosted image in an <img> element.

Let me know how you get along with this - if you find a host that works with gmail you shouldn't see any email clients that both support HTML and don't support the image displaying (sometimes you will be prompted to download it etc. but it would work afterwards)

Thanks, Michael