Working with images in AI website builds

An image belongs on a website when it helps the visitor understand the offer, recognise the business, inspect the work, or use the page. Start with that job. A founder portrait can make the person behind a service identifiable. A product screenshot can explain how a workflow works. A photograph of completed work can supply evidence that a generic stock image cannot. An abstract illustration may set a tone, but it should not replace missing proof. Tell the agent what the image must communicate before asking it to find, generate, or place one.

Use real supplied assets for people, products, premises, projects, certificates, and other facts tied to the business. Keep the original file and record who supplied it. Ask whether the business has permission to publish it, whether credit is required, and whether it can be edited. An AI agent can clean a crop or prepare variants, but it should not quietly replace a real team member, alter completed work, or invent a customer. If the source and permission are unclear, hold the image out of the build until the owner confirms them.

Harbor Ledger is a fictional bookkeeping service for independent contractors. Its home page needs one photograph that shows where the work happens, not a decorative office. A usable brief names the job, the subject, the crop, the text rule, and the exclusions. Job: show that monthly bookkeeping starts from the contractor's own invoices. Subject: a kitchen table, a laptop, and paper invoices, in morning window light. Crop: 3:2, with the laptop screen as the focal point and room to crop to 4:5 on a phone without losing the screen. Text: no readable client names, amounts, or logos. Exclusions: no handshake, no invented brand mark, no chart that states a result. This brief was written as an example. It was not sent to an image model in this guide.

Generated images can help when the page needs an original illustration, a non-factual scene, or a visual device that would be costly to photograph. Write an image brief with the subject, setting, composition, crop, colour relationship, and exclusions. State that logos, readable interface text, real people, customer results, and regulated claims must not be invented. Keep the prompt, output, tool, date, and any edits with the asset record. Rules about ownership and commercial use differ by tool and jurisdiction, so check the provider's current terms and the rights that apply to your use.

Choose the photo and the space it sits in at the same time. A wide opening needs spare room for text, and the subject still has to make sense after a phone crop. A square portrait needs enough room around the face and should not be stretched into a banner. A product screenshot must stay readable at the size used on the page. Tell the agent the shape, such as 3:2 or 4:5, and what must stay in frame. Check every crop on the rendered page. An automatic crop can cut off the person, the control, or the detail that made the photo worth using.

• Keep one good original, and make the smaller sizes from that file.
• Keep the important part of the photo in frame when it is cropped for a phone.
• Avoid putting important words inside an image when HTML text can do the job.
• Check the smallest rendered size as well as the source file.

Keep a short record beside every image. Write its job: what it helps the reader understand. Record its source and rights, including the creator, source URL, permission, license, and required credit. Name the focal point that must remain visible. State whether the image should crop, reposition, be replaced, or disappear on a narrow screen. Add the useful text alternative and say what appears if the file does not load. For generated work, also keep the tool, prompt, date, and edit history. A downloadable image is not automatically free to reuse; the source page and license terms determine what the business may publish.

Alt text should convey the information or function the image supplies in that location. Describe an informative image briefly. Describe the action or destination when the image is a control or link. Use an empty alt attribute for an image that is only decoration. A product screenshot may need a short alt description plus a nearby explanation of the important interface detail. Do not fill alt text with search keywords or repeat a caption word for word when it adds nothing. The same image can need different alt text when its purpose changes on another page.

Export an appropriate format and enough resolution for the rendered size. Supply responsive variants when a large source would waste data on a phone. Keep a normal image source as a fallback when using responsive markup. Use descriptive filenames and place images near the text they support. Confirm that the production page can load each file without authentication. Then test the page on a slow connection, check layout movement while images load, and make sure a missing image does not hide the page's main message or action.

Open the finished page at desktop and phone widths. Check whether each image still does its stated job, whether faces and products are cropped correctly, and whether the visual style changes without reason between sections. Read the page with images unavailable and confirm that the content and actions still make sense. Check credits and links against the asset record. Remove images that repeat the text, slow the page without adding information, or imply evidence the business does not have.