FIELD NOTE / 09
把 AI 配图真正放到博客里
文件命名、图注、替代文本、响应式布局与可下载的发布检查表。
命名和存档，让下一次修改有据可查
例如用 ceramic-concept-600.webp，而不是 final-final2.png。原图放在单独的 master 目录，网页实际使用的版本放在 exports，并记录来源、可使用的依据、已有的生成信息与日期。不要假定所有 AI 输出都适合所有商业用途。若使用第三方输入素材，发布前核对对应授权与服务条款；这份技术流程并不是法律判断。
图注与替代文本各自解决什么问题
如果文章讨论杯身形状，可写替代文本“绿色圆柱台座上的象牙色凹槽杯形容器”，描述可见内容，不凭空补上把手、品牌或材质认证。图注则补充“AI 生成的陶瓷概念图，并非在售商品实拍”。如果图片纯属装饰，而且相邻文字已完整表达含义，可以采用空 alt。不要往替代文本塞关键词清单，也不必每次都以“这是一张图片”开头。
让图片随屏幕变化，避免页面跳动
600 × 600 下载版的 img 属性写 width="600"、height="600"，CSS 使用 max-width:100%; height:auto。声明的尺寸应与文件一致，不要把 600 像素图片标为 1200。如果以后准备了相同构图的多个分辨率，可以使用 srcset 让浏览器选择；不同构图的竖图则需要明确的版式设计。先把一张图正确放进去，再考虑尚未验收的多版本素材。
发布后还要在实际页面验收
在窄窗口和宽窗口打开已发布网址，检查图片能否加载、主体有没有被遮挡、图注是否可读、下载链接是否对应正确文件。图片损坏时核对实际资源路径和响应。对有内容意义的文章配图，采用普通 HTML img 元素。页面可抓取、站点地图可访问，不等于已被搜索收录或获得 AdSense 批准。下载工作表逐项填写，未知事项保留待确认，不要为了凑齐勾选而全部写通过。
你的发布检查清单
勾选只在当前页面临时保留。要记录判断依据，请下载空白工作表。
下载发布工作表（.txt） ↓动手完成这个流程
使用已保存的 1024 × 1024 AI 样图，无需生图额度，也无需上传文件。
打开图片工具 ↗从想法，到真正发布一张博客配图
为博客作者和小型网站运营者整理的实作路线：使用已保存样图，查看具体结果，再把方法用到自己的文章。