Email Banner Size: Dimensions, File Size and Format

Email banner size follows your email's content area: usually 600 pixels wide, with the file saved at twice that width, 1,200 pixels. The email shows it at 600, and the extra pixels keep it sharp on high-resolution screens.

A text banner shown at 600 × 200 is exported at 1,200 × 400; a photo shown at 600 × 300 needs a 1,200 × 600 file.

The format decides the weight more than the size does. In our October 2026 test, that photo weighed 72 KB (kilobytes) as a JPG (JPEG) at quality 80. As a PNG, the lossless format, it weighed 815 KB.

Email banner size and image sizes at a glance

A header banner, a photo hero and a product picture follow one rule: export each at double its display width. The format then depends on what the image shows.

Image in a 600 px email	Shown at	Export at	Our file-size target	Format
Header banner with text or a logo	600 × 200 px	1,200 × 400 px	Under 45 KB	PNG or GIF (flat colours only)
Photo hero	600 × 300 px	1,200 × 600 px	Under 100 KB	JPG, quality 70 to 80
Product photo in a two-column row	Up to 300 × 300 px	600 × 600 px	Under 50 KB	JPG
Logo	150 px wide	300 px wide	Under 10 KB	PNG

The file-size targets are ours, set from the measurements further down. For a template wider than 600 px, double its own content width instead.

Email width sets the banner width

A banner's width comes from the template's content area, not from the image file. The email's HTML, its code, tells the mail app how wide to draw the picture, and the file is scaled to fit.

MJML, an open-source framework for building responsive email, uses 600 px as its default content width (MJML documentation).

Classic Outlook for Windows wants that width written into the image tag itself. Can I email found that it ignores image widths set in CSS, the style rules of an email. Microsoft's reference for the Word-based engine behind it lists max-width as unsupported (Microsoft Learn), so a max-width cap cannot shrink a large file either.

Without a width attribute, the file's own pixels decide. Chrome 156 does the same when left without an instruction: our 1,200-pixel banner filled 1,200 CSS pixels, and with width="600" it filled 600.

Outlook has one more quirk at 120 dpi, the Windows setting behind 125% display scaling: sizes set in attributes do not scale with the rest of the email, as the same site's width attribute tests show. If many readers use classic Outlook, test on a Windows computer at that setting.

Why export at twice the width

A high-resolution screen draws each CSS pixel with two or more physical pixels; browsers call that ratio devicePixelRatio (W3C specification). Shown at its own width on such a screen, a single-width file gets stretched, so edges and small letters go soft.

We measured the softness in headless Chrome 156 at a ratio of 2. Our green text banner was shown 600 px wide, first from a file of that width, then from one twice as wide.

Letter edges took 4.0 device pixels to fade from green to white with the narrow file, and 1.3 with the wide one: letters from the small file were about three times as blurred.

Email can't reliably hand each screen its own file. Gmail and Outlook ignore srcset, the attribute that does this on websites (Can I email), so one file serves every reader.

Phones need less than you might expect. On a 375 px screen, a 600 px email is drawn at 62.5%, so the double-width banner supplies 3.2 file pixels for each CSS pixel. On screens up to 400 px wide, that covers a ratio of 3 as well.

The cost is real, though smaller than four times. Doubling the width quadruples the pixels. Yet the photo grew from 20.3 KB to 72.2 KB in JPG at quality 80, and the green banner from 18.3 KB to 42.0 KB in PNG.

Email image file size: our measurements

A photo banner stays under 75 KB as a quality-80 JPG even at 1,200 px; as a PNG it is 11 times heavier.

On 25 October 2026 we saved two banners at both widths in four formats. The photo is a still life from MailGraf's ready-made layouts, cropped to 2:1. The text banner is a flat green design with a headline, drawn in Chrome.

Our photo has a plain background; a busier one, with foliage or a crowd, weighs more at the same quality.

JPGs came from libjpeg-turbo 3.1, PNG and GIF files from the sips tool in macOS, and WebP from cwebp 1.6. One KB here is 1,000 bytes.

Format	Photo, 600 × 300	Photo, 1,200 × 600	Text banner, 600 × 200	Text banner, 1,200 × 400
JPG, quality 90	31.6 KB	114.8 KB	16.6 KB	38.4 KB
JPG, quality 80	20.3 KB	72.2 KB	12.6 KB	29.6 KB
JPG, quality 70	15.6 KB	54.5 KB	10.6 KB	25.2 KB
JPG, quality 60	12.9 KB	43.9 KB	9.3 KB	22.3 KB
PNG	221.0 KB	814.7 KB	18.3 KB	42.0 KB
GIF	80.9 KB	299.4 KB	8.1 KB	17.6 KB
WebP, quality 80	11.9 KB	42.9 KB	7.5 KB	14.9 KB

A photo saved as PNG is the usual reason a banner is heavy. JPG quality is the cheapest saving: moving the large photo from quality 90 to 70 took it from 114.8 KB to 54.5 KB, less than half.

Flat graphics reverse the order. Among the formats every email app shows, the text banner was lightest as a GIF, and zoomed in, its JPG versions showed faint blotches around the letters, worse at quality 60. GIF holds 256 colours, plenty for a handful of flat ones; a banner with a photo or a gradient would lose more.

PNG kept every edge exact, but its weight depends on the tool. Chrome's own PNG of the same large banner came to 33.9 KB, against 42.0 KB from sips.

Two smaller files fill in the table at the top. A 600 × 600 crop of the photo, sized for a two-column row, came to 43.4 KB at JPG quality 80.

Our wordmark, saved 300 px wide for a 150 px logo slot, came to 7.8 KB.

A PNG text banner, the quality-80 photo hero and three product squares from this test total 244 KB before any text.

JPG, PNG, GIF or WebP for email images

Use JPG for photos and PNG for logos, text banners and anything transparent. GIF suits animation and very simple graphics, while WebP stays out of email for now.

Format	Use it for	Gmail	Classic Outlook for Windows
JPG	Photos	Shows it	Shows it
PNG	Logos, text banners, transparent images	Shows it	Shows it
GIF	Animation, flat graphics with few colours	Shows and animates it	Older versions show the first frame only
WebP	Not email, for now	Converts it to JPG, without animation	Does not show it

The support columns come from Can I email, as of 25 October 2026. It adds that Office 365 accounts in classic Outlook play a GIF three times and then stop.

So design the first frame as the still picture Outlook readers may get, as with a GIF that previews a video or any animated GIF in email.

Does dpi matter for email images?

No. Email apps size images in pixels, and the dpi value stored in the file changes nothing on screen.

We saved the large green banner twice, tagged 72 dpi and 300 dpi. The two files weighed 42,624 bytes each and every pixel matched. Chrome drew both at full size, or at half size once a width attribute was set.

Advice to export at 72 dpi still circulates; Google's AI Overview for "email banner size" gave it on the day of our test. Set the pixel width and leave the dpi box alone.

Banner height and text inside the image

No standard sets the height of an email banner; the phone screen sets the useful limit. On a 375 px phone, a 200 px banner becomes 125 px tall and a 300 px hero about 190 px.

MailGraf's mobile preview offers phone widths of 375 and 430 px. Words inside the picture shrink with it: on the smaller of the two, our 40 px headline becomes 25 px, and the 13 px line above it drops to about 8 px.

So keep small print out of the picture. Dates, prices and the button belong in live text under the banner. There they stay readable on a phone and still show when images are off.

Alt text for email banners

Every banner needs alt text: the words a mail app shows, and a screen reader reads aloud, when the picture is not displayed. Success criterion 1.1.1 of the Web Content Accessibility Guidelines (WCAG) asks for a text alternative with the same purpose as the image (W3C).

For a banner with words in it, the alternative must contain the same text (W3C images tutorial). Ours, with the date moved to live text below it, would say "Autumn menu is here."

A purely decorative strip gets an empty attribute, alt="", so screen readers skip it (W3C).

Some readers never load the pictures. Gmail offers Ask before displaying external images for slow connections and to save mobile data (Gmail Help). An email made of one large picture leaves them with nothing, and image-only emails also attract spam filters.

Exporting an email banner from Canva

In Canva, the email banner size you design is the size you download, unless you scale it. Save it at double the display width, either by scaling the download or by designing at that size.

JPG and PNG downloads have a Size slider and a Quality choice. JPG offers Low, Medium or High, PNG offers Compress or High, and both have Limit size for a target in KB.

Canva lists scale, quality and the size limit as options for its Pro, Teams, Education and Nonprofits plans (Canva Help Centre, October 2026).

On the free plan, make the design 1,200 × 400 px from the start, since it downloads at its own size. Pick JPG for a photo banner and PNG for a flat text banner.

Limit size works on one page at a time, and Canva may go over it for designs with many layers.

When the whole email is designed in Canva, the banner travels inside the HTML and images download, a compressed folder that MailGraf can import as a finished email.

Email banner size in the MailGraf editor

In MailGraf, the width is set once under Settings > Layout > Content width: 600, 640, 700 or Custom, from 480 to 800 px. A new design starts at 600 px and the ready-made layouts at 700, where a 1,400 px file covers a full-width banner.

Each Image block is compiled through MJML, which writes the display width into the image tag for Outlook. In our test, MJML 4.18 wrote width="552" for a full-width image in a 600 px email with 24 px side padding.

The Image block accepts PNG, JPG or GIF files of up to 10 MB (megabytes); WebP is left out because classic Outlook cannot show it.

A file narrower than twice its column gets a note, for example "This image is 600 px wide. Use at least 1200 px so it stays sharp on high-resolution screens."

Files over 1 MB get a note as well, and the checks before you send include All images have alt text. Upload through Media instead, and MailGraf offers an Optimized copy beside the Original whenever it can make the file noticeably smaller.

The editor and media library are included in the plans on the pricing page. Choose the allowance for your monthly sends; the banner checks stay the same.