[FAQ]

I’m designing our email campaigns, and while they look great on a desktop computer, I’m finding that the images often look strange or completely break the layout when viewed on a mobile phone. Sometimes they’re too wide and force horizontal scrolling, and other times text within an image becomes too small to read.

What are the key best practices or even coding techniques to ensure images are fully mobile-responsive in 2025? I’m wondering about things like using “fluid images,” setting a max-width, or any other tricks to make sure our emails look professional on all devices.

[Jeff Bullas]

Ensuring your email images are mobile-responsive is absolutely critical, as a majority of emails are now opened on mobile devices. A poor mobile experience can cause a subscriber to immediately delete your email or even unsubscribe.

There are several key best practices to follow. First, and most importantly, you should always start with a responsive email template. Most modern email service providers, like Mailchimp or ConvertKit, provide templates that are designed from the ground up to be responsive. Their code automatically adjusts the layout and image sizes to fit different screen widths. This is your foundation.

Second, you should employ the “fluid image” technique. This is a core principle of responsive email design. In the code, this means setting the width of your images to 100 percent of their container, but also setting a max-width to the image’s actual pixel width. This simple instruction allows the image to scale down proportionally to fit smaller screens perfectly without becoming distorted or breaking the email’s layout. Most good drag-and-drop email editors will handle this for you automatically.

Third, you must avoid putting critical text inside your images. Text that is part of an image file becomes very small and is often completely unreadable on a mobile screen. It also presents a major accessibility problem, as screen readers for visually impaired subscribers cannot read text that is embedded in an image. Your main headline and your call to action must always be plain HTML text, not part of a graphic.

Fourth, you need to optimise your image file sizes. As we have discussed before, mobile users are often on slower network connections. Large image files will cause your email to load very slowly. You must compress your images to keep the file size small while maintaining acceptable quality.

Fifth, you should consider the composition of your images for small screens. Before you even choose an image, think about how it will look when it is scaled down. An image that is very detailed with many small elements might become an unrecognisable smudge on a phone. It is better to opt for images with a clear, single focal point that remains understandable at a small size.

And sixth, you must always test your emails. Before you send your campaign to your full list, send test emails to yourself and view them on different mobile devices (both iPhones and Android phones) and in different email clients, such as the Gmail app and Apple Mail. Most email marketing platforms also offer built-in testing tools that show you previews of how your email will render on various devices.

In summary, the key to mobile-responsive images is to start with a responsive template that handles the technical side. Your job is then to design images that are clear even at a small size, keep your file sizes small, avoid putting essential text in your images, and always test how your email looks on a real phone before sending.

Cheers,

Jeff

[Author]

Posts