官网首页大图和轮播图做多大尺寸合适？附具体数值

"首页那张大图该做多大？"是我在模板市场被问得最多的问题之一。问的人通常已经吃过亏：设计师给了一张特别大的图，传到后台发现要么被裁掉一块，要么在手机上小得看不清字。

先说结论：别问"标准尺寸"，先看你用的模板前台区域到底多宽。同样是首页大图，有的是全屏铺满，有的只在中间 1200 像素的容器里显示，尺寸要求完全不一样。搞清楚这一点，后面所有的数值才有意义。

如果你的首页大图是全屏背景式，也就是图片铺满整个浏览器宽度：

为什么建议按 1920 做而不是按 1440？因为你要留出余量。图片在比设计宽度更宽的屏幕上会拉伸，1920 是现在的主流基准，再往上 2560 的屏幕很少，一般浏览器会让图片居中裁切，影响不大。

高度这块容易纠结，其实不用。全屏背景图的高，模板代码里基本写死了或者按屏幕比例算，你做图时按模板给的容器比例来，别自己发挥。

这是最容易被忽略、也最影响效果的一点。

电脑端和手机端看同一张图，显示的区域不一样。手机屏幕窄，图片两边会被裁掉很大一部分。所以图上要放文字的话，文字放在图片中间偏左的区域，横向留出至少 30% 的安全余量，左右两侧最外面的一截，就默认它会被裁掉。

见过太多案例：把联系方式大字号放在图片最右边，电脑上看刚刚好，手机上一打开，号码被切掉一半。

首页大图直接影响网站打开速度，别用几 MB 的原图。

导出建议：jpg 格式，质量压到 80 到 90，1920 宽的大图控制在 300KB 以内，能压到 200KB 更好。如果模板支持，用 webp 格式体积会更小，但要确认目标用户的主流浏览器支持，一般近几年的浏览器都没问题。

图片内容建议用实拍图或者高质量的渲染图，别用网上下载的带水印图，一来不专业，二来有版权风险。图上如果要加文字，最好把文字做成图片的一部分，比用 HTML 叠字更保险，不会因为字体缺失变样。

很多模板默认带轮播，就是首页大图可以左右切换两三张。但真到运营阶段，多数企业站最后只留一张。

原因很直接：第一，轮播的点击率很低，第二张图很少有人会等到它自动切过来；第二，多张图会拖慢首页加载，尤其是手机上，图片是首屏加载的大头；第三，客户第一眼看到什么很重要，让他每次刷新看到不同的内容，反而分散注意力。

如果一定要用轮播，控制在两三张，每张都是一个独立卖点，别做三张内容差不多的图。自动切换间隔建议 5 秒以上，别让客户刚看到一半就切走了。

换完图记得在电脑和手机各看一遍，重点看文字有没有被裁、图片清不清晰。这个动作花不了两分钟，能避免上线后被客户截图吐槽。

做图之前，先看模板后台给的提示。正规的模板在后台都会有图片尺寸说明，比如"建议 1920×800"，照着做就行。如果后台没说，就按模板自带那张示例图的尺寸来做，把示例图下载下来看它的宽高，一比一模仿最稳。第一次做出来丑没关系，尺寸对了，后面换图就是分分钟的事。