Get Started

Email Images: Optimization, Alt Text, Formats, and Performance

Published

The most fragile part of your email

Images are the first thing readers notice and the first thing that breaks. A hero image that’s too large takes five seconds to load — and the reader has already closed the email. A product photo with no alt text shows as an empty box when images are blocked. A logo that’s the wrong resolution looks blurry on retina screens. Every image in your email is a potential point of failure.

The good news: most image problems are preventable with a few consistent practices. Optimize the file, write descriptive alt text, choose the right format, and size for the screen. Do those four things and your images work.

What email image handling actually involves

  • File optimization — reducing the file size of each image so it loads quickly, without visibly degrading quality. Large images slow down load times, and slow emails lose readers.
  • Alt text — the short text description attached to an image. When images don’t load (and many email clients block them by default), the alt text is what the reader sees instead. It’s also read aloud by screen readers for visually impaired users.
  • Image formats — the file type of the image. JPEG, PNG, and GIF are universally supported. WebP is smaller but not supported everywhere. Choose based on what the image is and where it’ll be seen.
  • Sizing and resolution — the pixel dimensions of the image. Too small and it looks blurry on high-resolution screens. Too large and it wastes bandwidth and slows loading.
  • Aspect ratio — the width-to-height relationship. Images that are stretched or squished to fit a different aspect ratio look distorted. Match the container’s ratio.

Why it matters

  • Images are blocked by default in many clients. Gmail, Outlook, and others may block images until the reader clicks “allow.” Without alt text, the reader sees an empty box — and has no reason to click allow.
  • Load time kills engagement. Readers wait about 2–3 seconds for an email to load before giving up. A single 2MB image can push your load time past that threshold.
  • Alt text is an accessibility requirement. Screen readers rely on alt text to describe images to visually impaired users. Missing alt text is one of the most common accessibility failures in email.
  • Blurred images signal unprofessionalism. A logo or product photo that looks pixelated on a retina screen tells the reader the sender didn’t care enough to check.
  • Broken layouts from wrong sizes. An image wider than its container forces horizontal scrolling or pushes the layout out of alignment.

How to handle images in email

  1. Optimize every image before uploading. Compress JPEGs and PNGs to reduce file size. Aim for under 200KB for most images, under 1MB for large hero images. There are many free online compressors.
  2. Write descriptive alt text for every meaningful image. Alt text should describe what the image shows and why it matters. “Logo” is unhelpful. “Temway logo — visual email builder” is useful. For purely decorative images, use empty alt text (alt="") so screen readers skip them.
  3. Choose the right format. Use JPEG for photographs and complex images with many colors. Use PNG for logos, icons, and images that need transparency. Use GIF for simple animations. Avoid WebP unless you’re sure your audience’s clients support it.
  4. Size for 2x resolution. If an image displays at 300px wide, upload it at 600px wide. This ensures it looks sharp on high-resolution (retina) screens without being unnecessarily large.
  5. Set a max width. Images should never be wider than their container. Set a maximum width of 100% so the image scales down on narrow screens instead of overflowing.
  6. Don’t build the entire email as one image. Some senders create a single large image as the entire email body. This fails when images are blocked (the reader sees nothing), is inaccessible, and can trigger spam filters. Use real text and blocks for content; use images as accents.
  7. Test with images blocked. Send a test copy and view it with images disabled. What the reader sees without images is the version many of them actually experience.

Common mistakes

  • No alt text. The reader sees an empty box or a broken-image icon. They have no reason to enable images.
  • Huge file sizes. A 3MB hero image takes 5+ seconds to load on a mobile connection. The reader has already left.
  • Images as the entire email. When images are blocked, the reader sees nothing. No text, no context, no reason to engage.
  • Wrong format. A logo saved as a JPEG has compression artifacts around the text. A photograph saved as a PNG is unnecessarily large.
  • Stretched or squished images. Forcing an image into a container with a different aspect ratio distorts it. Crop or resize to match.
  • Forgetting retina. An image that looks fine on a standard screen looks blurry on a retina screen. Always export at 2x the display size.

How to handle images in Temway

Temway’s image block lets you upload, place, and style images within your email. Set alt text in the block’s properties panel — it’s a dedicated field, not an afterthought. Control image width, alignment, and spacing from the same panel.

Use workspace branding to set your logo once, so every email starts with your logo correctly placed and sized. For recurring visual elements like header banners or social icons, build them once as reusable layouts and drop them into each email.

Preview in Desktop and Mobile to check how images render at both sizes. Then send a test copy to your inbox — ideally with images initially blocked — to see what the first-load experience looks like. When images load fast, alt text is in place, and everything looks sharp, export the HTML or push it to your ESP for sending.

Where to go next