25款免费浏览器图像设计工具：文件不上传，本地处理更安心

在线工具总是要求你先上传文件到服务器，这对处理敏感图片来说是个隐患。Utility Tools Lab 的 Image & Design 分类走了另一条路：25 款免费工具全部在浏览器内运行，无需注册，像素数据不离开你的机器。从压缩、调色到元数据查看，这套工具箱覆盖了开发者日常遇到的绝大多数小图像任务。

图像优化：让图片更轻、尺寸更准

图片优化是最高频的需求。Image Compressor 支持 JPEG、PNG 和 WebP，可以控制质量与最大尺寸，整个过程不上传服务器。Image Resizer 则面向精确尺寸调整，接受 JPEG、PNG、WebP 或 GIF，支持按像素或百分比缩放，锁定宽高比、平滑降采样并在标签页内重新编码。

格式转换交给 Format Converter，可把 PNG、JPEG、WebP、GIF、AVIF 和 BMP 重编码为四种输出格式之一，单次最多处理 20 个文件，并支持在透明区域背后填充哑光色。Image Cropper 提供拖拽选区、七种宽高比预设和三分法网格，输出质量可调。Flip & Rotate 负责 90°、180°、270° 旋转以及水平和垂直翻转，预览即时可见。

这些工具背后的一个设计约束很实际：浏览器能解码的图片体量有上限。因此压缩和缩放工具都只处理单个文件，而不是整个文件夹。两者都通过 <canvas> 元素重新编码，保证像素不离开本机。

颜色与 CSS 工具：填平设计工具和代码之间的沟壑

设计稿给出的颜色记法，往往不是 CSS 需要的写法。HEX ↔ RGB Converter 在 HEX、RGB、RGBA 和 HSL 之间转换，并带实时预览，正好补上这个缺口。

配色方案生成器从任意基色出发，用互补、三角、类似或单色方案生成调色板。Gradient Generator 以可视化方式构建线性、径向和锥形 CSS 渐变，支持无限色标、角度控制和预设，完成后直接复制 CSS。Color Mixer 把两个十六进制颜色按 7 个线性 RGB 中点混合，可以单独复制色块，也能整体导出为 CSS 自定义属性。

可访问性检查同样在列。Contrast Checker 按 WCAG 2.1 检查前景色与背景色的对比度，给出正文和大号文字的 AA/AAA 通过或失败结果。这个工具的存在理由很直接：WCAG 2.1 要求正文文字对比度达到 4.5:1，而这个比例靠肉眼根本判断不准。

CSS Formatter 负责美化或压缩 CSS：用 2 空格、4 空格或制表符缩进排版，或压缩成单行，处理时会保留字符串值和 data URI。

WCAG 2.1 是万维网联盟（W3C）发布的《Web 内容无障碍指南》2.1 版，其中 1.4.3 条款对文本与背景的对比度提出了量化要求：正文文字至少达到 4.5:1，大号文字（约 18pt 或 14pt 加粗以上）至少达到 3:1，才能通过 AA 级。对比度按相对亮度计算，取值 1:1 到 21:1，公式涉及对每个 sRGB 通道先做伽马校正再加权求和。由于人眼对亮度的感知是非线性的，仅凭肉眼很难判断两个近似颜色是否达标，这才需要工具来计算。

照片效果与编辑：从灰度到标注

这一组工具更偏创意和日常修图，全部在浏览器内完成。

• Grayscale Converter：灰度、棕褐、高对比黑白或反色
• Brightness & Contrast：调整亮度、对比度和饱和度，可复制对应的 CSS filter 或保存全分辨率结果
• Duotone Generator：双色调效果，强度和混合模式可调
• Image Pixelator：方形块、扫描线或半调网点，滑块范围 2 到 64 像素
• Image Border：纯色边框、双线、拍立得白边或浮动阴影
• Watermark Tool：在任意角落叠加自定义文字，或平铺满帧，透明度与旋转可控
• Image Annotator：在截图上加箭头、形状、手绘、高亮和文字标签，支持撤销/重做和剪贴板粘贴

这些效果工具的共同点是“所见即所得”：调完之后要么导出图片，要么拿到能直接用的 CSS 代码。

值得关注的实用工具

Metadata Viewer 能读取照片里隐藏的 EXIF 数据，包括相机、镜头、快门速度、ISO、拍摄日期和 GPS 坐标。文件在浏览器内解析，从不上传。在公开分享照片前检查元数据，这本身就是一个隐私防护步骤。

QR Code Generator 从 URL、文本、邮件或电话号码生成二维码，可下载为 PNG。Wallet QR 更进一步，为 Ethereum、Bitcoin 或 Solana 地址生成 BIP-21 / EIP-681 支付二维码，自动识别链类型，并支持可选金额和标签。

SVG Optimizer 通过剥离编辑器元数据、取整路径数据、缩短颜色值和删除未使用 ID 来压缩 SVG，还带有像素比对，确认渲染结果没有变化。YouTube Thumbnail Grabber 则能拉取视频发布的各个尺寸缩略图，从 1280x720 往下都有，输出 JPG 或 WebP。

Images → PDF 和 PDF to Images 组成一组双向转换：把 JPG/PNG 合成单个 PDF，或把 PDF 页面导出为 72、150、300 dpi 的 PNG/JPEG，渲染在客户端由 PDF.js 完成。

EXIF（Exchangeable Image File Format）是嵌入在 JPEG、TIFF 等文件中的元数据标准，由日本电子工业发展协会（JEIDA）制定。它记录相机型号、镜头、光圈、快门、ISO、白平衡、拍摄时间等信息，智能手机还会写入 GPS 经纬度。这类数据在文件被分享到社交平台或论坛时通常不会被自动剥离，任何人都能读取，从而可能暴露拍摄位置或设备信息。多数图像处理软件在“另存为”时会重新编码，从而去掉 EXIF；而纯前端查看器只是解析读取，不会修改原文件，因此需要自行决定是否在发布前做一次清理。

BIP-21 是比特币社区提出的支付 URI 方案，格式形如 bitcoin:地址?amount=0.001&label=备注，钱包扫码后可直接预填收款地址和金额。EIP-681 是以太坊对应的标准，采用 ethereum:地址@链ID/函数名?参数 的写法，支持 ERC-20 转账等更复杂的调用。Solana 生态则使用类似 solana:地址?amount= 的简化格式。这些标准让二维码不只是字符串容器，而能携带链类型、金额和备注，减少手动输入地址时的出错概率。

设计决策：为什么只处理单个文件

这两个工具背后有两个明确的设计选择。

重操作一次只处理一个文件。 浏览器解码图片有体量上限，超过之后标签页就会崩溃。这就是为什么 Image Compressor 和 Image Resizer 每次只处理单个文件，而不是整个文件夹。两者都通过 <canvas> 重新编码，像素始终留在本机。

工具源于真实的挫败感。 Contrast Checker 的存在，是因为 WCAG 2.1 对正文文字有 4.5:1 的对比度要求，而肉眼无法准确判断。HEX to RGB converter 的存在，是因为 CSS 需要的记法经常和设计工具给出的一致不了。这些工具不是在堆功能，而是在填具体的坑。

浏览器处理图片通常走两条路径：一是 <canvas> 的 drawImage 与 toBlob，把图像解码到内存中的像素缓冲区再重新编码；二是 WebAssembly 版的编解码库（如 libvips、ImageMagick 的 WASM 移植）。无论哪种，解码后的位图都会完整驻留内存——一张 4000×3000 的 24 位照片就要约 36 MB，PNG 或高分辨率扫描件会更大。Chrome 等浏览器对单个标签页的内存有软上限，接近时会触发垃圾回收甚至崩溃，这就是批量处理容易失败的根本原因。

值得一试

整套 Image & Design 分类共 25 款工具，全部免费、无需注册、在浏览器内运行。对于经常处理截图、设计稿和敏感图片的开发者来说，本地处理省去的不只是上传等待时间，还有数据外泄的顾虑。你日常最重复的图像或设计任务是什么？这类工具能覆盖多少，剩下的又需要什么方案？这可能是下一步值得思考的方向。