An Email Hero-Image Workflow

Email is the most technically constrained visual medium in digital marketing. Unlike a web page where the designer controls the rendering environment through CSS and can assume modern browser capabilities, email renders across hundreds of email client and app combinations — Outlook 2016 on Windows, Gmail in Chrome, Apple Mail on iOS, Samsung Mail on Android, the Outlook app on iPhone — each with different levels of CSS support, different image rendering behaviors, and different handling of high-density retina displays.

Several constraints are non-negotiable. Images must be delivered over HTTPS or many email clients will block them entirely. The image must load within approximately 500 milliseconds or engaged subscribers will have already scrolled past it before it renders. File size should be kept below 100KB for a hero image without sacrificing visual quality, which means compression must be optimized carefully. The image must render correctly when displayed at the specified width (typically 600 to 680 pixels in a single-column email template) but must also look acceptable when scaled by the email client at different viewport widths.

Additionally, email hero images must be accessible — they must carry meaningful alt text that describes the image content for subscribers who have images disabled (a significant proportion, particularly in B2B email), for screen reader users, and as a fallback that renders visibly when the image fails to load. The alt text is not generated by the image but should be included as part of the workflow output as a text file accompanying each image export.

Every email campaign has a type, and each type has a different visual priority that should drive the hero image direction. A promotional sale email should lead with product imagery and pricing urgency — the hero communicates "something valuable is happening right now." A newsletter email should lead with editorial atmosphere that signals the tone of the content — sophisticated illustration for a finance newsletter, warm photography for a lifestyle newsletter. A transactional email (order confirmation, shipping notification, welcome sequence) should lead with brand warmth and trust signals — a clean, welcoming visual that reinforces the relationship.

The Floniks email hero workflow uses a Campaign Type node at the root to classify each campaign and route it to the appropriate visual direction template. Each template is a set of generation parameters optimized for that campaign type: the promotional template emphasizes product presence, strong lighting, and high visual contrast; the newsletter template emphasizes editorial atmosphere, mood, and typographic space; the transactional template emphasizes warmth, brand palette, and visual simplicity.

The Campaign Type node connects to a Campaign Brief node that accepts the specific campaign attributes: campaign name, audience segment, primary message, hero product or subject (if applicable), color palette override (if the campaign uses a special seasonal or promotional palette different from the standard brand palette), and the scheduled send date. The send date is used to apply appropriate seasonal visual considerations automatically — a campaign sending on November 15th gets autumn warmth automatically applied to the visual direction unless the palette is overridden.

The Hero Generation node receives the assembled campaign brief and generates the hero image at 1200x600 pixels — the standard 2x retina resolution for a 600px-wide email hero. Generating at 2x and then downsampling for standard-density displays produces sharper results than generating at 600x300 and upscaling, because the downsampling process uses high-quality averaging that eliminates generation artifacts and produces crisp, professional edges.

The prompt template for email hero generation includes specific constraints for email rendering: "avoid gradients that cross from dark to light over large areas, email clients can band gradients," "use solid regions of color in large areas rather than complex textures, complex textures render poorly at compressed file sizes," "ensure no critical visual information is within 20 pixels of any edge, email clients may clip images on narrow viewports," and "design for both light-mode and dark-mode inbox rendering — avoid dark backgrounds that become nearly invisible in dark-mode email clients that invert images." These constraints, locked into the node configuration, prevent common email-specific rendering issues without requiring the user to remember them.

A File Size Optimizer node runs after generation. It applies progressive JPEG compression starting at quality 90 and iteratively reduces quality until the file size falls below the 100KB target. Each iteration checks that the SSIM (structural similarity index) of the compressed output remains above 0.92 compared to the uncompressed source — if compression artifacts become visible at the 0.92 threshold before the file size target is reached, the optimizer expands the target to 110KB and notes this in the export log for review. For campaigns where image quality is paramount, the file size target can be raised to 150KB; for campaigns sending to large lists where deliverability is the priority, the target can be tightened to 75KB.

Every email hero export includes two image files: the 1200x600 retina variant for high-density displays and the 600x300 standard-density variant for standard displays. Email service providers and email templates handle retina delivery differently. Some ESP templates use HTML srcset attributes to deliver the retina image to retina displays and the standard image to standard displays. Others use a single image width attribute in the HTML and rely on the subscriber's email client to scale appropriately. The workflow produces both files with consistent naming: "[campaign-slug]-hero@2x.jpg" for the retina variant and "[campaign-slug]-hero.jpg" for the standard variant.

Alt text generation is automated by connecting the campaign brief to an Alt Text Generator node. This node writes a descriptive, keyword-relevant alt text string for the image based on the campaign subject matter and hero visual. For a hero showing a winter coat in a snowy outdoor setting for a clothing brand, the alt text might be: "Woman wearing the Floniks Wool Overcoat in charcoal, walking through a snow-dusted park at golden hour." The alt text is exported as a text file named "[campaign-slug]-hero-alt.txt" alongside the image files, ready for the copywriter or email builder to paste directly into the ESP template.

The complete export package — retina JPEG, standard JPEG, and alt text file — is organized in a folder named "[campaign-slug]-email-hero/" and is ready for direct handoff to the email builder or automated upload to the ESP asset library. Save the email hero workflow as a template named "EmailHero-[Brand]-v1" and configure it to accept campaign brief inputs from the marketing calendar tool via webhook. When a campaign brief is submitted more than 72 hours before the scheduled send date, the workflow can trigger automatically and deliver the hero image package to the ESP library without any manual creative production request.