图片
缩放图片
缩放发生在当前标签页的 canvas 上,所以私人照片不会经过网络。锁定比例后,填一个维度另一个会自动跟上。
把图片拖到这里,或点击选择——不会上传。
怎么用
- 拖入图片,或点击选择文件。
- 输入宽度——锁定比例时高度会自动算。
- 要快速减半或缩到四分之一,直接点百分比按钮。
- 点「缩放」,再点「下载」。
为什么「二倍图」不是浪费
手机和笔记本屏幕把两到三个物理像素塞进一个 CSS 像素里。一张 400 像素宽的图放进 400 像素的槽位,实际是按 800 或 1200 设备像素渲染的,所以看起来发虚。提供二倍图让浏览器自己缩小,是标准做法。代价是最多四倍的体积,这也是响应式图片要用 srcset 的原因——而不是给所有人发同一张大图。
缩小一步到位没问题,放大会糊
缩小之所以可行,是因为浏览器采样足够密,能正确求平均。放大没法凭空造出细节——它只是在已有像素之间插值,所以 200 像素的图拉到 800,用哪种算法都是糊的。需要更大的图就去找更大的原图,没有任何设置能恢复从未被记录下来的信息。
为高分屏和邮件定尺寸
CSS 宽度 400 px,在 2× 屏上需要 800 px 的源图;只给 400 的,在如今的手机上看起来就是糊的,而如今几乎人人都是这种屏。常见折中是备一张 800 px 的图,用 srcset 声明按 400 px 显示,让浏览器自己挑——一份文件兼顾两种,不写 JS。
邮件是相反的纪律:Outlook 的渲染引擎忽略大部分响应式 CSS,所以 600 px 宽的表格仍是安全上限,超出的图片要么被拙劣地缩放,要么在窄客户端上溢出。
常见问题
缩放会改变文件大小吗?
通常会明显改变。像素数随线性尺寸的平方变化,宽度减半,像素只剩四分之一;JPEG 质量是另一个杠杆。
JPEG、PNG、WebP 该选哪个?
照片用 JPEG,需要透明或无损边缘用 PNG,想两者兼得又要体积小就 WebP。现在的浏览器都支持 WebP。
为什么透明 PNG 变成了白底?
JPEG 没有 alpha 通道。需要透明度的话,缩放前把输出格式改成 PNG 或 WebP。
有文件大小限制吗?
只受设备内存限制。四千万像素的照片也没问题;特别大的图在老浏览器上可能撞到 canvas 尺寸上限。
放大小图能让它变清晰吗?
不能。放大是在编造像素。400 px 的照片拉到 1200 px,只会比原图更软,换任何重采样算法都一样。
尺寸变化和文件大小是成比例的吗?
对未压缩数据大致是比例的平方,但编码不是直线关系。边长减半,JPEG 通常降到约三分之一,而不是四分之一。