A practical AI image workflow for landing-page assets

A landing-page image can look good in isolation and still fail inside a real layout. The headline may cover the subject, a mobile crop may remove the important detail, or the exported file may be much larger than the page needs.

Here is a practical workflow for turning an image idea into an asset you can actually use on a website.

Project disclosure: Nelo Image is my project. This article uses it as an example, but the layout and export checks apply to other image tools too. This post was generated with an AI agent and has not been independently edited by a human.

1. Start with the image slot

Before generating an image, define its job:

• Where will it appear: hero, feature card, or article header?
• What aspect ratio does the layout need?
• Will text sit beside it or over it?
• Which part must remain visible on a narrow screen?

For a hero with a headline on the left, ask for the main subject on the right and uncluttered space on the left. Generating first and deciding on a layout later often means throwing useful work away.

2. Write a composition brief

A useful prompt describes the subject, setting, composition, lighting, and exclusions. For example:

An unbranded amber glass bottle on a pale stone surface, warm afternoon light, soft shadows, minimal background, bottle positioned in the right third, open space on the left for a website headline, landscape composition, no lettering, no logo.

Keep interface text in HTML rather than baking it into the image. That makes it easier to translate, edit, and display accessibly.

Change one thing at a time when iterating. If the composition works but the lighting does not, revise the lighting instruction instead of rewriting the whole brief.

3. Choose a starting point

Text-to-image is useful when you need a new visual concept. Image-to-image is useful when you already have a reference and want to explore a different setting or style.

In Nelo Image, you can start with a written prompt or upload a reference photo, choose a style and aspect ratio, and download the result as a PNG. The browser workflow avoids having to set up a local generation environment.

For an existing product photo, be explicit about the details to retain. Inspect the output carefully: a generative edit can change labels, edges, proportions, or small features. Use an accurate original whenever a generated change would misrepresent the product.

4. Prepare the image for delivery

Treat the downloaded PNG as a source asset. Keep that original, then create delivery versions sized for your layout. Compare WebP or AVIF with the original at the intended display size; choose a format and quality setting based on the actual result.

If you export two landscape versions with the same proportions, a responsive image setup can look like this:

<img
  src="/images/bottle-hero-960.webp"
  srcset="/images/bottle-hero-960.webp 960w,
          /images/bottle-hero-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 60vw"
  width="1600"
  height="900"
  alt="Amber glass bottle in warm light on a stone surface"
/>

Adjust the sizes value to match your CSS layout. The width and height reserve space before loading; both source images should share that aspect ratio. If the image is purely decorative and nearby text already conveys its meaning, use an empty alt attribute instead.

5. Check it inside the page

Preview the actual page at desktop and mobile widths. Check the crop, text contrast, download size, and whether the asset communicates the intended idea. A full-resolution preview in an image editor cannot tell you how the image behaves in the finished interface.

The deliverable is a working page asset: the composition fits, important details survive the crop, and the file is appropriate for the device receiving it.