文/林芳老师上一篇06我们给网站穿上了公司制服配色、字体、logo、favicon 全部统一客户打开就知道这是谁家。但制服穿好新问题来了网站里还是空的——产品中心没有一张产品图关于我们没有车间照片客户想下载份产品目录连个 PDF 链接都没有。骨架和制服解决了像不像个公司这一篇解决公司里有没有货。物料进场官网才开始有血有肉。本篇回答三个问题图片和资料放进网站的哪个位置图片多了网站会不会变慢、怎么控制每张图片背后那段给搜索引擎看的 alt 文字为什么一个字都不能省一、public 文件夹网站的仓库放进去就有网址上一篇认识过两个要打交道的文件夹app 放页面public 放物料。这一篇我们正式用 public。它的规则简单到一句话放进 public 的文件会自动变成一个可以访问的网址。比如你把一张图片存成 public/images/products/pot-01.jpg那么任何人访问你的网址/images/products/pot-01.jpg就能看到这张图把目录存成 public/files/catalog-2026.pdf客户就能从这个网址下载 PDF。Codex 在页面里插图、加下载链接用的都是这些地址。三条仓库纪律先记住文件名只用英文小写、数字和连字符比如 tri-ply-stock-pot-24cm.jpg。中文名、空格、IMG_1234 副本.jpg这类名字迟早出问题按类型分子文件夹放images/products 放产品图、images/factory 放车间和团队照、files 放 PDF别一股脑堆在根目录只放网站要用的东西原图、设计稿、源文件不要往里塞——仓库里堆杂物网站会变重。二、备料清单外贸官网最少要准备哪些物料很多老板一听准备物料就头大其实外贸官网的物料清单很短。林芳老师建议按客户最想看到什么来备一次备齐后面随产品更新增补物料类型建议数量干什么用规格要求产品图每款主力产品 2-3 张产品中心页、首页展示白底或实景图长边 1600px 以内车间/设备照3-5 张关于我们页证明工厂实力横构图光线明亮、场地整洁团队/展会照2-3 张关于我们页增加信任感有真人、有场景避免摆拍感认证证书按需关于我们或产品页配图拍正拍清晰关键章印可辨产品目录 PDF1 份供客户下载、内部转发10MB 以内首页有公司名和联系方式实操 A把手上的物料按这个清单清点一遍缺的安排车间补拍。选图标准只有一条这张图能不能让客户相信这家工厂靠谱。模糊的、带水印的、图上印着中文说明的、从别人网站存下来的图一律不用——图片就是你寄给客户的样品样品什么样客户以为你的货就什么样。三、图片不是越大越好三秒生死线与压缩标准新手最容易犯的错是把相机原图直接往网站里传。一张原图动辄 5MB、8MB十张产品图排一页网页总大小就奔着几十 MB 去了。行业里反复验证的经验是手机上网页超过 3 秒打不开一半以上的访客会直接关掉。海外客户在展会现场、在酒店里用手机刷你的网站网络往往还不如国内。图片大几兆你失去的不是流量是那个已经点开网页的真客户。控制标准照这张表执行让 Codex 批量处理即可图片用途长边尺寸单张文件大小格式产品主图1200-1600px250KB 以内JPG车间/横幅大图1600-1920px400KB 以内JPGlogo、图标不限越小越好SVG 或透明 PNG目录 PDF 内页图1500px 左右PDF 总体 10MB 以内PDF两个技术常识知道即可照片用 JPG 格式文件小、颜色够用需要透明背景的用 PNG比如 logo网上有免费的在线压缩工具拖进去就能压也可以直接让 Codex 在项目里批量压缩压完原图另存备份不要覆盖。验收有个土办法特别灵别连 WiFi用手机流量打开你的网页3 秒内图片全部刷出来才算过关。四、alt 文字给搜索引擎和 AI 看的图片说明书每张图片插入网页时都可以配一段 alt 文字alternate text替代文字。它平时在页面上看不见但有三类对象在读它搜索引擎和 AI 读不懂图片内容它们靠 alt 判断这张图画的是什么。图片搜索能不能收录你、AI 回答采购商提问时会不会引用你的产品这段文字是重要原料视障用户用读屏软件浏览网页软件会把 alt 念出来——海外大客户的合规部门对网站无障碍越来越较真客户网络差、图片加载失败时alt 文字会显示在破图位置至少让客户知道这是什么产品。写法三句话客观描述画面 产品关键词 规格或用途一句话说完。注意网站面向海外客户alt 要用英文写。比如一张汤锅图差的 alt 是产品或者一串文件名好的 alt 是24cm tri-ply stainless steel stock pot, induction compatible。两个禁忌别留空纯装饰性图标除外也别堆砌关键词——stainless steel pot stainless steel cookware factory export这种写法会被搜索引擎判定作弊。英文拿不准就让 Codex 起草你负责校对型号和材质有没有写错。实操 B挑 5 张主力产品图各写一句英文 alt15 个词以内存成清单下一步让 Codex 配到图上。五、目录 PDF 与 Codex 上架指令产品目录 PDF 是外贸官网的标配采购商要内部汇报、转发给老板、存档比价最终都要一份 PDF。放法很简单文件存进 public/files英文名如 catalog-2026.pdf让 Codex 在产品中心页顶部加一个Download Product Catalog按钮新窗口打开这个地址。PDF 本身控制在 10MB 以内里面的图片先压缩再排版首页和每页页脚都要有公司英文名、网址和联系邮箱——PDF 会被转发到你看不见的地方每一页都得能找回到你。物料备齐在 Codex 对话里发这段指令括号内容换成你的真实信息请帮我完成物料上架1. 在 public 下确认 images/products、images/factory、files 三个目录2. 把我放进 images/products 的产品图批量压缩到长边 1600px 以内、单张 250KB 以内压缩前原图另存备份3. 在产品中心页面用产品卡片展示这些图片每张图配我提供的英文 alt 文字清单如下……4. 产品中心页顶部加 Download Product Catalog 按钮链接 /files/catalog-2026.pdf新窗口打开5. 本地预览确认图片清晰、alt 正确、手机端卡片排列整齐点击按钮能正常下载 PDF。实操 C本地预览逐项验收图片清晰不变形、手机端排列整齐、下载按钮能打开 PDF。然后 add、commit说明写产品图片与目录PDF上架、pushVercel 自动部署后用手机流量打开线上网站——3 秒内刷出图片这一篇就算过了。六、本篇三个方法论提示第一物料质量就是客户眼里的产品质量。客户摸不到你的货图片和目录就是他判断工厂的全部依据。拍图、选图、压图这些活不高级但省掉的每一步客户都看得见。第二速度是功能不是锦上添花。网站慢 3 秒访客走人你文案写得再好都没有被读到的机会。这和开发信一个道理客户给你的注意力窗口就那么大开场磨叽后面没有后面。第三给机器看的文字和给人看的文字一样重要。alt、英文文件名、PDF 里的公司信息都是搜索引擎和 AI 判断这家公司做什么的原料。GEO 时代AI 读得懂你的网站才有可能把你推荐给采购商——物料进场时一次做规范后面收录阶段省掉全部返工。课后作业按备料清单凑齐物料每款主力产品 2-3 张图、车间照 3-5 张、产品目录 PDF 1 份英文命名后放进 public 对应目录。全部图片压缩达标产品图单张 250KB 以内PDF 控制在 10MB 以内、每页带公司名和邮箱。为每张产品图写一句英文 altCodex 配图后逐条核对型号、材质无误。产品中心页加目录下载按钮push 上线后用手机流量打开验收3 秒内图片刷完、PDF 能下载截图存进作业文件夹。卡住的地方老规矩报错原文发给 Codex20 分钟解决不了先换网络再试。下一篇08我们解决门牌号问题到现在你的网址还是 Vercel 送的那一长串临时地址名片和开发信里根本印不出去。怎么买一个属于自己的域名、把它接到网站上、HTTPS 小绿锁怎么自动生效、域名邮箱怎么一起配好——网站从此有了自己的正式门牌。关注本系列外贸 AI 建站 18 篇一篇一篇带你走完从定位到上线的全过程。本系列基于外贸圈集团《AI建站手册》GitHub Next.js Codex 篇面向零基础外贸人不讲代码原理只带你把能获客的网站亲手做出来。关于作者林芳外贸圈集团创始人、10倍业绩增长模型创始人法国国际商法硕士15年外贸一线实战与辅导经验累计辅导5000外贸企业、深度服务300工厂著有《外贸销售SOP》中国铁道出版社。外贸圈集团专注为年出口额1.5亿元以下的B2B外贸企业提供销售体系建设与GEO优化服务覆盖培训、SOP搭建与陪跑全链路。