头像要求 400×400，文章封面要求宽 1200，邮件附件限制 2 MB，而手机拍出来的照片是 4032×3024。调整图片尺寸是最常见的图片处理需求，但很多人做完发现图片被拉扁了、变模糊了，或者文件反而没变小。本文用具体的数字讲清楚怎么算目标尺寸、怎么避免变形和模糊，并说明如何在浏览器本地完成，不必把照片上传给任何人。
先弄懂三个概念：像素、比例、重采样
像素尺寸是图片网格的宽和高，例如 4032×3024 表示横向 4032 个点、纵向 3024 个点，总共约 1219 万像素。改尺寸就是把这张网格重新计算成另一张网格，这个过程叫重采样。比例（宽高比）是宽除以高：4032÷3024 约等于 1.333，也就是 4:3。只要新尺寸的宽高比与原图一致，画面就不会变形。
只填一个数是最稳妥的做法：给定目标宽度，高度 = 目标宽度 × 原高 ÷ 原宽，再四舍五入到整数像素。例如：
| 原图 | 目标 | 计算 | 结果 |
|---|---|---|---|
| 4032×3024 | 宽 1600 | 1600 × 3024 ÷ 4032 | 1600×1200 |
| 3000×2000 | 宽 1080 | 1080 × 2000 ÷ 3000 | 1080×720 |
| 1920×1080 | 宽 1000 | 1000 × 1080 ÷ 1920 = 562.5 | 1000×563（四舍五入） |
| 3024×4032（竖拍） | 高 1280 | 1280 × 3024 ÷ 4032 | 960×1280 |
用 ToolGarden 在本地缩放：步骤
- 打开“图片尺寸调整”，选择或拖入图片。支持 JPG、PNG、WebP、GIF、BMP、SVG、AVIF 等输入，单个文件上限 50 MB、约 4000 万像素，超限时会提示。
- 页面会显示原图尺寸。保持“保持比例”选中，只改“宽度”或“高度”其中一个，另一个会按原比例自动算出。
- 选择输出格式：JPG、PNG 或 WebP。默认会跟随来源：JPG 输出 JPG，WebP 输出 WebP，其它输入（如 GIF、BMP、SVG）默认输出 PNG。JPG 和 WebP 有质量滑块，默认 92%；PNG 是无损的，没有质量参数。
- 点击生成，查看输出预览，以及输出尺寸、文件体积和耗时。
- 确认线条、文字边缘没有发虚，再下载。需要对照时，用预览放大看细节。
关于隐私，页面说明处理在本地完成、数据在关闭页面后清除。想自己验证，可以打开开发者工具的 Network 面板再处理一张图，观察是否有请求携带你的图片。
缩放和裁剪：什么时候两个都需要
缩放保留全部画面，只改变像素数量；裁剪丢弃画面外的部分，保留像素密度。当目标比例和原图比例不同，仅靠缩放必然拉伸或留白，这时要先裁再缩。
例子：一张 4000×3000（4:3）的照片，要做 1200×630 的分享封面（约 1.905:1）。如果直接强制 1200×630，画面会被压扁。正确做法是先裁出与目标同比例的区域：宽 4000，高 4000÷1.905 ≈ 2100，也就是 4000×2100 的一条横带；再缩放到 1200×630。验算：4000÷2100 与 1200÷630 都约等于 1.905，比例一致，不变形。这两步可以在“图片裁剪”中一次完成，它在同一流程里支持裁剪框和输出尺寸。
| 需求 | 做法 | 会不会变形 |
|---|---|---|
| 保持构图，只是变小 | 缩放，保持比例 | 不会 |
| 目标比例与原图不同，要填满 | 先裁成目标比例再缩放 | 不会，但会丢掉一部分画面 |
| 目标比例与原图不同，要全部内容 | 缩放后在画布上留边（需编辑工具补背景） | 不会 |
| 关闭保持比例并强行指定宽高 | 拉伸 | 会，人物和圆形会变形，一般不建议 |
为什么缩小有时会出现锯齿，以及工具怎么处理
缩小不是简单地丢掉像素。如果一次把 4000 像素缩到 400，只采样最近的几个源像素，细线条和纹理会出现锯齿或摩尔纹。常见的缓解办法是分步缩小：每一步最多缩到一半，让每个新像素综合更多源像素的信息。在当前实现里，缩放使用高质量平滑设置，并且当缩小幅度超过 2 倍时，会先逐次减半，最后一步才缩到目标尺寸；SVG 来源则使用专门的缩放库来保持清晰。你不需要手动操作，但了解这一点有助于解释为什么“一次缩到位”的结果通常比“多次反复缩小”更好：从原图出发，一次输出，别拿上一次导出的小图再缩。
放大为什么会糊
放大需要凭空产生新像素，算法只能用插值去“猜”：把 800×600 放到 1600×1200，新增的四分之三像素全是相邻像素的加权平均，不会出现原本没拍到的细节，边缘只会变软。因此，需要大图时应当换更高分辨率的原图。如果只有小图，可以用“图片无损放大”或“图片增强”，它们用算法或 AI 模型补出纹理，但这些细节是估计出来的，不能当作真实信息，更不适合做证据。
目标像素到底该设多少
| 用途 | 建议思路 | 示例 |
|---|---|---|
| 网页正文图 | 页面容器宽度的 1 到 2 倍（后者照顾高密度屏） | 容器 800 px，可导出 800 或 1600 宽 |
| 社交平台封面 | 按平台推荐比例和尺寸，先裁再缩 | 约 1.91:1 的分享图常用 1200×630 |
| 头像 | 正方形，先裁成 1:1 | 400×400 |
| 邮件附件控制体积 | 宽度 1600 以内通常已足够阅读 | 4032×3024 缩到 1600×1200 |
| 打印 | 像素 = 英寸 × dpi | 6×4 英寸、300 dpi 需要 1800×1200 |
打印这一项值得多说一句：像素本身没有“厘米”的概念，物理尺寸取决于 dpi。同一张 1800×1200 的图，在 300 dpi 下是 6×4 英寸，在 150 dpi 下就是 12×8 英寸，但画质也会相应变粗。所以按打印需求缩放时，先确认目标尺寸和 dpi，再算像素数；不要只改工具里的“宽度”而以为改了厘米。
一个完整的例子：把手机照片缩到邮件附件大小
一张 4032×3024 的手机照片，原文件假设约 4 MB，要发给对方并要求每张小于 1 MB。第一步，把宽度设为 1600，保持比例，得到 1600×1200，像素数从约 1219 万降到 192 万，只有原来的约 16%。第二步，输出 JPG，质量保持默认或略降；第三步，看工具给出的文件体积，如果仍偏大，可以再用“图片压缩”微调，或把格式换成 WebP（先确认对方的软件能打开）。注意：文件体积和像素数大致成正比，但并非严格线性，它还受画面复杂度和质量设置影响，所以应以工具实际给出的数字为准，而不是自己估算。
格式、质量与元数据
| 输出格式 | 特点 | 缩放时注意 |
|---|---|---|
| JPG | 有损，照片体积小，不支持透明 | 透明区域会被填充为白色；多次保存会累积损失 |
| PNG | 无损，支持透明，照片体积大 | 没有质量滑块；照片缩小后体积也可能仍然很大 |
| WebP | 有损/无损均可，支持透明，网页友好 | 少数旧软件和系统预览不识别，发布前测试 |
元数据方面，经画布重新编码的输出通常不再带原文件的 EXIF 信息，这对隐私有利；但如果你需要保留拍摄时间或版权字段，缩放会把它们丢掉。要确认某个文件里有没有位置信息，可以用“EXIF 查看 / 清除”检查最终导出的文件，而不是凭印象假设。手机照片的旋转信息有时只记录在元数据里，如果缩放后方向不对，用“图片旋转”修正即可。
常见问题诊断
| 现象 | 可能原因 | 处理办法 |
|---|---|---|
| 人物被拉宽或压扁 | 关闭了保持比例，或宽高同时手填且比例不符 | 开启保持比例，只填一个维度；需要固定比例时先裁剪 |
| 缩小后文字发虚 | 缩小幅度太大，或在已缩小的图上再缩 | 从原图一次缩到位；纯文字截图用 PNG 输出 |
| 文件缩小后反而变大 | 照片输出成了 PNG，或来源是已高度压缩的 JPG | 改输出 JPG/WebP，或降低质量 |
| 透明背景变白 | 输出成了 JPG | 改用 PNG 或 WebP |
| 提示图片过大或无法解码 | 超出 50 MB / 约 4000 万像素，或文件损坏、格式不被浏览器支持 | 先在其它设备缩小，或换格式 |
| 缩放后方向不对 | 方向信息在元数据中，部分软件不识别 | 用“图片旋转”修正后再导出 |
什么时候不该用这个方法
- 需要无损修改且保留全部元数据：画布重编码一定会重新压缩并丢弃元数据，应保留原文件。
- 超大图（例如数亿像素的扫描图或全景图）：浏览器内存和画布限制会成为瓶颈，请使用桌面软件或命令行。
- 精确色彩管理的印刷稿：不保证保留色彩配置，应使用专业软件。
- 成百上千张的批量缩放：浏览器不适合长时间大批量任务，命令行工具更合适。
- 想把小图放大并保持清晰：缩放无法凭空增加细节，需要更高分辨率的原图。
最后给一个实用的流程：确认用途 → 算目标像素 → 比例不同就先裁剪 → 从原图一次缩放 → 选择合适格式和质量 → 检查导出文件的清晰度、体积和元数据。照这个顺序做，大多数“变形”“发虚”“没变小”的问题都可以避免。