What is the best image width for an email newsletter?

The best width is 600 pixels for a full width image, because many email templates use a 600 pixel content width. For retina displays, export at 1200 pixels wide and let the email client scale it down.

Should I attach images to the email or host them?

Host them and link to them. Newsletter images are usually hosted and linked rather than attached, so every open downloads them. Attaching images increases the email size and can trigger clipping or blocking.

Does the 102 KB Gmail limit apply to images?

No, it applies to the HTML code, not linked images. Gmail clips messages whose HTML exceeds about 102 KB. Since your images are hosted and linked, they do not count toward that limit.

Can I use PNG for all images in an email newsletter?

You can, but it is not always efficient. Photos compress best as JPG, which gives smaller file sizes. Logos and flat graphics as PNG work well because they preserve sharp edges and transparency.

Compress Images for Email Newsletters

Compress images for the inbox, not the browser. HTML email campaigns demand their own dimensions, formats, and alt text. Your images must render across every major client without choking the message. Work to a 600-pixel content width. Account for retina screens. And assume most recipients will never see the image at all. Email clients block images by default.

Understand the Email Newsletter Image Size Constraints

Why Email Images Behave Differently

Email newsletters are not web pages. Gmail clips the HTML when it passes roughly 102 KB. That limit hits the code, not the linked images. Your images sit on a server and download on open. You can use larger files, but don't. Smaller files load fast and keep deliverability high.

The template sets the width. Most templates use a 600-pixel content area. Anything wider gets scaled down or triggers horizontal scroll. For a full-width banner, export at exactly 600 pixels wide. For side-by-side layouts, divide that 600 pixels among the images you place next to each other.

Set the Image Width for Email Template Layouts

Widths That Match Your Layout

Match the image width to the column. Here are the common setups:

Full width header or hero image: 600 pixels wide. Height can vary, but keep it proportional.
Two column layout: Size each image to fit side by side with a small gutter. Check your template's CSS for the exact column width.
Three column layout: Divide the 600-pixel space by three, then subtract the gutter. Confirm the number in your template.
Product thumbnails: Width depends on how many you place per row. Let the column math decide.

If you are unsure, 600 pixels is a safe maximum width for any single image.

Prepare Retina Images Email for High Density Screens

Retina displays pack more pixels per inch. Export an image at exactly 600 pixels for a 600-pixel slot and it will look soft. Export at double the display width instead. For that same slot, send a 1200-pixel-wide image. The email client scales it down. The extra pixel data keeps it crisp.

How to Export Retina-Ready Images

Determine the display width of the image in your email template (e.g., 600 pixels).
Multiply that width by 2 (e.g., 1200 pixels).
Export the image at that doubled width while keeping the same aspect ratio.
Compress the file as a JPG to keep the file size small.

This works because the image is linked, not attached. The larger pixel dimensions do not touch the email's HTML size limit.

Choose the Right Email Image Format

JPG, PNG, or GIF

JPG, PNG and GIF are the most widely supported formats. Pick based on the image type:

JPG: For photographs and complex images with many colours. Photos compress best as JPG, which reduces file size while keeping quality acceptable.
PNG: For logos, flat graphics, icons, and images with text. PNG preserves sharp edges and transparency.
GIF: Use only for simple animations or images with very few colours. Avoid GIF for photographs. File sizes balloon and quality tanks.

For most newsletters, you will use JPG for photos and PNG for graphics. Skip BMP, TIFF, and other formats. They are not widely supported.

Add Alt Text for Blocked Images

Many email clients block images until the reader chooses to display them. Your carefully prepared image may not appear at first. Alt text fills that empty space with a description. It also makes the email accessible to screen readers.

Writing Alt Text That Works

Describe the image content briefly and accurately. For example, "Blue sweater on mannequin with price on sale".
If the image contains important text, put that text in the alt text.
Keep alt text short. Long strings get truncated in some clients.
Do not start with "image of" or "picture of". Screen readers already announce it as an image.
For decorative images that add no information, use an empty alt attribute (alt="") so screen readers skip them.

Compress Images for Fast Loading

Shrink the File, Not the Quality

Linked images still need to load. Large files drag on mobile networks. Compress every image before you send:

Start with the correct dimensions (600 pixels wide or double that for retina).
Save photos as JPG with a quality setting that balances file size and visual quality.
Save logos and flat graphics as PNG with 8-bit colour where possible. Use PNG-8 for simple graphics with few colours.
Check the file size. Keep each image lean.
Use a compression tool if you need to reduce file size further.

Smaller image files also cut bandwidth usage for your email service provider. That helps deliverability.