网页图片格式怎么选：JPG、PNG、WebP 使用与压缩实践Choosing Web Image Formats: JPG, PNG, WebP and Compression in Practice
图片通常占网页体积的一半以上。本文对比三大格式的特点与适用场景，给出选型决策路径与压缩参数建议，帮你把页面加载速度提一个档次。Images typically account for over half of a page’s weight. This article compares the three major formats, offers a decision path and compression settings, and helps you move your page load time up a class.
三大格式的特点与适用场景Strengths and use cases of the big three
JPG 擅长照片类连续色调图像，体积小、兼容性好，但不支持透明、反复编辑会累积损失。PNG 无损、支持透明，适合图标、截图、线框图等需要锐利边缘的素材，代价是照片类内容体积大。WebP 在同等画质下体积通常比 JPG 小 25–35%，同时支持透明与动图，是现代网页的默认推荐。JPG excels at photographic, continuous-tone images: small and universally supported, but no transparency and lossy across edits. PNG is lossless with transparency, ideal for icons, screenshots and line art needing crisp edges — at the cost of large photo sizes. WebP typically runs 25–35% smaller than JPG at equal quality, supports transparency and animation, and is the modern default.
一句话选型：照片用 WebP（兼容兜底 JPG），透明与锐利边缘用 PNG（或 WebP），图标小图优先考虑 SVG 矢量。One-line rule: photos in WebP (JPG as compatibility fallback), transparency and crisp edges in PNG (or WebP), and small icons preferably as SVG vectors.
压缩参数怎么定Dialing in compression settings
有损压缩的质量参数建议在 70–80 起步试：多数照片在该区间肉眼几乎无感，体积却能下降一半以上。带文字或线条的图（截图、海报）要调高质量或改用无损，否则文字边缘会出现振铃伪影。Start lossy quality around 70–80: most photos look identical to the eye there while shedding over half their bytes. For text- or line-heavy images (screenshots, posters), raise quality or go lossless, or text edges will ring.
压缩前先把尺寸裁到实际展示大小——一张 4000px 的原图显示在 800px 的容器里，是纯粹的浪费。尺寸 + 质量两手一起抓，收益最大。Before compressing, resize to the actual display dimensions — a 4000px original shown in an 800px container is pure waste. Combining resizing with quality tuning yields the biggest wins.
隐私与流程：本地处理更安心Privacy and workflow: local processing is safer
不少在线压缩服务需要把图片上传到服务器，对含人脸、证件、商业素材的图片是实实在在的隐私风险。浏览器本地处理（Canvas/WebCodecs 等能力已足够成熟）可以做到“图片不出设备”，速度与隐私兼得。Many online compression services upload your images — a real privacy risk for faces, IDs and commercial assets. Browser-local processing (Canvas and WebCodecs are mature enough) keeps images on your device, winning both speed and privacy.
本站的图片压缩与格式转换工具均在浏览器本地完成，适合处理敏感素材；批量场景建议先拿一两张定好参数，再统一应用。Our image compression and conversion tools run entirely in your browser, suiting sensitive material; for batches, finalise settings on one or two samples first, then apply uniformly.