[{"data":1,"prerenderedAt":54},["ShallowReactive",2],{"i-lucide:menu":3,"i-lucide:grip":8,"i-lucide:chevron-right":10,"i-lucide:moon":12,"i-lucide:sun":14,"i-material-symbols:language":16,"i-lucide:chevron-down":18,"i-lucide:shield-check":20,"i-lucide:mail":22,"i-tabler:markdown":24,"i-lucide:code-xml":26,"i-lucide:film":28,"i-lucide:file-text":30,"i-lucide:box":32,"i-lucide:code-2":34,"i-lucide:image":35,"i-lucide:square-sigma":37,"i-lucide:gamepad-2":39,"i-lucide:sparkles":41,"i-lucide:graduation-cap":43,"blog-body-image-format-compression-choice-zh":45,"i-lucide:scale":46,"i-lucide:code":48,"i-lucide:image-down":50,"i-lucide:replace":52},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5h16M4 12h16M4 19h16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"5\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"12\" r=\"1\"\u002F>\u003Ccircle cx=\"12\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"19\" cy=\"19\" r=\"1\"\u002F>\u003Ccircle cx=\"5\" cy=\"19\" r=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 18l6-6l-6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"currentColor\" d=\"M8.125 21.213q-1.825-.788-3.187-2.15t-2.15-3.188T2 11.988t.788-3.875t2.15-3.175t3.187-2.15T12.013 2t3.875.788t3.175 2.15t2.15 3.175t.787 3.875t-.787 3.887t-2.15 3.188t-3.175 2.15t-3.875.787t-3.888-.787M12 19.95q.65-.9 1.125-1.875T13.9 16h-3.8q.3 1.1.775 2.075T12 19.95m-2.6-.4q-.45-.825-.787-1.713T8.05 16H5.1q.725 1.25 1.813 2.175T9.4 19.55m5.2 0q1.4-.45 2.488-1.375T18.9 16h-2.95q-.225.95-.562 1.838T14.6 19.55M4.25 14h3.4q-.075-.5-.112-.987T7.5 12t.038-1.012T7.65 10h-3.4q-.125.5-.187.988T4 12t.063 1.013t.187.987m5.4 0h4.7q.075-.5.113-.987T14.5 12t-.038-1.012T14.35 10h-4.7q-.075.5-.112.988T9.5 12t.038 1.013t.112.987m6.7 0h3.4q.125-.5.188-.987T20 12t-.062-1.012T19.75 10h-3.4q.075.5.113.988T16.5 12t-.038 1.013t-.112.987m-.4-6h2.95q-.725-1.25-1.812-2.175T14.6 4.45q.45.825.788 1.713T15.95 8M10.1 8h3.8q-.3-1.1-.775-2.075T12 4.05q-.65.9-1.125 1.875T10.1 8m-5 0h2.95q.225-.95.563-1.838T9.4 4.45Q8 4.9 6.912 5.825T5.1 8\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\u002F>\u003Cpath d=\"m9 12l2 2l4-4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":23},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"\u002F>\u003Crect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":25},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\u002F>\u003Cpath d=\"M7 15V9l2 2l2-2v6m3-2l2 2l2-2m-2 2V9\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":27},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m18 16l4-4l-4-4M6 8l-4 4l4 4m8.5-12l-5 16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":29},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M7 3v18M3 7.5h4M3 12h18M3 16.5h4M17 3v18m0-13.5h4m-4 9h4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":31},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":33},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\u002F>\u003Cpath d=\"m3.3 7l8.7 5l8.7-5M12 22V12\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":27},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":36},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"\u002F>\u003Ccircle cx=\"9\" cy=\"9\" r=\"2\"\u002F>\u003Cpath d=\"m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":38},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M16 8.9V7H8l4 5l-4 5h8v-1.9\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":40},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 11h4M8 9v4m7-1h.01M18 10h.01m-.69-5H6.68a4 4 0 0 0-3.978 3.59l-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258q-.01-.075-.017-.151A4 4 0 0 0 17.32 5\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":42},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594zM20 2v4m2-2h-4\"\u002F>\u003Ccircle cx=\"4\" cy=\"20\" r=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":44},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0zM22 10v6\"\u002F>\u003Cpath d=\"M6 12.5V16a6 3 0 0 0 12 0v-3.5\"\u002F>\u003C\u002Fg>","\u003Cblockquote>\n\u003Cp>同一张图，存成 PNG 是 2MB，转成 JPG 只剩 200KB，再转 WebP 可能不到 150KB。差距从哪来？关键不是"哪个格式更好"，而是\u003Cstrong>你的图是什么内容、要给谁用\u003C\u002Fstrong>。搞懂压缩到底压掉了什么，就能不靠猜地选对格式。\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cimg src=\"\u002Fblog\u002Fimage-format-compression-choice\u002Fcover.webp\" alt=\"同一张图不同格式的体积差异\">\u003C\u002Fp>\n\u003Ch2>压缩分两种：有损和无损\u003C\u002Fh2>\n\u003Cp>先建立最重要的分界：图片压缩分\u003Cstrong>有损\u003C\u002Fstrong>和\u003Cstrong>无损\u003C\u002Fstrong>两类，它们的取舍完全不同。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>无损压缩\u003C\u002Fstrong>：还原后和原图逐像素一致，一个字节不差。靠的是找规律编码（如游程、字典），对\u003Cstrong>大片相同色块\u003C\u002Fstrong>特别有效。PNG、WebP 无损、GIF 属此类。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>有损压缩\u003C\u002Fstrong>：主动丢弃人眼不敏感的信息换体积，无法完全还原。对\u003Cstrong>色彩连续的照片\u003C\u002Fstrong>效果惊人。JPG、WebP 有损、AVIF 属此类。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>一句话抓住本质：\u003Cstrong>无损擅长"规律性强"的图（截图、图标、纯色），有损擅长"色彩连续"的图（照片、渐变）。\u003C\u002Fstrong> 选格式的第一刀，就是先判断你的图属于哪一类。\u003C\u002Fp>\n\u003Ch2>有损为什么对照片特别有效？\u003C\u002Fh2>\n\u003Cp>因为照片的色彩是\u003Cstrong>连续平滑\u003C\u002Fstrong>变化的，而人眼对细微的颜色\u002F亮度变化不敏感。JPG 的做法是把图切成 8×8 小块，对每块做 DCT 频率变换，再\u003Cstrong>量化掉人眼看不出的高频细节\u003C\u002Fstrong>——丢掉的正是你本来就察觉不到的部分，所以体积大降而观感几乎不变。\u003C\u002Fp>\n\u003Cp>但这套对照片有效的逻辑，遇到\u003Cstrong>文字、线条、纯色边界\u003C\u002Fstrong>就翻车：这些内容是"高频突变"（黑字白底的边缘），量化会在边界周围产生振铃和块状伪影，也就是常说的"脏边"。这解释了一个高频踩坑：\u003Cstrong>把文字截图存成 JPG 会糊、会脏，而存成 PNG 干净又不一定更大。\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Ch2>透明、动画这些附加能力\u003C\u002Fh2>\n\u003Cp>除了压缩方式，格式还差在支持哪些能力，这往往是硬性约束：\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>能力\u003C\u002Fth>\n\u003Cth>JPG\u003C\u002Fth>\n\u003Cth>PNG\u003C\u002Fth>\n\u003Cth>WebP\u003C\u002Fth>\n\u003Cth>AVIF\u003C\u002Fth>\n\u003Cth>GIF\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>有损压缩\u003C\u002Ftd>\n\u003Ctd>✓\u003C\u002Ftd>\n\u003Ctd>✗\u003C\u002Ftd>\n\u003Ctd>✓\u003C\u002Ftd>\n\u003Ctd>✓\u003C\u002Ftd>\n\u003Ctd>✗\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>无损压缩\u003C\u002Ftd>\n\u003Ctd>✗\u003C\u002Ftd>\n\u003Ctd>✓\u003C\u002Ftd>\n\u003Ctd>✓\u003C\u002Ftd>\n\u003Ctd>✓\u003C\u002Ftd>\n\u003Ctd>✓(256色)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>透明通道\u003C\u002Ftd>\n\u003Ctd>✗\u003C\u002Ftd>\n\u003Ctd>✓\u003C\u002Ftd>\n\u003Ctd>✓\u003C\u002Ftd>\n\u003Ctd>✓\u003C\u002Ftd>\n\u003Ctd>✓(1bit)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>动画\u003C\u002Ftd>\n\u003Ctd>✗\u003C\u002Ftd>\n\u003Ctd>✗\u003C\u002Ftd>\n\u003Ctd>✓\u003C\u002Ftd>\n\u003Ctd>✓\u003C\u002Ftd>\n\u003Ctd>✓\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>兼容性\u003C\u002Ftd>\n\u003Ctd>极广\u003C\u002Ftd>\n\u003Ctd>极广\u003C\u002Ftd>\n\u003Ctd>好\u003C\u002Ftd>\n\u003Ctd>一般\u003C\u002Ftd>\n\u003Ctd>极广\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>几条直接的结论：\u003Cstrong>要透明背景就别用 JPG\u003C\u002Fstrong>（它根本不支持）；要做动图，WebP\u002FAVIF 比 GIF 体积小画质好；但要最大兼容性（任何老设备、任何软件都能开），JPG\u002FPNG 仍是最稳的。\u003C\u002Fp>\n\u003Ch2>WebP、AVIF 到底强多少？\u003C\u002Fh2>\n\u003Cp>WebP 和 AVIF 是"新一代"格式，优势是\u003Cstrong>同画质下更小、且有损无损透明动画通吃\u003C\u002Fstrong>。粗略地说：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>WebP\u003C\u002Fstrong>：同等画质比 JPG 小约 25%–35%，无损模式比 PNG 也常更小。浏览器兼容性如今已经很好，是网页配图的稳妥默认。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>AVIF\u003C\u002Fstrong>：压缩率比 WebP 更高，尤其低码率下画质更好。代价是\u003Cstrong>编码较慢、老环境兼容性还不够、解码开销略大\u003C\u002Fstrong>。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>它们不是没有代价：越新的格式，编码越慢、越可能在某些老软件\u002F系统里打不开。所以"要不要换"取决于用在哪——网页可以放心上 WebP，发给别人的文件还是兼容性优先。\u003C\u002Fp>\n\u003Ch2>一张表直接照着选\u003C\u002Fh2>\n\u003Cp>把内容类型和用途对齐，选择就不用纠结：\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>你的图是\u003C\u002Fth>\n\u003Cth>用途\u003C\u002Fth>\n\u003Cth>推荐格式\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>照片、渐变、色彩丰富\u003C\u002Ftd>\n\u003Ctd>网页\u003C\u002Ftd>\n\u003Ctd>WebP（兼容兜底 JPG）\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>照片\u003C\u002Ftd>\n\u003Ctd>发文件\u002F最大兼容\u003C\u002Ftd>\n\u003Ctd>JPG\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>截图、文字、UI、线条\u003C\u002Ftd>\n\u003Ctd>任意\u003C\u002Ftd>\n\u003Ctd>PNG 或 WebP 无损\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>需要透明背景\u003C\u002Ftd>\n\u003Ctd>任意\u003C\u002Ftd>\n\u003Ctd>PNG \u002F WebP \u002F AVIF\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>图标、Logo（矢量可得时）\u003C\u002Ftd>\n\u003Ctd>网页\u003C\u002Ftd>\n\u003Ctd>SVG（非位图，最清晰最小）\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>动图\u003C\u002Ftd>\n\u003Ctd>网页\u003C\u002Ftd>\n\u003Ctd>WebP\u002FAVIF；兼容用 GIF\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>极致体积、可控环境\u003C\u002Ftd>\n\u003Ctd>网页\u003C\u002Ftd>\n\u003Ctd>AVIF\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>补一句常被忽略的：\u003Cstrong>矢量图（图标、Logo）能拿到 SVG 就别转位图\u003C\u002Fstrong>——它是数学描述的曲线，任意缩放都清晰、体积还小，根本不参与 JPG\u002FPNG 这套位图压缩的讨论。\u003C\u002Fp>\n\u003Ch2>实操：先压还是先转？\u003C\u002Fh2>\n\u003Cp>明确了选哪种格式后，常见两类操作：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>同格式压小\u003C\u002Fstrong>：图已经是对的格式，只是太大。用 \u003Ca href=\"\u002Fimages\u002Fcompress\u002F\">图片压缩工具\u003C\u002Fa> 调压缩级别，在体积和画质间找平衡——照片可以压得狠些，文字图保守些。\u003C\u002Fli>\n\u003Cli>\u003Cstrong>换格式\u003C\u002Fstrong>：比如把一批 PNG 转成 WebP 给网站提速，或把 WebP 转回 JPG 方便发给不支持的设备。用 \u003Ca href=\"\u002Fimages\u002FimageFormatConvert\u002F\">图片格式转换\u003C\u002Fa> 批量转并设质量参数。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>顺序上通常是\u003Cstrong>先按内容选对格式，再在该格式内压到合适体积\u003C\u002Fstrong>；先压后转容易二次劣化。两个工具都在浏览器本地处理，不上传图片。\u003C\u002Fp>\n\u003Ch2>小结\u003C\u002Fh2>\n\u003Cp>图片压缩先分有损无损：无损擅长截图\u002F图标\u002F纯色，有损擅长照片\u002F渐变；JPG 用频率量化压照片很猛，但遇文字会出脏边，所以截图该用 PNG。透明、动画是硬性能力差异，要透明别用 JPG。WebP 同画质更小、能力全面，是网页默认之选；AVIF 更小但编码慢、兼容性弱；发文件求兼容仍用 JPG\u002FPNG；矢量图标尽量用 SVG。照着内容+用途的决策表选格式，再用 \u003Ca href=\"\u002Fimages\u002Fcompress\u002F\">压缩\u003C\u002Fa> 或 \u003Ca href=\"\u002Fimages\u002FimageFormatConvert\u002F\">格式转换\u003C\u002Fa> 落地即可。\u003C\u002Fp>\n",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":47},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M12 3v18m7-13l3 8a5 5 0 0 1-6 0zV7\"\u002F>\u003Cpath d=\"M3 7h1a17 17 0 0 0 8-2a17 17 0 0 0 8 2h1M5 8l3 8a5 5 0 0 1-6 0zV7m2 14h10\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":49},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 18l6-6l-6-6M8 6l-6 6l6 6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":51},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21\"\u002F>\u003Cpath d=\"m14 19l3 3v-5.5m0 5.5l3-3\"\u002F>\u003Ccircle cx=\"9\" cy=\"9\" r=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":53},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M14 4a1 1 0 0 1 1-1m0 7a1 1 0 0 1-1-1m7-5a1 1 0 0 0-1-1m1 6a1 1 0 0 1-1 1M3 7l3 3l3-3\"\u002F>\u003Cpath d=\"M6 10V5a2 2 0 0 1 2-2h2\"\u002F>\u003Crect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\"\u002F>\u003C\u002Fg>",1782539693039]