如何为网络调整尺寸和裁剪图像

调整尺寸和裁剪听起来是一回事，但它们解决不同的问题 —— 而把它们用好，往往比单靠压缩带来更大的提速。本指南讲讲两者的区别、过大的图像为何有害，以及如何为网络把图像尺寸调对。

调整尺寸 vs. 裁剪

• 调整尺寸（Resizing） 改变整幅图像的尺寸，保留全部内容 —— 你是在把它放大或缩小。
• 裁剪（Cropping） 切掉图像的一部分，只留下一块区域 —— 你改变的是画面里有什么，而不仅仅是它的大小。

头像是个好例子：先围绕脸把它 裁 成正方形，再把那个正方形 缩 到显示尺寸。

过大的图像为何拖慢页面

手机里直接出来的照片可能宽 4,000 像素。如果它显示在一个 800 像素宽的栏里，浏览器下载的像素是它永远能显示的五倍，然后再即时缩小。这是白白浪费带宽、拖慢页面，却毫无视觉收益。把图像调到大致等于它显示的尺寸，往往是可得的最大一笔文件体积节省 —— 常常比压缩还大。

保持宽高比

宽高比（aspect ratio） 是宽度与高度的比例。两个维度按相同倍数缩放，图像就不会失真；只改一个，它就会被拉伸或压扁。大多数工具默认“锁定”比例 —— 除非你专门想要失真，否则就让它锁着。若你需要 另一种 形状（比如从竖照做成宽横幅），请裁剪到新比例，而不是拉伸。

图像该多大？

• 让图像宽度匹配它要填充的空间 —— 量一量容器。
• 为了在高密度（Retina）屏幕上清晰显示，按显示尺寸约 2 倍导出，然后再压缩。
• 别放大 —— 把小图放大只会增加模糊，它变不出细节。

串起来

一个好的操作顺序是 裁剪 → 调整尺寸 → 压缩。图像缩放器 在锁定宽高比的情况下一次处理裁剪和调整尺寸，然后交给 图像压缩器 把文件体积降下来。质量能压到多狠，读 压缩指南；要先选对格式，读 图像格式讲解。