HTML email messages are fragile things. One possibility you have to be prepared for is how it looks if the images do not load. Maybe the image host is down, maybe the device is offline, or maybe the viewer’s email client is blocking images for security or bandwidth issues.
My first recommendation is to encode the image directly into the message. IMG tags can accept a text-encoded data stream as their SRC parameter, and that will essentially guarantee the image will show. However it does increase the size of the message, so I only recommend it for small images, icons and logos. But I especially recommend it for logos. From a branding perspective, it makes sense to ensure your logo is always showing.
Barring that, you need to be sure the ALT text and styles on your image will look good even if the image doesn't load. For my organization, our logo initials are set in an uppercase serif font (Trajan Pro to be specific), so I set the ALT text to mirror that as best as I can. And for the banner/hero image, I use our tag line as the ALT text. It reads better than a description of the image.
We also include images of signatures in our emails. This can be simulated using ALT text of the person’s name in a blue, cursive font. Here is the font stack I am using:
font-family: 'segoe script','bradley hand',cursive;
And it looks something like this:
There’s one more clever thing you can do: use an emoji character as the ALT text. We use a portrait of our Executive Director in our email. A reasonable ALT emoji character for that: Unicode Hex 👤 for Bust in Silhouette:
👤
Comments