Email Banner Size and Image Widths That Hold in Every Inbox

The width most emails use

Most HTML emails sit in a container 600 to 640 pixels wide. That is a convention, not a rule any client enforces. It dates from desktop preview panes and small screens, where a wider email would not show in full, and it survives because it gives a readable line length on desktop and narrows cleanly on phones. ZeptoMail's template guide calls 600 to 640 pixels the industry standard; EDMdesigner traces the 600 to preview windows of limited size.

Pick one width and size every image from it. This post uses 600. How the container narrows on a phone is a layout question, covered in responsive email design.

Export at twice the display width

High-density screens, such as Apple's Retina displays, use several physical pixels for every CSS pixel. A 600 pixel file drawn 600 pixels wide on one of them is stretched, and looks soft. Export the file at double the width it is displayed at, a 1200 pixel file for a 600 pixel banner, and the screen has a real pixel for each one it draws. Email on Acid's advice is to get as close to double as you can; it does not have to be exact.

Then tell the client the display width, not the file's. That is where the second problem comes from.

Why Outlook needs the width attribute

Most clients size an image from its CSS. Outlook Classic mostly does not. In the engine's data, taken from caniemail, max-width is partly supported in Outlook Classic. It only applies to tables there, and the CSS width property does not apply to an <img> at all. What Outlook Classic reads is the width attribute on the tag. Leave it off, and Email on Acid's test shows Outlook drawing the image at its native size, a 1200 pixel retina file 1200 pixels wide, blowing out the tables around it.

So every image gets both:

• width="600", the display width in plain pixels, no px and no percentage. Outlook Classic uses it. caniemail notes that a percentage there is worked out from the file's width, not the column's, so width="100%" on a 1200 pixel file is still 1200 pixels wide.
• style="max-width:100%; height:auto", for everyone else. max-width lets the image shrink when the column is narrower than 600 on a phone, and height:auto keeps its proportions. Across all clients, max-width: Works in 20 of 21 · partial in 1.

Leave the height attribute off. Without it every client works out the height from the file's proportions. With it, a client that ignores the CSS keeps the fixed height while the width shrinks: height is not supported in Yahoo Mail.

One more Outlook catch: caniemail notes that sizes set in attributes do not scale when Windows runs at 120 dpi. That is the same display-scaling problem that breaks background images; the Outlook background images guide covers it.

A 600px banner, done right

<!-- banner@2x.jpg is 1200px wide. It displays at 600. -->
<table role="presentation" width="600" align="center"
       cellpadding="0" cellspacing="0" border="0"
       style="width:100%; max-width:600px;">
  <tr>
    <td>
      <img src="https://example.com/banner@2x.jpg"
           width="600"
           alt="Autumn sale: 20% off every jacket"
           style="display:block; max-width:100%; height:auto; border:0;">
    </td>
  </tr>
</table>

The file is 1200 pixels wide, the tag says 600, the style lets it shrink, and the alt text carries the offer if the image does not load. Check your own version against every client in the email rendering preview.

Sizes for common placements

In a 600 pixel email. The source width is the display width doubled; the display width is what goes in the width attribute.

Heights follow the design. Crop the file to the shape the template shows, so nothing has to be cropped in the client.

File format and weight

Doubling the width roughly quadruples the pixels, so compress hard. Email on Acid points out that large images add to what the reader has to download, and ZeptoMail's guide suggests keeping each image under 200 KB. Pick the format by what is in the image:

JPEG and PNG are the safe pair. The partial cells hide real changes: caniemail records Gmail converting WebP to JPEG and rasterising SVG to PNG, and Outlook Classic not supporting animated GIFs, so never let a GIF's message depend on the animation. A WebP-only banner leaves a gap in Outlook Classic. Do not embed images as base64 to save a request: Works in 15 of 21. Not supported in Gmail, Gmail Android, Gmail iOS and 2 more. Untested in Superhuman. Images you link to are fetched separately and do not count toward Gmail's size limit; the HTML does, and Gmail clipping explains what happens past it.

When images do not load

Some readers never see the banner. Gmail shows images by default but holds them back on mail it finds suspicious, and readers can turn them off. Put the offer and the button in live text, and give every image alt text that says what it shows; the email accessibility guide covers how to write it. Logos on a transparent background have a second problem in dark mode, covered in the dark mode email guide.