标题改好了，配色也满意，课程时间和价格都已填妥。可页面看起来仍像一张模板，因为里面的照片换到别家网站上，似乎也一样说得通。
给 HTML 模板换上自己的图片，往往是页面正式使用前的一轮修改。AI 生成的落地页、设计师交付的页面也一样：结构已经合适，照片却还需要跟上当前的产品、服务或新一季内容。直接在原页面里换图，就能同时看到图片和它要配合的文案。
本文以虚构陶艺工作坊 Claywell 的课程页为例，展开两种换图思路：首屏把黑白陶器静物换成工作台照片，呈现动手制作的场景；正文再把一组餐具换成单只陶碗示意图，让器型和釉色更清楚。
在已有 HTML 页面中替换图片
通过 HtmlDrag 的在线 HTML 文件编辑器，使用 Upload HTML（上传 HTML） 打开已有文件。本例的课程页包含原图片、字体和样式，载入后就能在完整页面中进行调整。
动手之前，先看看页面怎样安排图片。Claywell 首屏由陶器静物、黄色课程信息卡和手部制作近景组成。换掉左侧照片，就能改变开篇的侧重，同时把价格、标题和辅助图片放在眼前比较，更容易判断这次小改动是否合适。
根据访客想看的内容，选择替换素材
陶艺课程页和陶器商店可能使用相似的照片，访客关心的事情却不同。成品图片展示陶器可以是什么样子；带有泥土和工具的工作台，则让人想象自己参与其中的过程。对于初学者课程，首图的作用是让人更容易想象自己动手尝试。
往下读到材质介绍，访客已经愿意多看一点细节。在“没有完美的形状”这句标题旁边，单只陶碗比一组杯盘更容易呈现碗沿和釉面。两张图分别回答了读者在不同位置会产生的问题。
| 图片用途 | 适合从什么素材开始 | 重点保留什么 |
|---|---|---|
| 首屏场景图 | 活动内容明确、主体周围留有空间的场景照片。 | 一眼能看懂的活动内容，以及与标题、主按钮的配合。 |
| 产品或材质细节图 | 光线清楚、主体集中、重要边缘周围有留白的单件图片。 | 器型、表面质感，以及相邻文字提到的具体特征。 |
| 辅助图片 | 补充角度、纹理或局部近景。 | 主图之外的有效信息，避免重复同一个画面。 |
挑选文件时，可以一起考虑图片比例、主体四周的留白，以及实际显示时能看清多少细节。横图放进窄框，可能裁掉关键内容；主体周围有足够空间的竖图，也可能适合较宽的图片框。
无论自己挑图库，还是请人准备素材，都可以先写一段简短的选图要求：
为这张初学者陶艺课程页选择两张替换图片：首屏展示工作台场景，材质区域展示一只清楚的陶碗。手部和碗沿周围留出空间，兼顾桌面和手机的显示裁切。沿用已确认的页面布局与课程信息，素材应准确反映介绍的内容。
本例的两张原图，分别是首屏的陶器静物和正文的餐具组合，替换方向也由这两个位置的阅读需求决定。
替换首屏主图，在原布局中看效果
新的工作台照片把工具、泥土和陶艺制作的环境带进首屏，右侧的手部近景则补充触感和动作细节。两者放在一起，既能交代场景，也能让人靠近看一看制作过程。
在 HtmlDrag 中，对要更新的照片打开右键菜单，选择 Replace image（替换图片）。对于这种排得很紧的组合，先确认目标是那张单独的照片，再应用新素材。
替换窗口提供 Upload from device（从设备上传） 和 Use online image（使用在线图片）：前者使用电脑里的文件，后者使用已托管图片的 URL。本例采用准备好的本地工作台照片。
换好后，重点看它给首屏带来了什么。细节丰富的照片可以增加视觉吸引力，但课程价格和主要行动入口仍应容易找到。把图片放在周围内容中判断，比只看图库缩略图更有用。
在这个组合里，工作台的丰富纹理与简洁的黄色课程卡形成对比，主体在当前裁切下也容易辨认。给自己的页面换主图时，可以寻找类似的平衡：照片足以交代场景，读者也能顺着标题找到下一步行动。
更新细节图，让主体更容易看清
细节图适合让人集中观察一个特征。对陶器来说，可能是碗沿、釉色或表面纹理；换成其他产品，也可能是连接处、涂层或标签。先确定读者需要看清什么，再决定图片要拍得多近。
Claywell 的第二处替换使用了事先准备的 AI 生成陶碗示意图。浅色釉面和不规则的轮廓，与材质区域关于器型的介绍相呼应。
仍通过同一个图片替换工具完成更新。这里的源文件是竖图，桌面图片框却更宽。陶碗周围的背景留出了裁切空间，放进较宽的框体后，也没有切掉碗沿。
近景中能看清完整陶碗，也能同时阅读相邻说明。这是检查产品图和材质图时很实用的问题：文字提到的特征，访客能不能从图片里看到？如果重要边缘被切掉，可以先尝试主体周围留白更多的素材，或准备另一个裁切版本。
为什么换好的图片会被裁切或显得模糊
源图有自己的长宽比例，页面则给它分配了显示区域。两者形状不同时，页面可能通过裁切来填满空间。例如 CSS 的 object-fit: cover，会在保持图片比例的同时，裁去超出框体的边缘。
所以，图库中完整的照片，到了网页上可能只显示其中一部分。检查时看清主体边缘，选择能保留关键细节的构图；为了把所有内容塞进去而压扁或拉长图片，反而会改变它原本的形状。
桌面预览也适合检查正常阅读尺寸下的第一印象：访客能否一眼理解画面中的活动？图片与标题是否相互支持？下一步行动是否容易找到？
继续往下，材质图片则需要给碗的形状和表面细节留出足够空间。分别到图片所在的位置查看，才能发现整页缩略预览中容易漏掉的问题。
如果新图显得模糊，要检查的则是源文件质量。用小缩略图撑满宽幅区域，可能缺少足够细节。选择合适的原图，导出适合网页的文件，再按访客实际看到的尺寸比较。只把图片在页面上显示得更小，并不会同时缩小它需要下载的文件。
保存换图结果，再看看手机布局
两张图片与页面配合得当后，保存一个版本。需要交接到网站发布流程时，可以在导出窗口选择 Edited HTML（编辑后 HTML），再按需要下载或复制更新后的 HTML。
本例的两处换图已经保存在项目中，之后仍能继续编辑更新后的材质区域。下一次要改日期、更换产品或更新季节图片，就可以从这次保存的内容继续。
手机视图也要单独看一遍。图片区域可能变窄，部分辅助图片可能不再显示，课程信息的位置也可能改变。这时要看的是：主体在当前空间里是否仍容易辨认。Claywell 的手机尺寸视图中，新工作台图片与黄色课程卡形成了更窄的组合。
换图还可能让你发现文案里缺了一点说明。例如，插入一行短图注解释材质，或给产品图片添加通往详情页的超链接。访客需要比较课程选项时，也可以使用 HtmlDrag 的表格工具插入对比表，再编辑单元格、行和列，把图片与具体信息搭配起来。
调整相邻元素时，可以锁定已完成的部分，减少意外移动；过期的活动元素也可以直接删除。这些小改动能让新图片更贴合当前介绍的内容。
正式使用更新后的页面前，可以快速检查：
- 需要更新的图片已经替换，主要主体清楚可辨。
- 桌面和手机视图都便于查看访客需要的细节。
- 图片按网页需求导出，在实际显示尺寸下清晰可辨。
- 图注、图片描述和摄影署名与新素材一致。
- 带链接的图片指向合适的目标。
- 项目已保存，实际用于发布的 HTML 也包含本次更新。
图片描述也应跟着新主体调整。Google 的图片指南建议在页面语境中提供有帮助的 alt 文本。具体说明画面内容，比重复一串搜索关键词更有用。
替换 HTML 网页图片的常见问题
AI 生成的 HTML 页面，也能直接换图吗？
可以，前提是 HTML 文件能在编辑器中正常打开。确认样式和素材载入后，选中原图片并应用替换素材。已经准备好的图片可以直接使用，不需要再发起一次生成请求。
应该上传本地图片，还是使用在线图片地址？
电脑里已有确认好的文件时，可以直接上传。图片已托管在稳定、可访问的地址上时，可以使用在线 URL。这里需要图片本身的地址，而不是图库介绍页或登录页面。
竖图可以用在宽幅图片区域吗？
有时可以。本例的陶碗周围留有足够背景，因此能适应较宽的裁切。紧贴主体边缘的竖图可能会损失重要细节，需要放进实际图片框查看，并检查手机尺寸下的显示。
替换图片后，图注和点击链接也会一起更新吗？
图片、图注、署名和点击目标需要分别检查。换图后再看看周围文字和链接，可以避免新图片仍沿用旧描述或旧跳转地址。
替换网页图片，应该准备多大的文件？
分辨率应满足实际显示区域，文件大小也要适合网页使用。首屏大图通常比小卡片需要更多细节，可以结合显示效果和当前上传限制判断，不必让所有位置都使用同一种规格。
保存换图结果后，线上网站会自动更新吗？
保存会保留 HtmlDrag 项目中的编辑结果。独立托管的网站，需要将编辑后的 HTML 应用到该网站自己的发布流程中。
合适的图片能把介绍变得更具体：工作台让人联想到动手制作的体验，单件器物让细节更容易看清。如果你的 HTML 模板还留着占位照片或旧图片，可以通过可视化 HTML 编辑器打开文件，在原页面里完成这一轮更新。