浏览器端图片缩放的工作原理
每次缩放都是完全在 JavaScript 中运行的短流水线。无需下载编解码器库，也不涉及任何服务器。浏览器内置的 Canvas API 解码文件、以目标尺寸重新绘制，并在内存中重新编码，然后生成可预览或打包为 ZIP 的 Blob。由于每个步骤都在标签页沙箱内执行，原始文件永远不会到达网络。
- 将每个上传的文件读取为 Blob 并创建对象 URL，使浏览器无需将字节复制到服务器或写入磁盘即可解码。
- 根据您选择的模式计算目标尺寸 — 最长边上限、精确宽高或百分比缩放。宽高比锁定在您编辑单个字段时保持比例正确。
- 以目标尺寸创建一个离屏 Canvas，并调用
ctx.drawImage(source, 0, 0, width, height)重新绘制解码后的像素。浏览器处理平滑缩放结果的插值。 - 调用
canvas.toBlob以源格式重新编码。PNG 保持无损，JPEG 和 WebP 以高质量重新编码。然后页面显示前后对比卡片，提供单图下载或使用 fflate 在内存中构建的 ZIP 下载。
为什么要缩放图片？
- 超大图片是页面加载缓慢最常见的原因。一张 4000×3000 的手机照片直接放入 600 像素宽的布局中，传输的像素量大约是屏幕显示所需的 40 倍。在上传前将最长边限制到 1600 像素，可以大幅降低页面体积并改善 Core Web Vitals LCP 指标。
- 上传表单强制执行严格的尺寸要求。头像、证件照门户、电商商品图和 OG 社交卡都有特定的像素要求：Open Graph 预览需要 1200×630，应用图标需要 512×512，缩略图需要 150×150。精确匹配尺寸可以避免上传被拒的重复循环。
- 电子邮件和聊天工具会静默对大文件进行重新压缩，可能破坏清晰的截图。自行将图片缩放到合理的宽度，可以保持结果可预期，而不是交给别人的有损处理流水线。
- 批量一致性对于图库和目录非常重要。将一个文件夹中混合尺寸的照片全部缩放到 800×800 目标尺寸，可以确保每张卡片在网格中整齐排列，不会有多余的大图破坏布局。
常见应用场景
每当源尺寸与目标需求不匹配时，缩放就派上用场。以下三种场景反复出现。
- 为 Shopify 或 WooCommerce 商店准备商品照片。将一文件夹 4000 像素的相机原图的最长边限制到 1600 像素，使店面加载更快，同时宽高比保持不变，图片不会变形。
- 从一个主文件生成社交和应用资源。精确设置 1200×630 用于 Open Graph 卡片，再设置 512×512 用于应用图标，无需打开重型编辑器即可几次点击完成导出。
- 在将 QA 或支持截图附加到工单之前批量压缩。将 50 张截图的文件夹缩放到 50%，在放入 Bug 跟踪器之前通常可以将归档大小减少约四分之三。
实际案例：将 4000 像素照片缩放为 1600 像素网页图片
一张直接来自手机的 4000×3000 照片是常见的超大文件，远超任何网页布局的需求，是衡量缩放节省效果的公平基准。
将照片拖入上传区域，将模式保持在限制最长边，并将值设为 1600。Canvas 流水线以 1600×1200 的尺寸重新绘制图片，保持宽高比不变，然后以原始格式重新编码。输出卡片显示新尺寸和文件大小，对于典型的 JPEG，文件大小从数兆字节降至几百千字节。点击卡片上的下载获取单个文件，或者在一次缩放多张图片时点击下载 .zip。整个流程从拖入到下载只需几分之一秒，页面本身加载后不消耗任何流量。
有哪些缩放模式？
三种。限制最长边将宽度或高度中较长的一边限制到指定像素值，另一边等比缩放，这是安全的默认选项，永远不会导致变形。精确宽度 × 高度允许您输入两个数值，并带有宽高比锁定功能，在您编辑第一个字段时根据源比例自动计算第二个字段 — 当表单要求非等比的精确尺寸时，关闭锁定即可。按百分比缩放将两个尺寸同时乘以一个系数，适合一次性将整批图片缩小一半或放大一倍。六个一键预设（从 1920×1080 到 150×150 缩略图）覆盖最常用的目标尺寸。
处理在我的设备上进行吗？
是的，完全在本地。页面使用浏览器的原生 Canvas API 和 Web File API 在内存中解码、重新绘制和重新编码每张图片。不会将任何图片数据发送到服务器，没有临时上传，也没有云端往返。您可以自行验证：打开开发者工具，切换到网络面板，执行一次缩放。您看到的唯一出站请求是页面初始加载和广告调用。没有任何图片数据离开标签页，这使它对于扫描的身份证件、医疗图像和其他您不希望上传的材料来说都是安全的。
缩放会降低质量吗？
缩小图片（下采样）效果极佳 — 浏览器将源像素平均到更少的像素中，细节保持清晰，文件也会变小很多。放大超过源分辨率（上采样）无法凭空创造从未捕获过的细节，因此小图放大后会显得模糊；这是所有缩放工具的固有限制，不只是本工具。输出保持源格式：PNG 保持无损，而 JPEG 和 WebP 以高质量设置重新编码，与原始图片的视觉差异几乎难以察觉。
支持哪些文件格式？
输入方面，浏览器能解码的任何格式都被接受：PNG、JPEG、WebP、GIF 和 BMP 涵盖了手机、相机或截图工具生成的几乎所有文件。输出保持源格式，前提是 Canvas 编码器支持 — PNG、JPEG 和 WebP 可直接往返。GIF 和 BMP（Canvas API 可解码但不能重新编码）会保存为无损 PNG。缩放后的文件名包含新尺寸（例如 photo-1600x1200.jpg），方便批量文件的排序。
拖入图片，选择尺寸，缩放。一切都在您的标签页中运行。无需上传，无需账户，无需等待服务器。