How can I generate AI product photos for email hero images?

Quick Answer

Generate an email hero at the aspect ratio of the actual image block, with the product inside the area shared by the desktop and mobile crops. Keep the headline, offer, and CTA as HTML; export a high-resolution master, then resize and compress a separate delivery file to the smallest size that still looks clean. In Nightjar, choose the closest supported aspect ratio and output settings, then review the finished image inside the email rather than treating one pixel size as a universal standard.

How should I choose email hero dimensions and file size?

Email hero dimensions should come from the template, not a generic 600-pixel rule. Measure the rendered width of the hero block, including its padding, and check whether the mobile layout scales, stacks, or crops the image. For example, Mailchimp's current image guidance distinguishes 600-pixel legacy templates from 660-pixel new-builder templates and recommends different source widths for each. Other email service providers and custom templates can use different dimensions.

For a high-density display, a source up to twice the rendered width can stay sharper when the template constrains it. That makes 1200 pixels a reasonable source for a 600-pixel block, not a universal requirement. Resize the final delivery copy before upload and compress it until further reduction creates visible banding, blur, or artifacts. Mailchimp recommends a maximum of 1 MB per image, but that is an ESP limit, not an ideal target for every send. A photographic hero will usually be smaller as JPEG; use PNG when transparency is necessary, and use WebP only after confirming your ESP and target-client support.

Nightjar's Product Photography Workflow exposes aspect ratios including 16:9 and 21:9, 1K, 2K, and 4K resolution where supported, and JPEG, PNG, or WebP output. Choose the ratio that most closely matches the block, generate a sufficiently large master, and optimize the email copy after download.

How should I compose an AI product photo for responsive email crops?

A responsive email hero needs a crop plan before generation. Compare the desktop and mobile frames, mark the overlap as the safe area, and keep the product, hands, packaging text, and other essential details inside it. Leave generous negative space where HTML copy will sit. If the desktop and mobile crops have little useful overlap, make a separate mobile version instead of expecting one off-center composition to survive both.

In Nightjar, a Background is a reusable scene that can provide the open space, while Custom Directions add placement instructions for this Generation. A useful direction is: "Place the product in the right third, keep the full product away from every edge, and leave the left side quiet for copy." Once the crop works, save the Create-form setup as a Recipe so the Photography Style, Background, Framing, Custom Directions, aspect ratio, resolution, and format can be applied to later Products without rebuilding the brief.

Why should email hero copy stay in HTML?

Headlines, offers, prices, and CTA labels should remain live HTML text instead of being baked into the generated image. HTML copy can resize for smaller screens, remain available when images are blocked, and be read or adjusted by assistive technology. This follows the W3C guidance to use text instead of images of text when the same presentation can be achieved with text.

The most robust layout is often an image block with adjacent HTML copy and an HTML button. If the design requires HTML over a background image, supply a readable fallback color and test carefully because background images do not render in every email client.

Alt text should reflect the hero's purpose in context:

• Describe an informative product image briefly without repeating the nearby headline.
• Use an empty alt="" when the hero is purely decorative and the surrounding copy already carries its meaning, as the W3C decorative-image guidance recommends.
• If the image is the only content inside a link, describe the destination or action rather than only its appearance, following the W3C functional-image guidance.

What should I review before sending an email hero image?

Review the actual email, not only the source file. Send test messages to the desktop and mobile clients your audience uses, and check the hero at narrow and wide widths. Mailchimp's testing guidance also recommends testing in different clients because each renders HTML differently.

Confirm that the product remains recognizable after every crop, the HTML headline and CTA work with images disabled, alt text is appropriate, and the fallback still reads in dark mode. Compare the AI image with the real Product Photos for color, shape, label, logo, and small-detail errors. Finally, inspect both sharpness and loading behavior using the compressed delivery file, not the larger master.