[{"data":1,"prerenderedAt":841},["ShallowReactive",2],{"content-/topics/engineering/image-optimization-webp-avif-cdn-guide":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"category":5,"tags":11,"author":17,"featured":18,"series":19,"seriesOrder":20,"readingTime":21,"image":22,"body":23,"_type":835,"_id":836,"_source":837,"_file":838,"_stem":839,"_extension":840},"/topics/engineering/image-optimization-webp-avif-cdn-guide","engineering",false,"","自建 CDN 与图片优化：WebP、AVIF 不是一键换格式就完事","图片优化最常见的误区，是把它理解成“把 JPG 批量转 WebP”。本文从格式选择、响应式尺寸、首屏优先级、CDN 变换与缓存治理切入，给你一套真正能拉动 LCP 和带宽成本的图片方案。","2026-04-25",[12,13,14,15,16],"图片优化","WebP","AVIF","CDN","LCP","小明",true,"web-performance-extreme",5,14,"/images/articles/image-optimization-webp-avif-cdn-guide-cover.jpg",{"type":24,"children":25,"toc":814},"root",[26,34,40,60,65,88,93,98,107,111,118,123,128,151,156,159,165,172,177,280,285,308,314,319,324,327,333,338,343,491,502,505,511,517,522,545,551,556,561,564,570,575,599,604,607,613,618,633,638,652,657,675,678,684,690,695,701,706,712,717,720,726,731,759,764,767,772,795,800,808],{"type":27,"tag":28,"props":29,"children":31},"element","h1",{"id":30},"自建-cdn-与图片优化webpavif-不是一键换格式就完事",[32],{"type":33,"value":8},"text",{"type":27,"tag":35,"props":36,"children":37},"p",{},[38],{"type":33,"value":39},"图片优化这件事，特别容易被做成流水线手工活：",{"type":27,"tag":41,"props":42,"children":43},"ul",{},[44,50,55],{"type":27,"tag":45,"props":46,"children":47},"li",{},[48],{"type":33,"value":49},"原图太大，压缩一下",{"type":27,"tag":45,"props":51,"children":52},{},[53],{"type":33,"value":54},"再转成 WebP",{"type":27,"tag":45,"props":56,"children":57},{},[58],{"type":33,"value":59},"如果还不满意，就试试 AVIF",{"type":27,"tag":35,"props":61,"children":62},{},[63],{"type":33,"value":64},"然后团队很快就会遇到第二层问题：",{"type":27,"tag":41,"props":66,"children":67},{},[68,73,78,83],{"type":27,"tag":45,"props":69,"children":70},{},[71],{"type":33,"value":72},"为什么转了格式，LCP 还是一般",{"type":27,"tag":45,"props":74,"children":75},{},[76],{"type":33,"value":77},"为什么移动端还在下载超大图",{"type":27,"tag":45,"props":79,"children":80},{},[81],{"type":33,"value":82},"为什么缓存命中率不高，CDN 成本还上去了",{"type":27,"tag":45,"props":84,"children":85},{},[86],{"type":33,"value":87},"为什么部分设备兼容奇怪，客服又开始收截图",{"type":27,"tag":35,"props":89,"children":90},{},[91],{"type":33,"value":92},"这说明图片优化不是“文件格式问题”，而是一个完整的分发系统问题。",{"type":27,"tag":35,"props":94,"children":95},{},[96],{"type":33,"value":97},"真正要回答的是：",{"type":27,"tag":99,"props":100,"children":101},"blockquote",{},[102],{"type":27,"tag":35,"props":103,"children":104},{},[105],{"type":33,"value":106},"什么图片、在什么设备、以什么尺寸、在什么时机、通过哪一层缓存送到用户手里？",{"type":27,"tag":108,"props":109,"children":110},"hr",{},[],{"type":27,"tag":112,"props":113,"children":115},"h2",{"id":114},"_1-图片为什么总是性能黑洞",[116],{"type":33,"value":117},"1. 图片为什么总是性能黑洞",{"type":27,"tag":35,"props":119,"children":120},{},[121],{"type":33,"value":122},"因为图片占的不是“一个资源请求”，而是用户带宽预算里最贵的那一部分。",{"type":27,"tag":35,"props":124,"children":125},{},[126],{"type":33,"value":127},"它的典型特点是：",{"type":27,"tag":41,"props":129,"children":130},{},[131,136,141,146],{"type":27,"tag":45,"props":132,"children":133},{},[134],{"type":33,"value":135},"字节大",{"type":27,"tag":45,"props":137,"children":138},{},[139],{"type":33,"value":140},"数量多",{"type":27,"tag":45,"props":142,"children":143},{},[144],{"type":33,"value":145},"容易影响 LCP",{"type":27,"tag":45,"props":147,"children":148},{},[149],{"type":33,"value":150},"对设备、网络、屏幕尺寸高度敏感",{"type":27,"tag":35,"props":152,"children":153},{},[154],{"type":33,"value":155},"因此只做单点优化，比如只换格式，效果有限。图片问题要从“供应链”治理。",{"type":27,"tag":108,"props":157,"children":158},{},[],{"type":27,"tag":112,"props":160,"children":162},{"id":161},"_2-格式选择别再拿-avif-当通用圣杯",[163],{"type":33,"value":164},"2. 格式选择：别再拿 AVIF 当通用圣杯",{"type":27,"tag":166,"props":167,"children":169},"h3",{"id":168},"_21-jpegpngwebpavif-各自擅长什么",[170],{"type":33,"value":171},"2.1 JPEG、PNG、WebP、AVIF 各自擅长什么",{"type":27,"tag":35,"props":173,"children":174},{},[175],{"type":33,"value":176},"一个足够实用的判断是：",{"type":27,"tag":178,"props":179,"children":180},"table",{},[181,205],{"type":27,"tag":182,"props":183,"children":184},"thead",{},[185],{"type":27,"tag":186,"props":187,"children":188},"tr",{},[189,195,200],{"type":27,"tag":190,"props":191,"children":192},"th",{},[193],{"type":33,"value":194},"格式",{"type":27,"tag":190,"props":196,"children":197},{},[198],{"type":33,"value":199},"适合场景",{"type":27,"tag":190,"props":201,"children":202},{},[203],{"type":33,"value":204},"主要特点",{"type":27,"tag":206,"props":207,"children":208},"tbody",{},[209,228,246,263],{"type":27,"tag":186,"props":210,"children":211},{},[212,218,223],{"type":27,"tag":213,"props":214,"children":215},"td",{},[216],{"type":33,"value":217},"JPEG",{"type":27,"tag":213,"props":219,"children":220},{},[221],{"type":33,"value":222},"照片类内容",{"type":27,"tag":213,"props":224,"children":225},{},[226],{"type":33,"value":227},"兼容稳定，压缩成熟",{"type":27,"tag":186,"props":229,"children":230},{},[231,236,241],{"type":27,"tag":213,"props":232,"children":233},{},[234],{"type":33,"value":235},"PNG",{"type":27,"tag":213,"props":237,"children":238},{},[239],{"type":33,"value":240},"透明图、简单图形",{"type":27,"tag":213,"props":242,"children":243},{},[244],{"type":33,"value":245},"透明支持好，但体积常偏大",{"type":27,"tag":186,"props":247,"children":248},{},[249,253,258],{"type":27,"tag":213,"props":250,"children":251},{},[252],{"type":33,"value":13},{"type":27,"tag":213,"props":254,"children":255},{},[256],{"type":33,"value":257},"通用 Web 图片",{"type":27,"tag":213,"props":259,"children":260},{},[261],{"type":33,"value":262},"在体积与兼容性上很均衡",{"type":27,"tag":186,"props":264,"children":265},{},[266,270,275],{"type":27,"tag":213,"props":267,"children":268},{},[269],{"type":33,"value":14},{"type":27,"tag":213,"props":271,"children":272},{},[273],{"type":33,"value":274},"高压缩要求、高质量图片",{"type":27,"tag":213,"props":276,"children":277},{},[278],{"type":33,"value":279},"更省字节，但编码/解码成本更复杂",{"type":27,"tag":35,"props":281,"children":282},{},[283],{"type":33,"value":284},"所以现实建议通常是：",{"type":27,"tag":41,"props":286,"children":287},{},[288,293,298,303],{"type":27,"tag":45,"props":289,"children":290},{},[291],{"type":33,"value":292},"默认优先 WebP",{"type":27,"tag":45,"props":294,"children":295},{},[296],{"type":33,"value":297},"对高价值大图尝试 AVIF",{"type":27,"tag":45,"props":299,"children":300},{},[301],{"type":33,"value":302},"对透明需求保留 PNG 或 WebP alpha",{"type":27,"tag":45,"props":304,"children":305},{},[306],{"type":33,"value":307},"对老旧兼容场景保底 JPEG/PNG",{"type":27,"tag":166,"props":309,"children":311},{"id":310},"_22-真正的关键不是最小而是总体最划算",[312],{"type":33,"value":313},"2.2 真正的关键不是“最小”，而是“总体最划算”",{"type":27,"tag":35,"props":315,"children":316},{},[317],{"type":33,"value":318},"如果 AVIF 省下 20% 体积，却带来了更复杂的处理链和更高的解码代价，那是否值得要看页面场景。",{"type":27,"tag":35,"props":320,"children":321},{},[322],{"type":33,"value":323},"技术选型不是比谁更先进，而是比谁的总成本更低。",{"type":27,"tag":108,"props":325,"children":326},{},[],{"type":27,"tag":112,"props":328,"children":330},{"id":329},"_3-响应式尺寸比格式更能决定体验上限",[331],{"type":33,"value":332},"3. 响应式尺寸，比格式更能决定体验上限",{"type":27,"tag":35,"props":334,"children":335},{},[336],{"type":33,"value":337},"最常见的浪费不是“格式老”，而是“尺寸错”。",{"type":27,"tag":35,"props":339,"children":340},{},[341],{"type":33,"value":342},"移动端展示宽度 360px，却下载了一张 1600px 的大图，这种浪费比格式选择的影响更直接。",{"type":27,"tag":344,"props":345,"children":349},"pre",{"className":346,"code":347,"language":348,"meta":7,"style":7},"language-html shiki shiki-themes github-dark","\u003Cimg\n  src=\"/images/cover-800.webp\"\n  srcset=\"/images/cover-400.webp 400w, /images/cover-800.webp 800w, /images/cover-1200.webp 1200w\"\n  sizes=\"(max-width: 768px) 100vw, 50vw\"\n  width=\"800\"\n  height=\"500\"\n  alt=\"文章封面\"\n/>\n","html",[350],{"type":27,"tag":351,"props":352,"children":353},"code",{"__ignoreMap":7},[354,372,393,411,429,446,464,482],{"type":27,"tag":355,"props":356,"children":359},"span",{"class":357,"line":358},"line",1,[360,366],{"type":27,"tag":355,"props":361,"children":363},{"style":362},"--shiki-default:#E1E4E8",[364],{"type":33,"value":365},"\u003C",{"type":27,"tag":355,"props":367,"children":369},{"style":368},"--shiki-default:#85E89D",[370],{"type":33,"value":371},"img\n",{"type":27,"tag":355,"props":373,"children":375},{"class":357,"line":374},2,[376,382,387],{"type":27,"tag":355,"props":377,"children":379},{"style":378},"--shiki-default:#B392F0",[380],{"type":33,"value":381},"  src",{"type":27,"tag":355,"props":383,"children":384},{"style":362},[385],{"type":33,"value":386},"=",{"type":27,"tag":355,"props":388,"children":390},{"style":389},"--shiki-default:#9ECBFF",[391],{"type":33,"value":392},"\"/images/cover-800.webp\"\n",{"type":27,"tag":355,"props":394,"children":396},{"class":357,"line":395},3,[397,402,406],{"type":27,"tag":355,"props":398,"children":399},{"style":378},[400],{"type":33,"value":401},"  srcset",{"type":27,"tag":355,"props":403,"children":404},{"style":362},[405],{"type":33,"value":386},{"type":27,"tag":355,"props":407,"children":408},{"style":389},[409],{"type":33,"value":410},"\"/images/cover-400.webp 400w, /images/cover-800.webp 800w, /images/cover-1200.webp 1200w\"\n",{"type":27,"tag":355,"props":412,"children":414},{"class":357,"line":413},4,[415,420,424],{"type":27,"tag":355,"props":416,"children":417},{"style":378},[418],{"type":33,"value":419},"  sizes",{"type":27,"tag":355,"props":421,"children":422},{"style":362},[423],{"type":33,"value":386},{"type":27,"tag":355,"props":425,"children":426},{"style":389},[427],{"type":33,"value":428},"\"(max-width: 768px) 100vw, 50vw\"\n",{"type":27,"tag":355,"props":430,"children":431},{"class":357,"line":20},[432,437,441],{"type":27,"tag":355,"props":433,"children":434},{"style":378},[435],{"type":33,"value":436},"  width",{"type":27,"tag":355,"props":438,"children":439},{"style":362},[440],{"type":33,"value":386},{"type":27,"tag":355,"props":442,"children":443},{"style":389},[444],{"type":33,"value":445},"\"800\"\n",{"type":27,"tag":355,"props":447,"children":449},{"class":357,"line":448},6,[450,455,459],{"type":27,"tag":355,"props":451,"children":452},{"style":378},[453],{"type":33,"value":454},"  height",{"type":27,"tag":355,"props":456,"children":457},{"style":362},[458],{"type":33,"value":386},{"type":27,"tag":355,"props":460,"children":461},{"style":389},[462],{"type":33,"value":463},"\"500\"\n",{"type":27,"tag":355,"props":465,"children":467},{"class":357,"line":466},7,[468,473,477],{"type":27,"tag":355,"props":469,"children":470},{"style":378},[471],{"type":33,"value":472},"  alt",{"type":27,"tag":355,"props":474,"children":475},{"style":362},[476],{"type":33,"value":386},{"type":27,"tag":355,"props":478,"children":479},{"style":389},[480],{"type":33,"value":481},"\"文章封面\"\n",{"type":27,"tag":355,"props":483,"children":485},{"class":357,"line":484},8,[486],{"type":27,"tag":355,"props":487,"children":488},{"style":362},[489],{"type":33,"value":490},"/>\n",{"type":27,"tag":35,"props":492,"children":493},{},[494,496],{"type":33,"value":495},"这段代码真正解决的问题是：",{"type":27,"tag":497,"props":498,"children":499},"strong",{},[500],{"type":33,"value":501},"让浏览器按当前显示环境拿合适尺寸，而不是总拿最大尺寸。",{"type":27,"tag":108,"props":503,"children":504},{},[],{"type":27,"tag":112,"props":506,"children":508},{"id":507},"_4-首屏图和非首屏图策略必须完全不同",[509],{"type":33,"value":510},"4. 首屏图和非首屏图，策略必须完全不同",{"type":27,"tag":166,"props":512,"children":514},{"id":513},"_41-首屏关键图要被当成-vip",[515],{"type":33,"value":516},"4.1 首屏关键图要被当成 VIP",{"type":27,"tag":35,"props":518,"children":519},{},[520],{"type":33,"value":521},"如果某张图是 LCP 候选，比如文章首图、商品主图、首页 hero 图，它应该得到：",{"type":27,"tag":41,"props":523,"children":524},{},[525,530,535,540],{"type":27,"tag":45,"props":526,"children":527},{},[528],{"type":33,"value":529},"明确尺寸",{"type":27,"tag":45,"props":531,"children":532},{},[533],{"type":33,"value":534},"更高加载优先级",{"type":27,"tag":45,"props":536,"children":537},{},[538],{"type":33,"value":539},"更合理的压缩平衡",{"type":27,"tag":45,"props":541,"children":542},{},[543],{"type":33,"value":544},"更靠前的 CDN 命中保障",{"type":27,"tag":166,"props":546,"children":548},{"id":547},"_42-非首屏图才适合积极懒加载",[549],{"type":33,"value":550},"4.2 非首屏图才适合积极懒加载",{"type":27,"tag":35,"props":552,"children":553},{},[554],{"type":33,"value":555},"很多页面把所有图片都懒加载，结果首屏图也跟着排队，LCP 直接变差。",{"type":27,"tag":35,"props":557,"children":558},{},[559],{"type":33,"value":560},"优化的核心从来不是“全部延后”，而是“别把关键资源一起延后”。",{"type":27,"tag":108,"props":562,"children":563},{},[],{"type":27,"tag":112,"props":565,"children":567},{"id":566},"_5-cdn-的价值不是替你做格式转换而是替你做分发决策",[568],{"type":33,"value":569},"5. CDN 的价值：不是替你做格式转换，而是替你做分发决策",{"type":27,"tag":35,"props":571,"children":572},{},[573],{"type":33,"value":574},"一套成熟的图片 CDN 方案至少会做四件事：",{"type":27,"tag":576,"props":577,"children":578},"ol",{},[579,584,589,594],{"type":27,"tag":45,"props":580,"children":581},{},[582],{"type":33,"value":583},"根据设备与请求头返回合适格式",{"type":27,"tag":45,"props":585,"children":586},{},[587],{"type":33,"value":588},"根据尺寸参数生成衍生图",{"type":27,"tag":45,"props":590,"children":591},{},[592],{"type":33,"value":593},"缓存常用变体，避免反复处理",{"type":27,"tag":45,"props":595,"children":596},{},[597],{"type":33,"value":598},"在边缘节点就近返回结果",{"type":27,"tag":35,"props":600,"children":601},{},[602],{"type":33,"value":603},"也就是说，CDN 不只是缓存层，它还是一个“图片调度中心”。",{"type":27,"tag":108,"props":605,"children":606},{},[],{"type":27,"tag":112,"props":608,"children":610},{"id":609},"_6-一个可落地的图片-url-设计",[611],{"type":33,"value":612},"6. 一个可落地的图片 URL 设计",{"type":27,"tag":35,"props":614,"children":615},{},[616],{"type":33,"value":617},"如果你自建图片处理链，URL 设计要足够稳定，便于缓存：",{"type":27,"tag":344,"props":619,"children":622},{"className":620,"code":621,"language":33,"meta":7,"style":7},"language-text shiki shiki-themes github-dark","/cdn-cgi/image/width=800,format=webp,quality=75/images/hero.jpg\n",[623],{"type":27,"tag":351,"props":624,"children":625},{"__ignoreMap":7},[626],{"type":27,"tag":355,"props":627,"children":628},{"class":357,"line":358},[629],{"type":27,"tag":355,"props":630,"children":631},{},[632],{"type":33,"value":621},{"type":27,"tag":35,"props":634,"children":635},{},[636],{"type":33,"value":637},"或者你自己的签名风格：",{"type":27,"tag":344,"props":639,"children":641},{"className":620,"code":640,"language":33,"meta":7,"style":7},"/img/hero.jpg?w=800&fmt=webp&q=75\n",[642],{"type":27,"tag":351,"props":643,"children":644},{"__ignoreMap":7},[645],{"type":27,"tag":355,"props":646,"children":647},{"class":357,"line":358},[648],{"type":27,"tag":355,"props":649,"children":650},{},[651],{"type":33,"value":640},{"type":27,"tag":35,"props":653,"children":654},{},[655],{"type":33,"value":656},"关键原则：",{"type":27,"tag":41,"props":658,"children":659},{},[660,665,670],{"type":27,"tag":45,"props":661,"children":662},{},[663],{"type":33,"value":664},"参数语义明确",{"type":27,"tag":45,"props":666,"children":667},{},[668],{"type":33,"value":669},"同一请求能稳定映射到同一缓存 key",{"type":27,"tag":45,"props":671,"children":672},{},[673],{"type":33,"value":674},"避免随手加无意义参数导致缓存碎片化",{"type":27,"tag":108,"props":676,"children":677},{},[],{"type":27,"tag":112,"props":679,"children":681},{"id":680},"_7-图片优化最常见的三类失误",[682],{"type":33,"value":683},"7. 图片优化最常见的三类失误",{"type":27,"tag":166,"props":685,"children":687},{"id":686},"_71-只盯压缩率不看视觉收益",[688],{"type":33,"value":689},"7.1 只盯压缩率，不看视觉收益",{"type":27,"tag":35,"props":691,"children":692},{},[693],{"type":33,"value":694},"把质量压得太狠，字节少了，品牌质感也没了。尤其电商和内容站，这种“省流量式毁图”代价很高。",{"type":27,"tag":166,"props":696,"children":698},{"id":697},"_72-所有页面共用一套图片策略",[699],{"type":33,"value":700},"7.2 所有页面共用一套图片策略",{"type":27,"tag":35,"props":702,"children":703},{},[704],{"type":33,"value":705},"详情页主图、列表缩略图、头像、插画，它们的价值完全不同，不该用一把尺子。",{"type":27,"tag":166,"props":707,"children":709},{"id":708},"_73-缓存策略和图片处理策略脱节",[710],{"type":33,"value":711},"7.3 缓存策略和图片处理策略脱节",{"type":27,"tag":35,"props":713,"children":714},{},[715],{"type":33,"value":716},"你可以把图压得很漂亮，但如果缓存命中率差，处理链每次都重新跑，成本一样爆炸。",{"type":27,"tag":108,"props":718,"children":719},{},[],{"type":27,"tag":112,"props":721,"children":723},{"id":722},"_8-一个成熟团队会怎么做",[724],{"type":33,"value":725},"8. 一个成熟团队会怎么做",{"type":27,"tag":35,"props":727,"children":728},{},[729],{"type":33,"value":730},"一个更靠谱的图片治理路径是：",{"type":27,"tag":576,"props":732,"children":733},{},[734,739,744,749,754],{"type":27,"tag":45,"props":735,"children":736},{},[737],{"type":33,"value":738},"先识别哪些图片直接影响 LCP",{"type":27,"tag":45,"props":740,"children":741},{},[742],{"type":33,"value":743},"为不同图片类型建立格式和质量策略",{"type":27,"tag":45,"props":745,"children":746},{},[747],{"type":33,"value":748},"强制所有图片声明尺寸和响应式信息",{"type":27,"tag":45,"props":750,"children":751},{},[752],{"type":33,"value":753},"通过 CDN 统一处理变体与缓存",{"type":27,"tag":45,"props":755,"children":756},{},[757],{"type":33,"value":758},"持续监控首屏图耗时、带宽成本和命中率",{"type":27,"tag":35,"props":760,"children":761},{},[762],{"type":33,"value":763},"这样做的好处是，图片优化不再是“每个开发各显神通”，而是平台能力。",{"type":27,"tag":108,"props":765,"children":766},{},[],{"type":27,"tag":112,"props":768,"children":770},{"id":769},"总结",[771],{"type":33,"value":769},{"type":27,"tag":41,"props":773,"children":774},{},[775,780,785,790],{"type":27,"tag":45,"props":776,"children":777},{},[778],{"type":33,"value":779},"图片优化不是单纯换格式，而是完整的分发与缓存策略。",{"type":27,"tag":45,"props":781,"children":782},{},[783],{"type":33,"value":784},"WebP 适合作为多数场景默认选项，AVIF 更适合高价值大图精细优化。",{"type":27,"tag":45,"props":786,"children":787},{},[788],{"type":33,"value":789},"响应式尺寸和首屏优先级，往往比格式本身更重要。",{"type":27,"tag":45,"props":791,"children":792},{},[793],{"type":33,"value":794},"CDN 的价值在于格式协商、尺寸生成、缓存复用和边缘分发。",{"type":27,"tag":35,"props":796,"children":797},{},[798],{"type":33,"value":799},"小明收尾一句：",{"type":27,"tag":99,"props":801,"children":802},{},[803],{"type":27,"tag":35,"props":804,"children":805},{},[806],{"type":33,"value":807},"图片优化真正厉害的地方，不是把每一张图都压到最小，而是让每一个用户都刚好拿到自己需要的那一张。",{"type":27,"tag":809,"props":810,"children":811},"style",{},[812],{"type":33,"value":813},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":395,"depth":395,"links":815},[816,817,821,822,826,827,828,833,834],{"id":114,"depth":374,"text":117},{"id":161,"depth":374,"text":164,"children":818},[819,820],{"id":168,"depth":395,"text":171},{"id":310,"depth":395,"text":313},{"id":329,"depth":374,"text":332},{"id":507,"depth":374,"text":510,"children":823},[824,825],{"id":513,"depth":395,"text":516},{"id":547,"depth":395,"text":550},{"id":566,"depth":374,"text":569},{"id":609,"depth":374,"text":612},{"id":680,"depth":374,"text":683,"children":829},[830,831,832],{"id":686,"depth":395,"text":689},{"id":697,"depth":395,"text":700},{"id":708,"depth":395,"text":711},{"id":722,"depth":374,"text":725},{"id":769,"depth":374,"text":769},"markdown","content:topics:engineering:image-optimization-webp-avif-cdn-guide.md","content","topics/engineering/image-optimization-webp-avif-cdn-guide.md","topics/engineering/image-optimization-webp-avif-cdn-guide","md",1777109941109]