网站图片尺寸，外包前应整理哪些需求，一次交付清楚减少返工
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /4bdd0d456d6a.html
📄
网站图片尺寸，外包前应整理哪些需求，一次交付清楚减少返工
外包图片处理或设计前，真正要整理的不是一句“帮我做张图”，而是一份包含尺寸、用途、格式和判断标准的需求说明。常见误解是：把“网站图片尺寸”理解成一个固定数字，比如统一 1200 像素宽，然后让外包方照做。实际上，同一张图用在首页横幅、文章配图、商品缩略图和分享卡片上，需要的宽高比、清晰度和文件体积都不同。如果需求里只写一个尺寸，外包方只能猜，返工几乎必然发生。
为什么“一个尺寸走天下”会出问题
网页上的图片位置决定了它的显示方式。横幅图通常需要横向宽幅，文章配图接近 16:9 或 4:3，缩略图可能是正方形，头像可能是圆形裁切。如果都用同一张原图硬压，会出现两种结果：要么被拉伸变形，要么被裁掉关键内容，比如人物头部或产品 logo。
另一个原因是加载速度。图片文件越大，页面打开越慢。外包方如果只按“高清”做，可能给你一张 4000 像素宽的图，直接上传会让移动端用户等很久。但反过来，压得太小又会在高分屏上发虚。所以需求里要同时说明显示宽度和最大文件体积，而不是只给一个像素数。
外包前必须写清楚的五项内容
下面这份清单可以直接复制到需求文档里，逐项填写后再发给外包方。
- 用途位置：这张图会出现在首页顶部、文章列表、商品详情还是分享到社交平台？位置不同，裁切规则不同。
- 显示尺寸与宽高比：写明“在页面上显示为宽 800 像素、高 450 像素”或“比例 16:9”。不要只写“大图”。
- 输出格式：照片类通常用 JPG，带透明背景或简单图形用 PNG，图标和插画可考虑 SVG 或 WebP。格式要和外包方确认，因为不同格式的压缩方式不同。
- 文件体积上限：例如“单张不超过 200KB”。这个数字不是固定的，取决于页面图片数量和用户网络环境，但写出来能让外包方主动压缩。
- 裁切与安全区：如果图片会被裁成多种比例，要标出哪些内容不能被裁掉，比如人脸、文字、产品主体。可以用一张示意图圈出安全区。
一个假设例子：文章封面图需求怎么写
假设你要给博客文章配一张封面图，用在列表页和文章顶部。可以这样写：
用途：文章列表缩略图和文章页顶部横幅。列表缩略图显示为 400×225 像素，比例 16:9；文章页顶部显示为 1200×675 像素，同样 16:9。请提供一张 1200×675 的主图，并额外导出 400×225 的缩略图。格式用 JPG，单张不超过 150KB。裁切时请保证画面中央的主体完整，左右两侧可以裁掉。
这个例子里，外包方拿到后不需要再问“多大”“什么格式”“能不能裁”，直接就能动手。注意：1200×675 和 400×225 只是示例数字，你要根据自己的页面模板实际测量后再填。
怎么判断外包方交付的图片是否合格
收到图片后，不要只看“好不好看”，按下面几项检查：
- 把图片放到实际页面位置，看是否变形、模糊或裁掉了关键内容。
- 用浏览器开发者工具或图片属性查看实际文件体积，是否超过你设定的上限。
- 在手机和电脑上各看一次，确认小屏幕上文字和主体仍然清楚。
- 如果图片需要被搜索引擎理解，检查文件名和替代文本是否描述了图片内容，而不是一堆乱码。
如果其中一项不达标，先判断是需求没写清楚，还是外包方没按需求做。前者要补需求，后者可以要求修改。把每次返工的原因记下来，下次外包时直接写进需求模板。
下一步：先量再写，不要先写再猜
打开你的网站页面，用浏览器开发者工具查看图片实际显示区域的宽高，或者直接测量设计稿里的图片框。把每个位置的尺寸、比例和用途记在一张表里，再补充格式和体积上限。这张表就是外包需求的核心。需求越具体，外包方越不需要猜，交付一次通过的概率就越高。
