AI-Generated Images on Websites: Commercial Use and Sizing

Generating an image is only the beginning of preparing it for a website. A striking composition can fail when cropped for mobile, compress into visible artefacts or imply that a fictional person is a real customer. Production work requires visual consistency, efficient delivery and a defensible record of how the asset may be used.

Start with the page's purpose rather than the image model's possibilities. Decide whether the image explains a concept, establishes atmosphere or shows something people must evaluate accurately. That decision determines how much creative invention is appropriate and what the review needs to protect.

Write an image brief around the layout

Define the communication job first. A decorative background can be abstract, while a product illustration must preserve relevant details. Do not generate a fictional product photograph if customers need to judge the actual item's finish, dimensions or included accessories.

Specify placement, aspect ratio, subject position and safe space for cropping. If a heading sits beside the subject, request a quiet region rather than expecting a convenient patch of background to appear. Avoid asking the model to render essential text inside the image; keep headings and calls to action as real interface content.

Set a style system for the series. Describe lighting, viewpoint, texture, palette and acceptable levels of realism. Record these constraints so subsequent assets do not drift into unrelated visual languages. A consistent treatment usually matters more than making every individual image unusually dramatic.

Use the AI image tools directory to compare workflows, including editing controls and export options. Evaluate whether a tool can preserve the approved art direction through revisions. A beautiful first output is not enough if a minor crop correction repeatedly changes the subject or brand details.

Generate variations and inspect the details

Produce a small set of deliberate alternatives, changing one important variable at a time. Compare a wider composition with a closer crop, or a simplified background with a more descriptive setting. Controlled variation makes selection easier than collecting dozens of unrelated pictures.

Inspect at both presentation size and full resolution. Look for malformed hands, impossible reflections, repeated objects, fake lettering and inconsistent edges. For technical illustrations, ask someone familiar with the subject to verify the depicted process. Plausibility is not the same as accuracy.

A practical prompt might read:

Create an editorial illustration about collaborative website planning.
Use geometric forms, soft side lighting and a restrained blue palette.
Place the main subject in the right half of a wide composition.
Keep the left half visually quiet for a separate HTML heading.
No logos, signatures, interface text or recognisable public figures.
The image must also support a centred portrait crop.

Treat the exclusions as review criteria, not guarantees. Check for unintended marks and misleading details yourself. When an image represents research participants, customer results or an actual event, synthetic substitution can mislead even when the file looks flawless. Prefer an honest illustration treatment or clearly explained context over documentary realism.

Plan responsive crops before exporting

Place the candidate in the real layout early. Test wide desktop, narrow mobile and any intermediate arrangement that changes the text position. A subject that survives a centred crop may still clash with a heading or disappear beneath a gradient overlay.

Use the image resizer calculator to calculate proportional output dimensions for the intended display sizes. Start from the required rendered dimensions and source aspect ratio. A dimension calculation does not resize the file itself or prove the source contains enough detail for a sharp export.

Choose between resolution switching and art direction. The first serves different pixel dimensions of essentially the same composition; the second uses a different crop or image when the layout needs it. The MDN responsive images guide explains how browser image selection supports both approaches.

Do not upscale a small output automatically to satisfy an arbitrary export target. Compare the result at realistic viewing sizes, including high-density screens where appropriate. If the crop loses essential content, regenerate or edit the composition rather than shipping a technically large but poorly framed asset.

Deliver images without slowing the page

Export a small range of dimensions that matches actual layout needs. Compare modern formats using visible quality and transfer size, keeping appropriate fallbacks for your supported browsers. The smallest file is not necessarily the best choice if compression destroys fine gradients or introduces distracting texture.

Follow the web.dev image optimisation guidance when planning formats and delivery. Supply intrinsic width and height, or otherwise reserve the correct aspect ratio, to prevent layout movement. Ensure responsive source hints reflect the image's real layout size rather than a copied example from another page.

Treat loading priority deliberately. An important image visible immediately may need early discovery, while offscreen images are better candidates for lazy loading. Do not apply lazy loading indiscriminately to the main visual and then wonder why the page appears incomplete on a slow connection.

Write alternative text according to the image's purpose. Decorative images generally need an empty alternative, while informative images need a concise description of the relevant information. The W3C images tutorial provides examples. Mentioning that an image was generated is not a substitute for explaining what meaningful information it conveys.

Record rights, provenance and approvals

Review the provider's current terms for the account and generation date. Check permitted commercial uses, restrictions, rights in uploaded references and any obligations attached to output. Commercial permission from a provider does not automatically settle copyright protection, trademark conflicts or rights relating to a depicted person.

Keep a provenance record containing the provider, creation date, relevant terms, source references, prompt and substantial edits. Remove confidential prompt content from public metadata, but retain an appropriate internal audit trail. Obtain specialist advice for high-risk campaigns, regulated claims or recognisable people rather than treating a general checklist as legal clearance.

The US Copyright Office AI initiative is a useful reference for the distinction between generated material and human authorship in that jurisdiction. Rules differ internationally. Avoid promising exclusive ownership of an entirely generated image without reviewing the applicable law and contractual position.

Finish with a named approval covering visual quality, page performance and usage rights. The AI palette contrast guide can help when imagery sits behind text, although variable backgrounds require contextual checks. Archive the approved source and exports so a future redesign does not restart the rights investigation from scratch.

Key takeaways

• Brief images around their communication purpose and actual page layout.
• Check generated details and avoid misleading documentary-style substitutions.
• Test responsive crops before choosing export dimensions.
• Optimise delivery, reserve layout space and write purpose-based alternatives.
• Keep provider terms, source references and approval records with every asset.