图片缩放与放大
定好目标尺寸,剩下的交给浏览器的高质量重采样;放大之后可以顺手补一层锐化。
选图、粘贴截图或拖进来。缩放不改内容,只改像素数量,所以这张图不会被裁掉任何部分。
怎么用
选图之后默认给「长边 1600」这一档,这也是发到网页里最通用的规格。要发朋友圈就选 1280,要贴进文档的正文就选 800。确切的宽高可以在「精确尺寸」里填,但两个值都填且比例和原图不一致时会拉伸,页面会提前警告。选好格式点导出即可。
放大像素画、视频截图这类方块感明显的内容时,把「像素风插值」勾上,否则边缘会被插值糊掉。反过来,照片放大一定不要勾这个选项。
缩放之前值得知道的事
放大会变糊是物理限制,不是算法不好。位图记录的是有限个像素点,放大意味着要在原有的点之间凭空造出新像素。双线性插值让相邻像素取平均、双三次插值用更多邻域做拟合,都只能让过渡看起来更平滑,不可能还原出原本没有被拍下来的细节。所以「把 500 万像素的照片放大成 4K 壁纸」这种需求,前端工具做不到;能做到的只有 AI 超分,那是拿大量图片训练出来的模型在猜细节,而不是还原真实。
放大时的插值方式要按内容选。照片、插画这类连续色调的图要用平滑插值(浏览器的 imageSmoothingQuality 设为 high),边缘才不会有锯齿。像素画、像素风图标、扫描的线稿反而必须关掉平滑,否则原本清晰的方块会被插值糊成一团。这一页提供「像素风」开关就是为这个场景准备的,选错方向只会事倍功半。
放大之后的轻微锐化很值得做。插值会把边缘的能量摊开,所以放大后的图整体偏软,这是最常见的抱怨。放大之后补一层小半径的 USM 锐化(半径一到二像素、强度 40% 到 100%),能把边缘的观感拉回来不少,而且不会像放大前锐化那样把原来的噪点一起放大。这里按放大倍数自动给一个建议值,也可以到图片滤镜那页手动细调。
浏览器的画布有硬上限。主流桌面浏览器单边最多 16384 像素,总像素数上限在 Safari 和部分移动端浏览器上更紧。超过之后 toBlob 不会报错,而是返回 null 或者直接抛异常,表现就是「导出失败」却不给原因。所以目标尺寸算出来之后先看这里的提示,超了就先把原图切块分别放大再拼回去。
缩小也不是随便缩的。缩小同样要重采样,而且缩得越狠越容易在细密纹理(比如织物、头发、树叶)上出现摩尔纹和锯齿。高质量重采样会先做低通滤波来防止混叠,所以目标是缩到四分之一以下时应该直接一次性缩到位,而不是连着缩两次——多次缩放会把每一轮的误差累积起来。
想裁成别的比例应该先裁再缩。在缩放页把宽高硬改成目标比例会让画面变形,人脸会被压扁或拉长,这种图一眼就能看出来。正确做法是先用裁剪把比例改成目标比例,再来缩放。精确尺寸模式保留下来是为了处理「表格截图必须正好 800 宽」这类确实需要拉伸的少数场景,用它之前先确认真的需要。