如何用 AI 制作网站配图：从第一张图到可用的横幅

图片单独看很漂亮，放进网页却未必合适：杯子正好挡住标题，背景让文字难以辨认，手机上的裁切又切掉了杯把。因此，写提示词之前，先决定图片在页面中要承担什么任务。

用 AI 制作网站配图，需要说明用途、主体、构图、光线和限制条件。生成后，把真实标题放进去，在宽屏和窄屏上检查，再处理文件大小与替代文本。下面用一个完整例子演示。

这次示例是怎样制作的

我们使用内置图像生成工具，制作了四张虚构陶器图片：一次初始生成、两次连续编辑，以及一次使用风格参考的新生成。这是 Neaptide 于 2026 年 9 月 6 日进行的编辑示例，不是客户案例，也不是模型评测。工具没有返回模型标识或随机种子。下方英文提示词是实际提交的原文，但不保证生成完全相同的图片。

• 下载完整提示词和生成顺序（JSON）

先确定图片的位置

在这个陶艺工作室示例里，标题和按钮放在左边，杯子放在右边。文章封面需要在缩略图里仍能看懂；商品图则需要准确呈现实际出售的物品。用途不同，提示词也应不同。

第一张图：好看，但标题没地方放

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.

我们指定了材质和氛围，却没有说明物体的位置。模型自行加入了植物和干花。这张图可以独立使用，但作为首屏横幅，左侧需要更干净，杯子也要小一些。

编辑构图，给标题留白

把第一张图作为待编辑图片，说明哪些地方要改、哪些要保留：杯子缩小并移到右侧，去掉装饰，保留整体材质和暖光。

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.

杯把形状和杯身比例也发生了轻微变化。对于教学用的虚构物品，这可以接受；如果是真实商品，就必须与原始照片核对。要求保留物品，并不代表模型一定能做到完全一致。

标题和按钮用 HTML 添加，方便选择、翻译和修改。判断图片是否合适时，要看它与这些真实页面元素放在一起的效果。

• 打开演示，对比初始图片和编辑后的横幅

移动端需要重新检查构图

横图居中裁切后，杯子或杯把可能被切掉。可以先尝试保留完整图片，把文字放在图片上方。如果设计需要竖图，再准备单独的构图。

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.

如果不同宽度的屏幕需要使用不同构图，可以用HTML的picture元素，并通过source指定每张图的适用条件。如果构图不变，只需提供不同分辨率，则使用srcset和sizes。演示页面中，可以直接比较横图居中裁切与单独竖版构图的效果。

• web.dev：浏览器如何选择响应式图片

让系列配图保持同一种风格

下一篇文章需要一只陶碗。我们将前一张图片作为风格参考，而不是要求保留杯子。重复亚麻布、木桌、暖光和克制的配色，只更换主体。

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.

保存参考图和简短的风格说明。生成几张之后，把它们放在一起看：提示词里都写着“米色”，并不能保证色调完全一致。

针对具体问题修改

• 主体挡住标题：明确指出哪一块区域必须留空。
• 背景太杂：列出需要去掉的物品。
• 商品发生变化：回到原始照片，缩小编辑范围，再次核对。
• 风格不一致：使用同一张参考图和相同的光线要求。
• 越改越偏：回到最后一个可用版本。

发布前处理文件和替代文本

我们的四个 WebP 文件约为 189、89、71 和 80 KiB。这是本次图片在所选压缩质量下的结果，不是所有网站都应遵守的大小标准。压缩后检查边缘与质感；设置图片宽高，让页面提前留出空间。

alt是图片的替代文本，应简短描述画面内容；图注则可以解释这次修改的目的。纯装饰图片可以使用空alt。Google建议文件名有实际含义、图片与周围文字相关，并避免在alt中堆砌关键词。还要在正文中说明图片展示了什么变化，让看不到图片的读者也能理解。

• Google 图片 SEO 指南

发布前检查

1. 将图片与真实标题和按钮放在同一页面中。
2. 检查宽屏和窄屏。
3. 真实商品必须与原始照片核对。
4. 检查压缩效果和加载情况。
5. 补充 alt 和图注，保存提示词与输入图片。

• 用 Codex 开始网站开发