Resize Image for Email Header

Sizing Images for Email That Actually Display Correctly

Email image rendering is a minefield. What looks perfect in your email editor breaks in Gmail, crops differently in Outlook, and vanishes entirely for the 40-60% of corporate recipients whose email client blocks images by default. Designing email images means designing for the worst-case rendering engine while optimizing for the best case — and it starts with getting dimensions and file sizes right.

The 600-pixel-wide constraint. Most email clients render the message body at 600 pixels wide. Gmail on desktop, Apple Mail, Yahoo Mail, and most webmail clients cap content width at or near 600px. Outlook uses the Word rendering engine (not a browser engine), which also defaults to roughly 600px content width. If your header banner is 1200px wide, the email client scales it down — sometimes well, sometimes poorly. Outlook, in particular, has a history of ignoring CSS max-width and stretching images to their native pixel dimensions, blowing out your layout. The safest approach: resize banner and header images to exactly 600px wide before inserting them. On retina displays (which have 2x pixel density), a 600px-wide image on a 600px-wide container can appear slightly soft. If retina sharpness matters to your audience, size to 1200px wide and set the HTML width attribute to 600 — the email client displays it at 600px using the extra pixels for sharpness.

Email client rendering differences are real. Gmail strips `