头图是网站的门面，也是最容易被做砸的地方
用户点进一个页面，最先看到的就是顶部那块图。头图做好了，整站质感立刻上一个台阶；做砸了，内容写得再好也透着一股廉价感。奇怪的是，很多人愿意花几千块买主题，却不愿意在头图上多花半小时琢磨。这篇把 Banner 和头图制作的几个实操要点捋一遍，都是照着做就能见效的。
尺寸：先定宽度，再定高度
先说一个常见误区：头图不是越大越好。宽度上，主流做法是按 1920 像素准备原图，再导出一张 768 像素的给手机端，用 srcset 让浏览器自己挑。高度要看用途——全屏头图可以给到视口高度的百分之八十以上，普通栏目的头图控制在四百到六百像素就够了，超过这个范围，用户要滚动才能看到正文，跳出率会往上走。
图片由 AI 生成
还有文件体积这条硬线。单张头图压缩后控制在 200KB 以内，格式优先 WebP，老图片批量转一遍，页面打开速度会有肉眼可见的改善。4K 原图直接往网站上一扔的做法，等于让每个访客替你的懒惰付流量费。
留白：文字和主体都要有呼吸感
头图的构图核心是主次分明。画面里应该只有一个视觉主体，产品、人物或者一个抽象图形，放在黄金分割点附近。如果要在图上压标题，主体就往一侧让，给文字留出干净的负空间。常见的事故是文字直接压在人物脸上或者复杂纹理上，这个时候要么调整构图，要么在文字下面垫一层半透明色块，保证对比度够高。
安全区也要提前想好。手机端会裁掉头图两侧，关键信息别放在左右两边百分之十五的区域里，否则手机用户看到的是一张残图。
图片由 AI 生成
配色：跟着整站走，别让头图唱独角戏
头图颜色再好看，跳出了整站色板就是败笔。比较稳妥的做法是从主题的主色和辅助色里取色，头图用其中一个色系打底，再拿对比色做小面积的点缀。每张图饱和度控制在同一档，一组栏目图放在一起才不会像大杂烩。系列感的另一个诀窍是固定构图模板：同样的机位、同样的文字位置，只换主体内容，整站气质会显得非常稳。
文字：图上能不放就不放
能写在 HTML 里的文字，就不要烧进图片里。图上的文字无法被搜索引擎读取，不能自适应翻译，手机端还容易糊。头图上的文字只保留一句话以内的情绪表达，主标题、副标题、按钮统统用页面元素实现。非要放文字时，字号在手机预览下过一遍，缩略图状态下还能读得清才算合格。
上线前的三分钟自检
- 手机端预览一遍，确认关键信息没被裁掉。
- 用无痕窗口测加载，头图应该在一秒内出现。
- 模糊状态下眯眼看对比度，文字和背景是否分得开。
- 连续翻五个栏目页，头图放在一起看是否像一家人。
头图这个东西，单看每一张都还行，连起来看才见真章。做完一张别急着上传，放进列表页和邻居们比一比，比过了再上线。
