The banner is the first thing a person sees when they open an email.It can immediately grab attention or... ruin the impression if it looks bad on a phone.In this article, we'll explain how to create a responsive banner for an email that looks great on both desktop and mobile.

What is a responsive banner?

A responsive banner is an image or block that:

  • scales to fit the screen width,
  • doesn't break the email's layout,
  • loads quickly.

Important: if you just insert a large image, it can get cropped or fail to adapt to a small screen.

Step 1. Determine the right size

For email:

  • Width: 600–650 px maximum (this is the standard width for most emails).
  • Height: ideally up to 300–400 px, so the banner doesn't "eat up" the entire first screen.

Tip: make the banner informative enough to be understood even without surrounding text.

Step 2. Use the right format

  • PNG — if transparency matters.
  • JPEG — if you need photos and a smaller file size.
  • GIF — if you want to add animation.

⚠ Don't use: SVG — it's not supported everywhere in email.

Step 3. Add alt text

Even if the image fails to load, alt text will explain what's supposed to be on the banner.This matters for accessibility and for people who block images from loading.

Step 4. Don't put text inside the image

❌ Text baked into an image doesn't adapt and can become unreadable on mobile.✅ It's better to place text as a separate block on top of or below the banner (in the Letteros editor, you can do this with layers or combined blocks).

Step 5. Check the scaling

In the editor:

  • set the banner width to 100%,
  • set a max-width — for example, 600 px,
  • don't set a fixed height (let it scale proportionally).

Step 6. Optimize the file size

  • Compress the image (for example, using TinyPNG) so it loads quickly.
  • The email's total size (including all images) shouldn't exceed 150–200 KB.

Step 7. Test it

  • Check the preview in Letteros (desktop + mobile).
  • Send a test email to different devices.
  • Make sure the banner isn't cropped and doesn't break the layout.

Conclusion

A responsive banner isn't just a pretty picture — it's an important element that needs to be:✔ lightweight,✔ informative,✔ scalable.

In Letteros, you can put together banners like this in a couple of minutes using built-in modules and ready-made templates.