把图像缩小得很难看其实相当容易。浏览器默认的 drawImage 走双线性过滤,缩减幅度一大就采样不足——结果是锯齿边缘、布料和砖墙上的摩尔纹,以及整体的发糊。这个工具把缩放交给以最高质量运行的 Lanczos 重采样器 pica,若 pica 加载失败则回退到逐级减半。
你可以按百分比缩放,也可以指定精确的像素宽度。宽高比始终保持,图像不会被拉伸;指定宽度后高度自动确定。
重采样在你自己的设备上运行。家庭照片、证件扫描件和产品图不会被上传到任何缩放服务。
| 用途 | 常用宽度 | 说明 |
|---|---|---|
| 网站首屏大图 | 1920 px | 覆盖多数桌面屏幕且不浪费 |
| 博客正文图 | 1200 px | 常规栏宽下在高密度屏上依然锐利 |
| 邮件附件 | 1024 px | 体积小到可以从容发送 |
| 论坛或聊天 | 800 px | 秒开,仍然清晰可读 |
| 缩略图 | 300 px | 主体在画面中较小时请先裁切 |
本工具也接受大于原图的自定义宽度,但任何重采样器都无法凭空造出从未被记录的细节。结果是平滑但略显发软的放大版,而不是真正更清晰的图片。需要有意义的放大请使用图像升级工具,它会应用专为此设计的边缘导向插值与锐化。
缩小不会。pica 的 Lanczos 滤波器为每个输出像素采样源图像中一片较宽的邻域,因此浏览器默认缩放下会发软的边缘在这里保持锐利。放大是另一回事,从未记录的细节无法恢复。
你设置宽度,高度按原始宽高比得出。强制两个数值会使图像变形,因此这是有意设计。需要特定形状请先裁切图像。
不会。JPG 仍是 JPG,PNG 仍是 PNG。若同时需要改格式,请使用相应的转换工具。
大致按倍率的平方变化,再叠加编码影响。宽高各减半会去掉四分之三的像素,照片的体积通常因此减少约 70%。
可以。全部添加后选择自定义并输入一个宽度,每张图像都会缩放到该宽度,高度各自计算。
没有。pica 作为 JavaScript 模块加载一次后,所有工作都在浏览器内完成,图像本身不经过网络。