More than 40% of modern users read emails on their smartphone, where dark mode is increasingly turned on.
Dark mode changes the color scheme of mobile app interfaces, turning dark text on a white background into white text on a black background.
To make sure your newsletter looks correct when dark mode is on, it's important to optimize it.
5 tips for optimizing images in emails for dark mode
- Make all elements of a product card have a transparent background. Otherwise, when dark mode is turned on, the product image might stay on a white background while its description and button turn black. Visually, this will look like several separate elements rather than a single product card.
- Add a light backing for your logo if it's drawn in a dark color. Otherwise, the logo will blend into the background and become invisible.
- Add dark mode styles for @media using the prefers-color-scheme: dark media query inside the <style></style> section. This will help optimize your email for better compatibility with email clients.
- Use light outlines or background shapes for outline icons and images. If your design uses "unfilled" elements, you need to give them a light backing or outline from the start. This helps avoid a situation where an element "dissolves" into the email's dark background.
- Choose APNG (Animated Portable Network Graphics) instead of GIF files. Classic GIFs don't handle transparency well — the file's white outlines can become pixelated due to a limited color range. The APNG format is a more reliable option in this case.
Optimize your newsletters for dark mode to show your users you care and boost their loyalty to your company.