The image in my email newsletter shows up huge and cut off for some readers. How should I size it?
Resize the image file itself to your template's content width, and do not rely on the template to shrink it. Many email templates have a content width of around 600 px, and some mail clients show an image at its real pixel size, so a 4000 px photo spills out of the message. For sharpness on high-density screens, make it twice that width and set the display width in the template.
Why it looks fine to you and broken to others
When you build the message in your email platform, the editor shrinks the image to fit the template, so the preview looks right. But the message is read in many different programs, and each one interprets the template in its own way. Some desktop mail clients ignore the width set in the template's styles and show the image at its true pixel count, so a phone photo overflows the message and the reader has to scroll sideways.
The fix that works everywhere is an image that never needs shrinking: a file exactly as wide as the template.
The numbers
A 1600 × 1200 product photo and a template with a 600 px content width.
With the ratio lock on, type a width of 600 and the height becomes 450. This copy displays as is in any program.
For high-density screens: a width of 1200 gives 1200 × 900, with the display width set to 600 in the template.
The 2x copy looks crisper on modern phones, but it depends on the program respecting the display width set in the template. If many of your customers read mail in older desktop programs, the copy at exactly the template width is the safer one.
The steps
- Find your template's content width in your email platform's settings. 600 is a common example, not a rule.
- Open the Image resizer, choose the photo and make sure the ratio lock is on.
- Type the template width, or twice it if you chose the sharp copy.
- Save as JPEG for photos and PNG for logos. Avoid WebP in email unless you know your readers' programs display it.
- Check the size in the table. A message with several pictures loads faster when each is light, so use the Image compressor if needed.
Test before you send
Send the message to yourself and open it in more than one program: the mail app on your phone, a web browser, and a desktop mail program if you have one. If the image shows at the right size in all three, you are ready. If it is still huge in one, that program ignores the set width, and the answer is the copy at exactly the template width.
Common questions
Can I upload the original and let the platform shrink it?
Some platforms resize images on upload and some do not. Preparing the file at the right size yourself guarantees the result either way.
Is the smaller image less sharp in email?
At exactly the template width it is sharp on ordinary screens and slightly softer on high-density ones. That is the price of wider compatibility.