Image Handling in Email Clients
Handle blocked images with alt text and background colors.
Images are Often Blocked
Many clients block images by default until the user clicks "show images". Outlook, Gmail (for unknown senders) and most mobile clients on a metered connection display a placeholder instead. Design assuming images may not appear.
Use Real Text, Not Images of Text
Never bake critical copy (headings, CTA labels, prices) into images. Use HTML text styled with inline CSS so the message lands even when images are blocked, screen readers can read it, and dark-mode inverts adjust it appropriately.
All lessons in this course
- The Table-Based Layout Approach
- Inline Styles for Email
- Image Handling in Email Clients
- Testing with Litmus and Email on Acid