Embedding Image in HTML Email
To embed images into HTML emails, use the <img> tag with an absolute URL in the src attribute. It ensures the image load reliability across different email clients. Always define the width and height attributes for controlled display:
Also, provide the alt attribute, which displays a descriptive text when the image can't be loaded, optimizing the image size for a better user experience across devices.
How-to's for image embedding
Using base64 with data URIs
Using absolute URLs seems easy-peasy, but some situations call for embedding images directly into the email to avoid dependencies. This is achieved using base64 encoded data URIs. Here's how:
You could transform your images to base64 using websites like motobit.com. However, this can bulk up your email's size quite a bit - consider it the email equivalent of holiday weight gain.
Structuring multipart emails
Complex emails might require a more structured approach using multipart/mixed, with multipart/alternative nested inside it. This is like giving the recipient a choice at a buffet - plain text or HTML? For image embedding specifically, use multipart/related type and assign the images Content-ID (cid) within the HTML:
Every image should include specific attributes in the email's raw code:
- Content-Type: Matches the image type (e.g., image/jpeg)
- Content-Transfer-Encoding: Usually safe to keep as base64.
- Content-ID: Your ticket to reference the image in HTML.
- Content-Disposition: Set this as inline - like inline skating, but less fun.
Catering to all email clients
Remember, all mail clients aren't created equal. Some might block images - think of it as their sunglasses. In these cases, stick to hosting your image somewhere and use an absolute URL. For small email lists, hosting on public Dropbox links or similar servers might work.
More embedding gems
Responsiveness is key
Keep various screen sizes in mind. Using CSS to control the responsiveness of images can be helpful. However, make sure you are aware of email clients' CSS support.
Blocked images begone!
If your images are being blocked by the email client, you can trick the system. Websites like stylecampaign.com have tools to convert images into HTML. Essentially creating an illusion so real, it can fool most blockers.
Mind the size
Keep a close eye on your image sizes. Too large can slow down the email loading, or even cause display issues. Image size is the Goldilocks of emails - it needs to be just right.
Was this article helpful?