How to create AI images for a website: from first draft to working banner

A picture can look lovely on its own and still get in the way on a website. The mug lands behind the headline; the background fights the text; a narrow screen cuts off the handle. Start your prompt with the image’s job on the page.

To create a website image with AI, specify its purpose, subject, composition, lighting and constraints. Test the result with actual text at desktop and mobile widths, then prepare the file size and alternative text. This guide follows that process through one example.

What we made for this guide

We created four images of fictional ceramics using the built-in image generation tool: an initial image, two successive edits and a new bowl using a style reference. This is a Neaptide editorial exercise dated September 6, 2026, not a client project or a model comparison. The tool did not expose a model identifier or seed. The exact submitted prompts are reproduced below; identical results are not guaranteed.

• Download the prompts and generation sequence (JSON)

Give the image a place in the layout

For our pottery studio, the heading and button will sit on the left and the mug on the right. A blog thumbnail needs a subject that remains recognisable at a small size. A product listing needs an accurate view of the actual item. These are different briefs, even when all three call for pottery.

The first prompt: attractive, but too central

Create a wide landscape photograph of a handmade ceramic mug for a pottery studio website. Warm daylight, natural linen, tasteful editorial product photography. No text, logos or watermark. Save the generated image.

We specified the mood and materials but left the composition open. The generator added a plant and flowers. The image works on its own, but the banner at the top of our page needs less detail on the left and a smaller mug so there is room for text.

Edit the composition to make room for the heading

Use the first image as the edit target. Explain what should move and what should stay: mug to the right, less decoration, the same general materials and light.

Edit the supplied generated mug image for a pottery website hero. Make a wide 3:2 landscape composition. Keep one recognizably matching cream speckled ceramic mug with the same brown unglazed foot and curved handle, the linen, warm daylight and natural photographic style. Reframe so the complete mug including handle sits in the right third and occupies at most 40% of the image width. Leave the left half a quiet light warm off-white surface with very little texture for a dark HTML heading to be added later. Remove the plant and dried flowers. No lettering, logos, border or watermark. The mug is a fictional design for an educational example.

The handle and proportions also changed slightly. That is acceptable for our fictional prop; a real product would need checking against its source photograph. Asking to preserve an object does not ensure exact fidelity.

Add the heading and button in HTML so they can be selected, translated and changed independently. Then test the image in the layout, rather than judging the file alone.

• Try the layout: switch between the first image and edited banner

Mobile needs a composition check

A centre crop of a wide banner can lose the mug or its handle. First try showing the whole image with the text above it. If your layout calls for a portrait image, prepare a separate composition.

Edit this generated pottery hero into a portrait 2:3 mobile website image. Use the input image as the edit target. Keep a recognizably matching single cream speckled ceramic mug, brown unglazed foot, right handle, warm daylight, pale wall, wooden table and linen. Place the complete mug and handle in the lower half, comfortably inside both side edges. Keep the upper 40 percent quiet pale wall for dark HTML text to be added by the website. No plant, flowers, text, logos or watermark. Preserve the restrained photographic style. This is a fictional product for an educational website example.

For different compositions on different screen widths, use the HTML picture element with source elements that specify when each image should appear. Use srcset and sizes to offer different resolutions of the same composition. In the demo, you can compare a centred crop of the wide image with the separate portrait version.

• Responsive image selection explained by web.dev

Build a recognisable series

For a second article, we need a bowl. Supply the mug image as a style reference, not an object to preserve. Repeat the linen, wood, warm light and restrained palette; change the subject.

Create a new square editorial image for an educational pottery studio blog, using the supplied image ONLY as a style reference, not an edit target. Show a single shallow handmade ceramic bowl, cream speckled glaze with a brown unglazed foot, fully visible on natural linen over a wooden table, pale warm wall, soft window daylight, restrained warm neutral palette and quiet photographic texture matching the reference. Bowl in lower right area, simple upper left background, no other pottery, no plants, flowers, people, text, logos or watermark. The bowl is a fictional design, not a real product photograph.

Keep your chosen reference alongside a short style brief. Compare the images together: repeating a colour name alone does not guarantee matching tones.

Fix specific problems

• Subject behind the heading: name the area that must remain clear.
• Busy background: identify the objects to remove.
• Product details changed: return to the source photo, restrict the edit and inspect again.
• Inconsistent series: reuse one style reference and lighting brief.
• Edits keep drifting: return to the last useful version.

Prepare the image for publication

Our WebP files are approximately 189, 89, 71 and 80 KiB. These are observed sizes at our chosen quality, not universal targets. Inspect edges and texture after compression, and set image width and height to reserve layout space.

Use a short, descriptive alt attribute, such as ‘Mug on linen at the right, with space for a heading on the left’. A caption can explain the edit’s purpose. An image that is purely decorative can have empty alt text. Google recommends relevant surrounding text, meaningful filenames and useful alt text without keyword stuffing. Write the lesson in ordinary text as well, so it remains understandable without the image.

• Google’s image SEO guidance

Before you publish

1. Place the image beside the real heading and button.
2. Check wide and narrow screens.
3. Compare any real product with its source photo.
4. Inspect compression and loading.
5. Add alternative text and a caption; save the prompt and source image.

• Build with Codex