网页Banner的标准尺寸到底该怎么选？
你肯定遇到过这种情况——精心设计的网页Banner在手机上显示不全，电脑上看又像条营养不良的蚯蚓？或者广告图明明美得像艺术品，点击率却低得让人怀疑人生？这事儿我太有发言权了！去年帮朋友网店设计活动Banner，就因为尺寸选错，直接把"满199减100"砍成了"满19减10"，差点被客户追杀三条街...
一、PC端Banner尺寸指南
1. 全屏Banner王者尺寸
1920x600px这个尺寸就像西装里的高定款，适配99%的电脑屏幕。不过要注意左右各留150px安全区，别把重要内容怼到边角。上次看到某品牌把二维码贴在边缘，结果用户得把显示器转90度才能扫码！
2. 经典广告位三剑客
- 728x90px：网页顶部的黄金广告位，跟高速公路广告牌似的，保证每个访客都看得见
- 300x250px：侧边栏的百搭尺寸，就像便利店里的关东煮，看着不显眼但转化率超高
- 160x600px：竖版摩天大楼尺寸，适合做商品瀑布流展示，刷存在感一流
有个冷知识：468x60px这个上古尺寸居然还有人用！主要用在论坛和资源下载站，就跟老爷车似的，老派但实用。
二、移动端尺寸避坑手册
1. 手机屏幕的黄金比例
750x300px这个尺寸适配90%的智能手机，重点信息要放在中间400x200px的安全区。记住顶部60px是状态栏禁区，别学某APP把活动日期藏在电量图标下面！
2. 微信生态的特殊尺寸
公众号封面图用900x500px，但实际显示会被砍掉上下各215px。建议把核心内容做成640x640px的正方形，放在中间最稳妥。
3. 电商平台的隐藏规则
淘宝详情页Banner千万别超过1242px宽度，否则系统会自动压缩到模糊。有个商家传了2000px的图，商品细节糊得连亲妈都认不出。
三、尺寸对照表（建议收藏）
| 使用场景 | 推荐尺寸 | 文件大小限制 | 避坑重点 |
|---|---|---|---|
| PC首页全屏 | 1920x600px | ≤500KB | 左右留白150px |
| 微信文章封面 | 900x500px | ≤2MB | 核心内容居中640px区 |
| 淘宝详情页 | 1242px任意高 | ≤3MB | 图片质量80%以上 |
| 信息流广告 | 1200x627px | ≤1.5MB | 文字不超过图片1/3 |
| 社交媒体头像 | 400x400px | ≤500KB | 圆形裁切预留10px边距 |
四、小编的私房经验
响应式设计不是万能药
别指望一个尺寸走天下！去年用1920x600px做响应式设计，结果在4K屏上变成马赛克。现在我的做法是：主尺寸+3个断点（1440px/1024px/768px）各做微调。文件大小控制秘诀
JPG质量压到60%+PNG24色深，体积能缩40%还不糊图。有个设计师朋友坚持用100%质量，结果Banner加载要8秒，用户早跑光了。字体大小玄学
PC端正文用18-22px，移动端14-16px最舒服。千万别学某奢侈品网站用12px的英文，看得人眼珠子都要瞪出来。动效设计的隐形门槛
GIF动图超过3秒就等着被用户跳过吧！现在流行逐帧加载的APNG格式，体积小还能带透明通道。
五、说点得罪人的大实话
别迷信行业标准
那些728x90px之类的标准都是20年前定的，现在带鱼屏、折叠屏遍地开花。我的经验是：先做用户设备调研，再定尺寸。手机端慎用深色背景
OLED屏幕显示深色省电，但容易产生色偏。上次用#000000做背景，结果在不同手机上显出5种黑，活动主题直接变"五彩斑斓的黑"。电商Banner别搞极简风
某大牌学苹果玩留白设计，结果点击率暴跌70%。血泪教训：促销Banner就要信息轰炸！优惠信息放大再放大。测试比设计更重要
做完Banner一定要在5种设备上预览：老年机、千元机、旗舰机、平板、笔记本。有次在曲面屏上测试才发现文案被弧度扭曲。
最后说句掏心窝的：尺寸只是骨架，内容才是灵魂！见过太多设计师 *** 磕像素精度，却把"立即抢购"写成"立即枪够"。咱们这行啊，既要胆大心细，又要懂得抓大放小...