[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f4Rw8bGsIfofJbqkzFQ-SjzNHSPtPiI8HB2ENhGOEB68":3},{"item":4,"related":47},{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":22,"sourceLabel":35,"sourceName":36,"sourceUrl":37,"status":38,"seoTitle":39,"seoDescription":40,"canonicalUrl":41,"isFeatured":42,"sno":43,"sortOrder":44,"publishedAt":45,"updatedAt":46,"createdAt":46},"4d5ad0ab-081e-433f-8aad-a951df4188f9","article","为什么同一张图片换个格式就小很多","webp-image-compression-explained","图片压缩并不是简单删除像素，而是利用相邻区域的规律减少需要保存的数据。本文解释 WebP 的有损与无损压缩，以及不同图片格式的适用场景。","同一张照片保存成不同格式，文件大小可能相差几倍。很多人把它理解成“格式不同，所以占用空间不同”，但格式只是容器，真正决定大小的是压缩算法如何利用图像中的规律，以及你愿意牺牲多少细节来换取更小的文件。\n\n## 图片里有大量可预测的信息\n\n相邻像素往往很相似：天空是一大片接近的蓝色，墙面是一块连续的颜色，照片里的边缘通常只在少数地方发生明显变化。压缩算法可以先预测某个区域应该长什么样，再只记录预测错误的部分。错误越小，需要存储的数据就越少。\n\nWebP 的有损压缩使用了和 VP8 视频关键帧相关的预测编码思路；无损压缩则尝试复用已经出现过的图像片段，在解码时准确还原原像素。两者的目标不同：有损压缩追求“人眼看起来接近但文件更小”，无损压缩追求“解压后和原图完全一致”。\n\n```mermaid\nflowchart LR\n    A[原始像素] --> B[寻找重复与可预测区域]\n    B --> C{是否允许丢失细节?}\n    C -->|允许| D[有损压缩]\n    C -->|不允许| E[无损压缩]\n    D --> F[更小文件与近似画面]\n    E --> G[可完全还原原像素]\n```\n\n## 为什么 PNG 不一定比 JPEG 小\n\nPNG 更擅长保存需要透明通道、文字边缘或大块纯色的图形，并支持无损压缩。JPEG 更适合照片，可以通过降低精度换取更小文件。若一张照片使用 PNG 保存，算法不愿丢掉任何像素细节，文件反而可能很大；如果一张简单图标使用 JPEG，压缩产生的边缘噪点又会很明显。\n\nWebP 同时支持有损、无损和透明度，因此可以覆盖更多场景。Google 的说明给出了一个有代表性的方向：在相近视觉质量下，WebP 往往比传统 PNG 或 JPEG 更节省空间，但具体大小仍取决于原图内容、编码参数和目标质量，不能把某个固定百分比当成所有图片的保证。\n\n## 小文件不是无条件的胜利\n\n压缩质量越低，文件越小，但细节、文字边缘和颜色过渡可能变差；质量越高，文件越大，下载和存储成本也会上升。图片还可能需要解码时间、透明背景、动画或编辑能力。给网页用的封面和给设计软件继续修改的源文件，适合的格式不一定相同。\n\n判断格式时可以先看内容：照片优先考虑有损格式，截图、图标和透明素材要看是否需要无损与 Alpha 通道，网页图片还要结合浏览器兼容性、加载速度和缓存策略。不要只追求“最小文件”，而要在画质、体积和用途之间找到平衡。\n\n来源：[Google Developers：WebP 图片格式](https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fwebp)","\u002Fuploads\u002F2026-09-12\u002Fa39cdc32-db5e-4659-805f-74df02adcbeb.jpg",[],[],"Foundit","https:\u002F\u002Ffoundit.cn","foundit-ai-editorial",{"id":18,"name":19,"slug":20,"description":21},"6179d3b6-dc34-4483-9ded-3cd9f1b37a47","科普","abbreviation","介绍各领域新兴概念",[23,27,31],{"id":24,"name":25,"slug":26},"7c76bfc2-f80f-4ee0-a95d-27bd8708b434","技术","slug",{"id":28,"name":29,"slug":30},"82f427f8-6275-4cbb-bcac-cf1948488006","网页应用","web-app",{"id":32,"name":33,"slug":34},"7da20200-5815-42a5-851a-bc8c1db554cb","应用","app","Google WebP 官方说明","An image format for the Web","https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fwebp","published","WebP 图片压缩原理：为什么换格式后文件更小","用通俗方式解释有损压缩、无损压缩和预测编码，帮助读者理解 WebP、JPEG 与 PNG 的区别。",null,false,55,0,"2026-09-12T00:00:00.000Z","2026-09-12T04:45:46.282Z",[48,56,65],{"id":49,"type":6,"title":50,"slug":51,"summary":52,"coverUrl":53,"authorName":14,"sno":54,"publishedAt":45,"createdAt":55},"d8cd5ddb-84fe-406c-9e2d-49a74aa73aed","网站为什么越来越少让你拼图验证“我是人”","captcha-turnstile-how-human-verification-works","新一代人机验证会在浏览器后台运行挑战并生成短期令牌，再由网站服务器确认结果。本文解释它为什么减少交互、如何防止重放，以及它的误判边界。","\u002Fuploads\u002F2026-09-12\u002F6d69d6f0-e936-4c53-92e2-3412dd3fde18.jpg",44,"2026-09-12T04:45:49.580Z",{"id":57,"type":6,"title":58,"slug":59,"summary":60,"coverUrl":61,"authorName":14,"sno":62,"publishedAt":63,"createdAt":64},"e5b311d7-121f-4fd2-bac6-d7b9f4bee903","PDF 里的电子签名，为什么不是贴一张手写图片","pdf-digital-signature-how-it-works","手写签名图片只能说明页面上有一张图，PDF 数字签名则通过私钥、公钥和数字证书验证签名者身份，并检测签名后的文档是否被修改。本文解释两者的关键差别。","\u002Fuploads\u002F2026-09-13\u002F166eb6f1-a717-4cc5-a869-cc1d99584037.jpg",46,"2026-09-13T00:00:00.000Z","2026-09-13T09:35:50.299Z",{"id":66,"type":6,"title":67,"slug":68,"summary":69,"coverUrl":70,"authorName":14,"sno":71,"publishedAt":45,"createdAt":72},"d2c41fc9-7291-4a0e-b404-873b80d4c351","浏览器地址栏的小锁到底保证了什么","https-tls-browser-lock-meaning","HTTPS 和 TLS 可以保护浏览器与网站之间的数据机密性、完整性和服务器身份，但小锁不能证明网站没有诈骗或内容一定真实。","\u002Fuploads\u002F2026-09-12\u002F2e79166a-07ac-4508-81ed-c1cf2afa51e5.jpg",49,"2026-09-12T04:45:48.162Z"]