From Idea to Landing Page: Building Site Visuals With AI

Commission a hero image, three feature icons and one section illustration from a freelance illustrator and you're looking at four figures. The rate aggregator whatshouldicharge.io puts a full-page editorial illustration between $400 and $1,500, and commercial brand illustration between $1,000 and $10,000 once usage rights are in the contract. Generate the same five assets through today's image models and the raw API cost comes in under a dollar.

The price gap isn't the interesting bit. Cheap is easy. What's interesting is that most people spend that dollar and still end up with five pictures that don't look like they came from the same company, on a page that performs worse than the one it replaced.

So here's the build. AI images for landing pages work when you treat the set as one system with one saved style, not as five separate prompts on five separate afternoons.

Six steps, in the order you'd actually do them:

1. Write the brief: what the page has to say before anything gets drawn.
2. Build the theme, so every asset inherits one look.
3. Generate the hero, on the model that suits the job.
4. Match the icons and the illustration to the hero.
5. Export in the formats the browser actually wants.
6. Sort the copyright and disclosure question before you ship.

The brief: five assets, one style

A landing page visual set is a system, not a picture. You need a hero carrying the offer above the fold, an icon per feature, and usually one illustration to break up a long middle section. Five pieces, one visual language.

Mismatched visuals are the tell that a page was assembled rather than designed. One icon in flat pastel, one in glossy 3D, a hero that looks like a stock photo of an office: the reader can't name what's wrong, but the page reads as thrown together. That's a trust problem before it's an aesthetic one.

Write the brief in plain words before you open a generator. Ours for this build: raspberry pink on black, matte, isometric, no gradients, nothing photoreal. Six words of style direction beats six hundred of prompt fiddling. If you're still choosing a starting model, we ranked every major one on what it's actually good at.

Do landing page hero images even work?

Above the fold is where attention concentrates, and that part isn't in dispute. Therese Fessenden's eye-tracking work at the Nielsen Norman Group, published in April 2018, found people spent roughly 57% of their page-viewing time above the fold and 74% within the first two screenfuls, out to about 2160 pixels. Attention drops off sharply after that, though people do keep scrolling.

Weight isn't the same as "put a big picture there." The conversion literature is split, and mostly not in the hero image's favour. CRO practitioners find repeatedly that abstract or decorative heroes underperform visuals showing the product in use or the outcome the reader wants. Oversized heroes create a false bottom: the page looks finished at the fold, so nobody scrolls to the part that converts. CXL's roundup of what reliably wins in A/B tests puts a single static hero with one value proposition ahead of an auto-rotating carousel.

The numbers pointing the other way need care. That often-quoted "hero optimisation lifts conversion 38% on average" traces back to one CRO vendor's own analysis, and we'd treat it as marketing until someone replicates it.

Think of the hero as a shop window. Nobody stops for a beautiful abstract arrangement of shapes. They stop when they can see the thing they came for. What AI changes is that specific, relevant, on-brand visuals stop being expensive to make and cheap to throw away.

Build the theme before you build anything

The single step that separates a set from a pile is saving the style once and reusing it. Not describing it five times.

Every serious generator has a version of this: Midjourney's style reference, Recraft's brand controls, Firefly and Ideogram style features. In JammyJar it's called a theme, with two doors into it. Drop in up to three reference images and the style gets extracted for you, or describe the look and it gets built from the description. Either way it's reusable, and the palette, finish and rendering approach come along with every later generation.

Think of it as taking a paint chip to the shop. You don't describe the colour from memory in each aisle. You carry the sample and match against it.

Two notes. Extract from a reference that already has the finish you want, not one that merely has the right subject: you're lifting texture, light and palette, not content. We wrote up both ways to lift a style off an existing image, and the copyright question underneath it. And a theme won't rescue a bad brief. It enforces consistency, so it will happily make five consistently mediocre images.

Generate two throwaway images through the theme before you commit. If they don't sit together, fix the theme, not the prompts. Longer prompts are the wrong tool for consistency, and we've compared the four methods that hold a look together.

Generate the hero on the model that suits the job

Models are good at different things, and the hero is where that starts to bite. Text rendering was the classic failure: warped letters were how everyone spotted an AI image. Google's Gemini 3 Pro Image, released in November 2025 and better known as Nano Banana Pro, largely fixed it, alongside output up to 2K and 4K and support for up to 14 reference images.

That doesn't make it the right default. It's the expensive option, and most of a hero build is throwaway drafts.

Set the aspect ratio before you generate, not after. A hero cropped down from a square loses the composition it was built around, and we put the right ratio for every platform and model in one table.

Then iterate on composition, not adjectives. Move the subject, change the crop, change what the reader sees first. Adding "highly detailed, professional, 8k" does close to nothing, one of several pieces of folklore we picked apart in the prompting guide. If the hero needs a headline burned into the pixels, don't fight a cheap model for it. Switch.

Icons and illustrations that match the hero

Apply the same theme, change only the subject. That's the whole technique for the supporting set, and it's why the theme came first.

Icons have one requirement the hero doesn't: they should be vectors. SVG is resolution-independent, tiny on the wire and sharp on any display, which is exactly what an icon needs. Most so-called AI SVG output isn't SVG at all. It's a raster image wrapped in an SVG container, so it still blurs when scaled and you still can't recolour a single path. Recraft V4.1 Vector is one of the few returning real editable paths with clean layers, at $0.08 per image on Recraft's own API pricing as of 2026, against $0.035 for its raster output.

The failure mode with icon sets isn't the individual icon. It's that eight icons made in eight sessions look like eight different apps, because stroke weight and corner radius drift. We covered the grid and stroke specs that keep a set coherent, and why an AI logo has to come out as editable SVG rather than PNG.

For the section illustration, resist scale creep. It's a breather between blocks of copy, not a second hero.

Open one exported SVG in a text editor before you trust the batch. If you see a <path> with real coordinates, you have a vector. If you see a base64 blob, you have a PNG wearing a costume.

Export it wrong and the page gets slow

Format is a design decision, not an afterthought. Icons and logos ship as SVG. Photographic or painterly heroes ship as WebP or AVIF, which the HTTP Archive's Web Almanac puts at roughly 40% lighter than JPEG at matched quality.

Almost nobody does it. The Web Almanac's 2025 crawl found JPEG still accounted for about 57% of largest-contentful-paint images, PNG about 26%, WebP around 11% and AVIF under 1%. A modern format is close to free performance that most sites leave on the floor.

Three rules that matter more than the rest:

• Never lazy-load the hero. It's usually the LCP element, and deferring it delays the exact pixel Google measures.
• Size the export to the slot, not the model's maximum. A 4K hero in an 800px column is wasted bytes.
• Write real alt text. Say what the image shows and why it's there. "Hero image" helps nobody.

If a hero came out smaller than the slot needs, upscale rather than regenerate, or you'll lose the composition you liked. Every upscaler invents pixels it never saw, and there are ways to make it guess less.

Want to try the set yourself? JammyJar puts Gemini, GPT Image and Recraft behind one prompt box with one bill, and exports as PNG, JPG, WebP, AVIF or SVG. Open the jar, free tier included.

The legal bit, before you ship

Two things changed the ground under AI visuals, and both are settled enough to act on.

In the US, purely AI-generated images aren't copyrightable. The Copyright Office's Part 2 report of 29 January 2025 concluded that prompts work as instructions conveying unprotectable ideas, and the DC Circuit affirmed the human-authorship requirement in Thaler v. Perlmutter on 18 March 2025, with the Supreme Court declining review on 2 March 2026. You can use the output commercially. You probably can't stop a competitor copying it. Work with real human creative control, including how you select and arrange generated elements in the finished page, is a different case and can be protected. We wrote up what you can and can't legally do with AI images, tool by tool.

In the EU, the AI Act's Article 50 transparency obligations apply from 2 August 2026, with machine-readable marking for systems already on the market deferred to 2 December 2026. Don't rely on embedded provenance to satisfy it. C2PA Content Credentials live in file metadata, and screenshots, re-encoding and ordinary web optimisation strip them. Google DeepMind's SynthID sits in the pixels and survives compression, resizing and cropping. If you need to disclose, disclose visibly.

Then there's the audience. Getty Images surveyed 30,000 adults across 25 countries between 2022 and 2024 and found nearly 90% want to know whether an image was made with AI. Getty sells human-made stock, so read the framing with that in mind. The direction is corroborated anyway: a 2025 study from the Nuremberg Institute for Market Decisions, led by Fabian Buder, found that labelling an ad as AI-generated made people rate it less natural and less useful, and lowered their willingness to research or buy.

Our reading: the penalty attaches hardest to photoreal AI images of real people, products and testimonials. Abstract illustration and icons sit in a much safer zone. Use AI where it's illustrating. Use a camera where it's evidencing.

What breaks, and where a human still wins

The theme stops most of the slop, and it isn't a full defence. A generator applying one style produces consistently generic work if the style is generic, and models have house tendencies that creep back in: symmetrical compositions, that faintly plastic sheen, a horizon line in the middle of the frame whether you asked or not. You catch those by looking at the five assets together rather than one at a time.

Here's what the cost gap buys, and what it doesn't.

Model prices change constantly, so treat that column as dated rather than fixed.

Where the illustrator still wins: anything that has to be genuinely new rather than plausibly familiar, anything you need to own outright, and anything depicting your actual product or customers. AI is very good at the visual grammar of the last ten years of design and structurally incapable of getting ahead of it.

One thing we can't tell you: we haven't A/B tested an AI-made hero against a commissioned one on the same page. Nobody credible has published that test either, which is why the conversion figures around this topic almost all come from companies selling conversion services. Build the set, then test it against what you had.

AI images for landing pages: quick answers

Can I use AI images for landing pages commercially?
Yes, in practice. Check the licence on your tool and plan, because free tiers often restrict commercial use. Ownership is the separate question: in the US, purely AI-generated images aren't copyrightable after the Copyright Office's January 2025 report and the Thaler ruling. You can publish the image. You can't stop others copying it.

Will visitors trust a landing page with AI visuals?
It depends what the image is doing. Getty's survey of 30,000 adults across 25 countries found nearly 90% want AI images disclosed, and a 2025 Nuremberg Institute study found AI labels lowered purchase intent. That penalty concentrates on photoreal images of people and products. Abstract illustration and icons draw far less of it.

Which AI model should I use for a hero image with text on it?
Gemini 3 Pro Image, released in November 2025. Text rendering was AI's most obvious failure for years, and this is the model that mostly fixed it, alongside 2K and 4K output. For hero drafts without text, use something faster and cheaper and iterate more.

Should landing page icons be SVG or PNG?
SVG, every time. Vectors stay sharp at any size and weigh almost nothing, which is what icons need. Confirm you have a real one: open the file in a text editor and look for path coordinates. A base64 blob inside an SVG wrapper is a PNG in disguise and blurs when scaled.

Do I have to disclose AI-generated images in the EU?
The AI Act's Article 50 transparency obligations apply from 2 August 2026, with machine-readable marking for pre-existing systems deferred to 2 December 2026. Don't rely on embedded metadata to satisfy it: C2PA credentials are stripped by re-encoding and ordinary image optimisation. Label visibly instead.

Start with the window, not the wallpaper

That four-figure illustration invoice bought one thing worth having: someone thinking hard about what the page needed to say before anything got drawn. The dollar version only works if you do that thinking yourself.

So write the six-word brief. Build the theme. Generate five assets that inherit it, ship the icons as SVG and the hero as WebP, and put a visible label on anything a visitor might mistake for a photograph. A page of coherent, relevant, cheap-to-replace visuals beats a page with one beautiful hero and four strangers underneath it.

Pick the section of your page currently carrying a stock photo. Replace that one first.