Technote

Working with AI Practical

Before you put an AI-generated image on the web

Generating the image takes seconds. What comes after does not: matching tone across a set, getting the file weight under control, and deciding what you will claim the picture is.

Image generators have genuinely changed the order of design work. Where you once spent half an hour trawling a stock library and still found nothing, you can now put several directions side by side in a few minutes. For drafting and exploration these tools are excellent.

Publishing the output as-is, though, brings three problems along with it: tone that does not match across a set, files that are far too heavy, and the question of what you are claiming the picture to be. Let us take them in order.

Where it holds up, and where it falls apart

It is quicker to decide the placement first. Generated imagery holds up best in abstract, decorative positions: background textures, shapes over a gradient, illustrations that gesture at an idea. It falls apart wherever the picture is asserting a fact.

The same tool, with results that depend on what the picture is claiming

Consistency across a set is the one that catches people out most often. A single image comes out beautifully; six in the same style, laid out in a card grid, drift apart in lighting, saturation and eye level until they no longer read as one family. The answer is not a longer prompt but planning for post-processing — treat the output as raw material rather than a finished asset, and bring the set together with colour correction and cropping.

File weight — where performance is decided

Generators usually hand you a large square PNG. Upload that untouched and a card thumbnail displayed at four hundred pixels wide is served a file several thousand pixels across. Your visitors pay for resolution nobody can see.

Handle three things before uploading: resize to no more than twice the displayed size, convert to WebP or AVIF, and provide a srcset where several widths are genuinely needed. WordPress generates intermediate sizes on upload and writes the responsive markup for you, so the job here is simply to feed it a sensible original.

One more thing: if a generated image is going into the hero at the top of the page, it needs separate treatment. The largest element on the first screen effectively sets how fast the page feels.

Clear it before you publish

Last comes rights and attribution. Commercial terms differ between tools, and sometimes between plans within the same tool. If an image made on a free tier is going onto a page that sells something, read the terms yourself at least once.

Six lines before publishing — the last one moves trust the most

That last line deserves emphasis. Put a generated portrait next to a testimonial, or a generated office beside your company story, and the moment anyone notices, every other sentence on the page comes under suspicion too. Using an image as ornament and passing it off as evidence are entirely different acts. Hold that line and generated imagery is a genuinely useful part of web work.

Other ways of putting AI to work in design are collected in the AI archive, and image optimisation and responsive handling go deeper in the images and media series. If you would rather start by finding out how heavy your site’s images actually are, that diagnostic is part of our optimization program.

More on this topic

All technotes

Working with AI Practical

Getting a useful design critique out of an AI

Ask "what do you think of this design" and you get compliments. Useful answers appear once you fill in four boxes: context, audience, criteria and format.

Designers 7 min read

₩270,000 · Join the program