浏览器中的栅格图像
栅格图像由像素网格和元数据组成,包括宽度、高度、颜色通道以及决定像素存储方式的容器格式。JPEG、PNG 和 WebP 在压缩率、颜色保真度、透明度和兼容性之间各有取舍。本工具系列完全在浏览器中完成转换、缩放、信息检查和颜色采样,不会把文件字节上传到服务器。
若要把照片转换成更小的 WebP 文件,可使用从 JPG 转为 WEBP。目标格式应由下游用途决定:旧版 CMS、文件大小限制、需要 alpha 通道的设计系统,或性能预算。
格式与处理流程
JPEG 适合有损压缩照片,但没有 alpha 通道。以更低质量再次编码会继续丢失信息;JPEG 转 PNG 不能找回先前失去的细节。PNG 无损且支持透明度,适合界面和截图,但照片型 PNG 往往更大。WebP 同时提供有损和无损模式,通常能以相近视觉质量获得更小文件。
处理流程是读取本地 File,解码为 bitmap,在指定尺寸的 canvas 上绘制,再以目标 MIME 类型和可选质量导出并下载。质量滑块影响 JPEG 和有损 WebP;PNG 对 canvas 缓冲区仍是无损的。把带透明度的 PNG 或 WebP 转为 JPEG 时,透明区域通常会合成到纯色背景上。
本系列工具
尺寸、元数据与限制
只指定宽度或高度即可保持纵横比。缩小有助于网页性能;放大只能凭空补像素,无法恢复真实光学细节。文件体积和解码后的兆像素回答的是不同问题,获取图像信息会同时显示它们。Canvas 是像素处理管线,不是完整 EXIF 档案:显示时可能应用方向信息,但 GPS 和相机标签通常不会随导出保留。
调色板提取会在可选下采样后统计或聚类颜色,提供可用于 CSS 的 hex/RGB 样本。sRGB 假设和 JPEG 色度子采样会影响结果。避免 JPEG → WebP → JPEG 这样的重复有损链;WebP 的质量 80 与 JPEG 的 80 并非数值等价。超大图像可能耗尽标签页内存,CMYK TIFF 和多帧动画也不属于预期流程。请保留主文件,并从主文件只生成一次交付编码。