网站图片怎么压缩:先裁剪、再缩放,最后选格式
面向网站封面、照片和截图的图片处理流程。比较 JPEG、PNG 与 WebP,确定尺寸后检查画质和真实体积,避免反复有损压缩。
一张图,三个不同的问题
画面是否合适、显示是否清楚、下载是否足够快,是三个需要分别判断的问题。把压缩质量一次降到很低,并不能解决主体太小或比例不合适的问题。
例如,把一张横向照片用作正方形封面,应该先决定主体的位置。裁剪确定构图,缩放决定输出像素,最后才是编码格式与质量。每一步都对应一个明确的交付要求。
裁剪与缩放为什么有先后
如果先把整张照片缩到很小,再从中裁出一个局部,最终留下的有效像素会更少。先裁出需要的区域,再缩到目标尺寸,可以避免这次不必要的损失。
保持宽高比能够避免拉伸,但它并不等于适配任何封面比例。目标比例与原图不同时,应先裁剪;仅填写不同比例的宽高,会让人物或产品变形。
照片和文字截图需要不同的判断
照片可以通过有损编码减少体积,质量设置应结合真实输出查看。文字截图更容易在字缘出现模糊或杂点,单看缩略图容易忽略这些问题,最好放大检查细字与高对比边缘。
需要透明背景时,也要先确认输出格式支持透明。JPEG 不保留透明通道;不能因为扩展名更常见,就忽略原图的使用场景。
体积变小以后,再检查一次
已经优化过的图片重新编码后可能变大,所以应比较实际字节数,而不是仅凭“压缩成功”判断。Neatbo 的结果会显示输入与输出大小,也可以对照画面决定是否保留。
发布前清除不必要的图片元数据,并重新打开下载文件检查方向、尺寸和透明区域。元数据清理不等于完整匿名化;画面里的姓名、地址或屏幕内容仍然可见。保留原图,后续改版就不必从压缩副本重新开始。
实例:把横向照片做成正方形封面
假设原图为 2400 × 1600,目标是正方形封面。先调整主体位置,裁出 1600 × 1600 的区域,再决定导出 800 × 800 还是 1600 × 1600。应根据显示尺寸和希望支持的像素密度做选择。
800 × 800 包含 64 万像素,1600 × 1600 包含 256 万像素。像素数量相差四倍,并不保证文件体积也相差四倍;纹理、透明区域和编码都会影响结果,应比较实际下载的候选文件。
带文字的截图,关键问题可能是标签无法辨认,而不是照片“不够漂亮”。请按用户实际看到的尺寸检查;如果还没达到体积目标,小字就已经糊了,应考虑裁掉无用边缘或调整布局,而不是继续降低画质。
| 决策 | 要回答的问题 | 判断依据 |
|---|---|---|
| 裁剪 | 画面中必须留下什么? | 目标比例下的主体位置 |
| 缩放 | 实际要显示多少像素? | 布局尺寸和密度需求 |
| 编码 | 格式是否保留关键信息? | 透明与细节对比 |
| 发布 | 交付文件是否仍正确? | 重新打开下载结果并核对字节数 |
完成前的检查清单
- 每次对比均从原图重新导出。
- 在深浅背景上检查透明边缘。
- 保留原稿,方便以后重新裁剪。
- 发布时撰写描述图片内容的替代文字;这是页面编辑工作,不是压缩参数。
参考资料
- MDN:图片文件格式
用于了解图片格式与透明支持;Neatbo 的实际能力以上文工具说明为准。