AI images for landing pages: the whole set, not one hero
A landing page does not need one image, it needs about a dozen — and they have to look like they came from the same place. Every free hero-image generator will make you a single striking picture. None of them will make you a hero, three feature illustrations, six avatars and an OG card that read as one design, then compress them and write them into your repo.
Copy: done. Layout: done. A dozen grey rectangles where the artwork goes, a Slack thread with a designer who has three other things on, and a stock library where everything costs money and looks like everything else. This is the part of a launch that never appears on the plan.
Count the image slots on your page
A typical marketing page has more of them than anyone estimates. Here is the usual set, with the tool and the shape each one wants. Ask for the shape explicitly — a generation with no aspectRatio comes back square.
Hero
generate_imageThe one image people actually see. Worth a premium model and two or three attempts.
Feature cards
generate_imageThree or four, all from the same reference image so the row reads as a set.
Logo strip
text_to_svgPlaceholder marks as vector while the real partner logos are still being chased.
Avatars
generate_transparent_imageCut out, so they sit correctly on any card colour and in dark mode.
Product shot
edit_imageUsually a real screenshot placed into a generated device or environment.
OG image
generate_imageThe preview every share renders. Text-free — overlay the copy at build time.
The workflow that keeps a page looking designed
Generating a dozen images is easy. Generating a dozen images that belong on the same page is the actual problem, and it is solved by order of operations rather than by better prompts.
- 1
Establish the look on one image
Spend your iterations on the hero. Lock the palette, the medium and the lighting there — a flat vector hero and a photoreal feature card will never sit together.
- 2
Make that image the reference
Every subsequent call passes the approved hero in referenceImages. The model now has an example rather than an adjective.
- 3
Batch the repeats
Six avatars or four feature illustrations are independent of one another. Send them through multicall and they come back together, all from the same reference.
- 4
Cut out what overlaps
Anything crossing a card edge or a heading needs alpha, so generate those with generate_transparent_image rather than fixing them later. Check result.isTransparent — a cutout that silently failed still returns success.
- 5
Compress before you commit
WebP at quality 75–82 for hero and feature art, 55–65 for avatars. This is the step that keeps Largest Contentful Paint honest, and it hands back the file itself rather than a link.
- 6
Write the alt text as you go
The agent that generated the image knows exactly what is in it. That is the cheapest good alt text you will ever get.
Build the images for /pricing.
1. Hero, 21:9, premium model — warm cream
background, paper-craft illustration of
a set of scales, subject to the right so
the headline has room. Show me before
continuing.
2. Once I approve, use it as the reference
image for three 4:3 feature illustrations:
billing, usage limits, team seats.
3. Six 1:1 transparent avatars, same style.
Check isTransparent on each one.
4. Compress everything to WebP. Hero at 82,
features at 75, avatars at 60.
5. Write them to public/pricing/ and update
the JSX with real alt text.The prompt detail most people miss
Ask for room where the headline goes
A hero image is never shown on its own. It sits behind or beside a headline, a subhead and a button, and a beautifully centred composition is exactly the one that leaves nowhere to put them. The fix is a clause in the prompt rather than a crop afterwards: say where the subject belongs and which region should stay quiet.
without it
“A paper-craft illustration of a set of scales, warm cream background.”
Comes back centred and full-bleed. The headline lands on top of the subject and you darken the whole image to compensate.
with it
“…scales positioned to the right third, left third an uncluttered wash of background, no text.”
Comes back with somewhere for the copy to go, at the ratio you asked for, and needs no overlay to stay readable.
The same clause is what keeps text out of the picture. Say “no text” explicitly and put the words in HTML, where they can be translated, restyled, selected and read aloud.
Six ways generated pages go wrong
Text baked into the image
Even where a model renders type well, baked-in words cannot be translated, selected, restyled or read aloud by a screen reader, and a copy change means regenerating the asset. Generate the picture; overlay the words in HTML.
Eleven different art directions
The symptom of not using a reference image. Each prompt was fine on its own; the set is incoherent.
4 MB PNG heroes
A generated asset is not a shipped asset until it has been compressed. One credit fixes it.
Square images stretched into banners
Omit aspectRatio and you get 1:1 by default. Ask for 21:9 at generation time instead of cropping a square down to a strip.
Cutouts upscaled the wrong way round
If a cutout also needs enlarging, upscale first and remove the background afterwards — the upscaling model returns transparency as white.
Empty alt attributes
Decorative images take alt="". Everything else needs a description, and the agent already knows what it drew.
Do AI images hurt your SEO?
No — not for being AI-generated. Search guidance evaluates the page, not how the pixels were produced, and Google staff have said publicly that AI imagery carries no direct ranking effect. The nuance worth keeping is that this is a statement about provenance, not a licence to fill a page with decoration.
What does move rankings is everything around the image. A 4 MB hero is a Largest Contentful Paint problem. An image without width and height attributes is a layout-shift problem. An image that illustrates nothing is a relevance problem, and that one is the same whether a person or a model drew it. Compress, set dimensions, describe honestly in alt text.
One thing specific to this pipeline: provenance metadata does not survive
Some models embed provenance credentials — C2PA records, or Google’s SynthID marking — in the file they produce. Nothing in our pipeline preserves them. Neither compression nor format conversion copies metadata across, so EXIF, the colour profile and any provenance record are dropped in the re-encode. Since practically every workflow here ends with a compression pass, assume the asset you ship carries no credentials.
This cuts both ways. It is a privacy benefit for anything user-supplied, since GPS coordinates go the same way. But if you have a disclosure policy that depends on provenance data being present, keep the file from the generation step and ship that one instead.
Search-guidance position checked September 2026. Metadata behaviour verified against the image handlers, which never request metadata preservation.
What one page costs
Priced at the rates actually deducted per call: 8, 15 or 30 credits for a generation depending on the model, the model price plus 8 for a transparent one, 5 for a vector, 1 for a compression.
| Asset | Calls | Credits |
|---|---|---|
| Hero — three attempts, premium model | 3 × generate_image | 90 |
| Feature cards — three, standard model | 3 × generate_image | 45 |
| Logo strip — four placeholder marks | 4 × text_to_svg | 20 |
| Avatars — six, fast model | 6 × generate_transparent_image | 96 |
| Product shot — one edit over a screenshot | 1 × edit_image, standard | 15 |
| OG image — one, standard model | 1 × generate_image | 15 |
| Compression — the twelve raster assets | 12 × compress_image | 12 |
| One complete page | 293 | |
Under a third of a Starter plan’s 1,000 monthly credits, revisions included — and the four vector logos need no compression pass, which is why only twelve assets are compressed. See plans →
Landing page image questions
Am I allowed to use AI-generated images on my website?
Yes. Nothing in search guidance forbids it, and the licensing question that makes stock libraries awkward does not arise in the same way. What you still owe the reader is relevance: an image that illustrates nothing is a cost to the page whether a person or a model drew it. Check the terms of the specific model you generate with if the asset is going into paid advertising, since some providers do draw distinctions there.
Do AI-generated images hurt SEO?
Not by being AI-generated. Google's position, as of September 2026, is that it evaluates the page rather than how the pixels were produced, and its own staff have said publicly that AI images carry no direct ranking effect. What genuinely does move rankings is everything around the image: how much it weighs, whether it shifts the layout while loading, and whether it is relevant enough that people stay. Compress the asset, set explicit width and height, and write alt text that describes what is actually shown.
Is it bad to use AI to generate images?
For decorative and illustrative page furniture — the abstract hero, the feature-card art, the placeholder avatars — it is a reasonable trade that saves a designer for the work only a designer can do. It is a bad idea where the image is a factual claim: photographs of your actual team, your actual office, your actual product. Generating those is not a style choice, it is a false statement, and readers are increasingly good at spotting it.
How do I stop eight generated images looking like eight different websites?
Generate one image you like, then pass it in referenceImages on every subsequent call. That single habit does more for visual consistency than any amount of prompt engineering, because the model gets a concrete example instead of an adjective. The reference is genuinely sent to the model — it is normalised and forwarded as an image input, not folded into the prompt as a description.
What aspect ratios does a landing page need?
Roughly: 21:9 or 16:9 for the hero, 4:3 or 1:1 for feature cards, 1:1 for avatars, and 16:9 for the Open Graph image. Ask for the shape up front, because if you omit aspectRatio on a generation the request defaults to 1:1 and you get a square — cropping that into a banner throws away half the composition you paid for. The accepted values are 1:1, 16:9, 9:16, 4:3, 3:4 and 21:9.
How many credits does a full page cost?
A complete set — hero with a couple of retries, three feature illustrations, four vector logo placeholders, six transparent avatars, a product shot and an OG image, all compressed — comes to about 293 credits. That is under a third of the Starter plan’s monthly allowance, so a page and its revisions fit comfortably inside one month.
Can the agent write the images into my repo itself?
Yes, and that is the point of putting the tools inside the agent rather than in a browser tab. Generation returns a hosted URL the agent can fetch and write into your public directory, then update the JSX reference and the alt text in the same turn. Compression is the exception worth knowing: it returns the file itself as base64 rather than a URL, which is actually more convenient for writing to disk — decode it and save it, with no second round trip.
Will the images keep their C2PA or SynthID provenance data?
Not through our pipeline. Neither the compression nor the conversion step copies metadata across — no EXIF, no colour profile and no provenance record survives the re-encode. Since almost every workflow ends with a compression pass, assume the asset you ship carries no credentials. If you need provenance preserved for a disclosure policy, keep the original file from the generation step and ship that.