[FAQ]

I’m an email designer and I’ve been getting some feedback that our email images, especially our company logo, look really bad when people view them on their phones in dark mode. We’re seeing weird white boxes appear around our graphics, or dark parts of images just disappear into the background.

What are the current best practices for designing and saving images so they work well in both light and dark email clients in 2025? Is using a transparent background the simple answer, or are there other common tricks I should be using?

[Jeff Bullas]

Designing for dark mode is an essential part of modern email design. Handling your images correctly is one of the keys to maintaining a professional and consistent look across all of your subscribers’ viewing environments.

There are several best practices you should follow. First, and this is the most important step for logos and icons, you must use images with transparent backgrounds. You should save these types of graphics as a PNG file with transparency enabled. This allows the dark background of the email client to show through, which is what prevents that jarring white box effect from appearing around your logo.

Second, if your logo or graphic is dark-coloured (for example, black or dark grey), you should consider adding a subtle white outline or stroke to it in your design software before you export it. When some email clients switch to dark mode, they can also invert colours, which might make your dark graphic nearly invisible on a dark background. A thin white stroke ensures it remains visible no matter what.

Third, you should test your images on both light and dark backgrounds before you even place them in your email template. Put your image into a design tool like Canva or Photoshop and simply toggle the background colour between white and a dark grey or black. This allows you to spot any potential visibility issues immediately.

Fourth, for photographic images, while you cannot make them transparent, you should still preview how they look when surrounded by a dark interface. Ensure the key subjects of the photo are still clear and that the overall aesthetic does not clash badly with a dark theme. Sometimes, slightly increasing the brightness of a photo can help it look better in a dark mode environment.

And fifth, for those with more technical coding skills, it is possible to use CSS media queries to display a completely different image for users who are in dark mode versus those in light mode. This is an advanced technique but offers the most control over the user experience, allowing you to serve a specifically optimised version of an image for each mode.

In summary, the key to making most of your images work in dark mode is to use transparent PNGs for your logos and icons. For any dark-coloured graphics, adding a light outline will ensure they always stay visible. And finally, always test how your images look on a dark background before you send your campaign.

[Author]

Posts