fallback.pics
Start using API
Blog Content Workflows 7 min read

Email Newsletter Hero Image Fallbacks (No Upload Required)

Skip the upload workflow and generate newsletter hero image URLs from your subject line text, brand color, and issue number instead.

newsletter hero imageemail image fallbackHTML emailMailchimp placeholderemail design
Email Newsletter Hero Image Fallbacks (No Upload Required)

A newsletter hero image is the first thing a subscriber sees after the pre-header text. When it fails to load or was never set, the email starts with a blank block that pushes the actual content down and erodes trust in the send. The newsletter hero image problem is worse in text-only drafts where contributors forget to attach a header graphic before hitting send.

URL-based hero generation means you can define the hero image once in your template as a formula, not as a file to upload per issue. The image updates automatically when the subject line changes, requires no design tool, and works in every email client that loads external images.

Problem

Why newsletter hero images break and what the fallback looks like

Newsletter hero images break in three ways: the image file was never uploaded before the draft was scheduled, the hosting domain goes offline between draft and delivery, or the subscriber's email client blocks all external images by default. The first failure is the most common and the most avoidable.

When the hero image fails, most email clients render an alt-text string inside a broken-image box. The box height collapses to about 16px of text. The visual impact is dramatic: the email goes from having a bold branded header to looking like a plain-text message with an error at the top.

A URL-based fallback image does not solve the blocked-images case (no external image loads there), but it eliminates the 'forgot to upload' case entirely and ensures that any subscriber whose client loads external images sees something intentional rather than a broken box.

URL pattern

Building newsletter hero image URLs from subject line data

The fallback.pics banner route accepts width, height, text, and color parameters. For a newsletter hero, use the issue subject or a short version of it as the text parameter. Use your brand's primary hex color as the background. The result is a hero image that reflects the content of each issue without any file management.

Encode the text parameter carefully. Email platforms URL-encode template variables when inserting merge tags into HTML, which can double-encode your query string. Test with a hard-coded URL first, then replace the text value with your platform's merge tag for the email subject.

Implementation text 
<!-- Mailchimp HTML email hero block -->
<img
  src="https://fallback.pics/api/v1/banner/600x200?text=Issue+%2342%3A+The+State+of+Web+Performance&style=soft&theme=purple"
  width="600"
  height="200"
  alt="Issue #42: The State of Web Performance"
  style="display:block;border:0;"
/>

<!-- With Mailchimp merge tag for subject line -->
<img
  src="https://fallback.pics/api/v1/banner/600x200?text=*|SUBJECT|*&theme=purple"
  width="600"
  height="200"
  alt="*|SUBJECT|*"
  style="display:block;border:0;"
/>

Dimensions

Correct hero image widths for email clients and mobile

The standard single-column email template is 600px wide. Desktop email clients display images at full 600px. Mobile clients scale the image down to fit the viewport, which is typically 375-430px wide. Use a 2× height for the image you want displayed: if you want a 100px-tall hero on desktop, request 200px height from the API so it renders at a sensible size on high-DPI screens.

Multi-column layouts reduce the available width. A two-column layout at 600px total gives 280px per column after padding. Size hero images for the container they sit in, not for the email width. Always include explicit width and height attributes on the img element so the layout does not shift when the image loads.

Platform integration

Wiring hero fallbacks in Mailchimp, ConvertKit, and Beehiiv

Mailchimp's drag-and-drop builder does not support arbitrary img src URLs in the visual editor, but the HTML editor does. Use the 'Edit HTML' mode for header blocks and paste the fallback.pics URL directly. Mailchimp does not rewrite external image URLs, so the URL arrives in the subscriber's inbox as you wrote it.

ConvertKit's template editor accepts raw HTML in its content blocks. Beehiiv provides a 'Custom HTML' block. In both cases, paste the img tag with the generated URL. Ghost newsletters, Substack does not support custom HTML in the body, so URL-based images are only an option in email templates you control end-to-end.

For newsletters sent via SMTP (Postmark, SendGrid, AWS SES with your own templates), the img tag goes directly into the HTML template. Use your templating language to insert the post title or subject into the text parameter.

Implementation text 
<!-- Postmark HTML template (Handlebars) -->
<img
  src="https://fallback.pics/api/v1/banner/600x200
    ?text={{subject}}
    &theme=purple&style=soft"
  width="600"
  height="200"
  alt="{{subject}}"
  style="display:block;max-width:100%;border:0;"
/>

Testing

Checking hero images across Gmail, Outlook, and Apple Mail

Use Litmus or Email on Acid to preview the template across clients before sending. Pay attention to Outlook 2016-2019 on Windows, which uses the Word rendering engine and ignores max-width: 100% on images. Set explicit width attributes in pixels on every img element. Outlook also strips CSS background images, so do not use the URL as a CSS background-image; use an img tag.

Gmail on Android and iOS caches externally hosted images via Google's image proxy. The URL is rewritten to a googleapis.com proxy URL on first load and cached for subsequent opens. This means the image that loads in Gmail may be a cached version if the subscriber has opened the email before. Test by sending to a fresh Gmail account.

Key takeaways

What to standardize before shipping

  • URL-based hero images eliminate the 'forgot to upload' failure mode that causes broken email headers.
  • Use the subject line or issue title as the text parameter to produce issue-specific hero images without design work.
  • Always set explicit width and height attributes on email img elements to prevent layout shifts in Outlook.
  • Test with Litmus or Email on Acid before sending to catch Outlook-specific rendering issues.
  • Gmail proxies external images via its own CDN; test with a fresh account to see the first-load experience.

Production fallback layer

Use fallback.pics anywhere an image URL is accepted.

Start with one deterministic URL and standardize fallback behavior across your design system.

Read the docs

Continue reading

Why Email Clients Block Images and What to Use Instead
Content Workflows

Why Email Clients Block Images and What to Use Instead

Email images blocked by default in Outlook and Gmail means your design relies on invisible assets. Here is what still works and how to plan for it.

 Transactional Email Product Image Fallbacks for Receipts
Ecommerce

Transactional Email Product Image Fallbacks for Receipts

Handle transactional email images that fail to load in order receipts and shipping notifications without breaking the email layout.

 OG Image Placeholders for Blogs, Docs, and Social Sharing
Content Workflows

OG Image Placeholders for Blogs, Docs, and Social Sharing

Use generated OG image placeholders for blog posts, documentation pages, changelogs, and social previews while final artwork is unavailable.