手机拍摄的网页照片
- 输入
- 原图 4000 × 3000；最大宽度设为 1600；输出 JPG
- 结果
- 输出约 1600 × 1200；实际文件大小取决于画面细节与质量设置
- 这代表什么
- 网页展示通常不需要保留相机全尺寸；先缩像素，再微调质量，比一味压低质量更稳妥。
图片处理
在浏览器内压缩、缩放与转换图片。
三种图片任务，参数不能一套到底
图片太大不一定要把画质压得很差。先判断用途、像素尺寸与透明背景，再选择 JPG 或 PNG，通常更有效。
带透明背景的 Logo
- 输入
- 透明 PNG；最大宽度 1200；继续输出 PNG
- 结果
- 透明区域可以保留；像素尺寸会按比例缩小
- 这代表什么
- 不要为了更小就改成 JPG，否则透明背景会丢失；纯色图形有时 PNG 反而更清晰。
宽度只有 800px 的截图
- 输入
- 原图宽 800；最大宽度设为 1600；输出 PNG
- 结果
- 不会放大，宽度仍为 800px；文件也不保证变小
- 这代表什么
- 放大不会创造新细节；格式或画面内容不合适时，重新编码后甚至可能更大。
怎样使用页面上的计算结果？
所有处理都在当前浏览器完成，图片不会上传到本站服务器。最大宽度只会缩小，不会把小图放大；输出体积由像素、格式、透明度和画面复杂度共同决定。
什么时候不能直接用这个结果？
- 工具不能保证一个指定 KB 大小，也不能恢复原图已经丢失的细节或修复严重模糊。
- 超大图片会占用设备内存；浏览器不支持的格式、损坏文件或超过页面限制的文件可能无法处理。
- 当前导出重点为 JPG 与 PNG；需要 WebP、批量处理、专业色彩管理或保留完整元数据时，应使用专门软件。
继续看《图片格式与压缩指南》
指南从照片、透明 Logo 和截图出发，说明什么时候先缩尺寸、怎样选 JPG／PNG，以及为什么文件可能反而变大。
技术资料：MDN File API
规则最后核对：2026-09-07。来源见数据来源页。