[{"data":1,"prerenderedAt":326},["ShallowReactive",2],{"content-/blog/image-optimization":3,"related-blog":301},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":295,"_id":296,"_source":297,"_file":298,"_stem":299,"_extension":300},"/blog/image-optimization","blog",false,"","图片优化","图片压缩、格式选择、响应式图片等优化技术","图片优化, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":281},"root",[18,26,32,42,47,64,70,78,84,112,117,148,152,157,162,175,181,205,210,229,235,243,248,256,259,264],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","图像优化是前端性能的核心。本文总结格式选择、响应式图片与懒加载实践。",{"type":19,"tag":27,"props":28,"children":30},"h3",{"id":29},"格式与分辨率",[31],{"type":24,"value":29},{"type":19,"tag":33,"props":34,"children":35},"ul",{},[36],{"type":19,"tag":37,"props":38,"children":39},"li",{},[40],{"type":24,"value":41},"使用现代格式（AVIF/WebP）并为不同屏幕生成多分辨率 (srcset) 资源。",{"type":19,"tag":27,"props":43,"children":45},{"id":44},"懒加载与占位",[46],{"type":24,"value":44},{"type":19,"tag":33,"props":48,"children":49},{},[50],{"type":19,"tag":37,"props":51,"children":52},{},[53,55,62],{"type":24,"value":54},"使用 ",{"type":19,"tag":56,"props":57,"children":59},"code",{"className":58},[],[60],{"type":24,"value":61},"loading=\"lazy\"",{"type":24,"value":63}," 与占位图（LQIP/blurhash）提升感知性能。",{"type":19,"tag":27,"props":65,"children":67},{"id":66},"cdn-与缓存",[68],{"type":24,"value":69},"CDN 与缓存",{"type":19,"tag":33,"props":71,"children":72},{},[73],{"type":19,"tag":37,"props":74,"children":75},{},[76],{"type":24,"value":77},"使用 CDN 并设置合理缓存策略以降低源站带宽。",{"type":19,"tag":79,"props":80,"children":82},"h2",{"id":81},"初步纲要",[83],{"type":24,"value":81},{"type":19,"tag":33,"props":85,"children":86},{},[87,92,97,102,107],{"type":19,"tag":37,"props":88,"children":89},{},[90],{"type":24,"value":91},"主题简介",{"type":19,"tag":37,"props":93,"children":94},{},[95],{"type":24,"value":96},"背景与动机",{"type":19,"tag":37,"props":98,"children":99},{},[100],{"type":24,"value":101},"核心概念",{"type":19,"tag":37,"props":103,"children":104},{},[105],{"type":24,"value":106},"实践案例",{"type":19,"tag":37,"props":108,"children":109},{},[110],{"type":24,"value":111},"进一步扩展",{"type":19,"tag":79,"props":113,"children":115},{"id":114},"相关链接",[116],{"type":24,"value":114},{"type":19,"tag":33,"props":118,"children":119},{},[120,130,139],{"type":19,"tag":37,"props":121,"children":122},{},[123],{"type":19,"tag":124,"props":125,"children":127},"a",{"href":126},"/blog",[128],{"type":24,"value":129},"返回博客分类",{"type":19,"tag":37,"props":131,"children":132},{},[133],{"type":19,"tag":124,"props":134,"children":136},{"href":135},"/blog/topic/multi-agent-system",[137],{"type":24,"value":138},"查看热门话题",{"type":19,"tag":37,"props":140,"children":141},{},[142],{"type":19,"tag":124,"props":143,"children":145},{"href":144},"/blog/ai-architecture-deep-dive",[146],{"type":24,"value":147},"AI 架构深入",{"type":19,"tag":149,"props":150,"children":151},"hr",{},[],{"type":19,"tag":20,"props":153,"children":154},{},[155],{"type":24,"value":156},"图片优化是生成系统降低页面体积与提升 LCP 的关键环节。本文概述文件格式选择、响应式图片、懒加载与服务端处理策略。",{"type":19,"tag":79,"props":158,"children":160},{"id":159},"格式与质量选择",[161],{"type":24,"value":159},{"type":19,"tag":33,"props":163,"children":164},{},[165,170],{"type":19,"tag":37,"props":166,"children":167},{},[168],{"type":24,"value":169},"优先使用现代格式（AVIF / WebP）在支持的环境下替代 JPEG/PNG，AVIF 在视觉质量相同的条件下常显著更小。",{"type":19,"tag":37,"props":171,"children":172},{},[173],{"type":24,"value":174},"对不同场景使用不同质量参数：缩略图采用更高压缩比，展示图使用更高质量。",{"type":19,"tag":79,"props":176,"children":178},{"id":177},"响应式图片与-srcset",[179],{"type":24,"value":180},"响应式图片与 srcset",{"type":19,"tag":33,"props":182,"children":183},{},[184],{"type":19,"tag":37,"props":185,"children":186},{},[187,189,195,197,203],{"type":24,"value":188},"通过 ",{"type":19,"tag":56,"props":190,"children":192},{"className":191},[],[193],{"type":24,"value":194},"srcset",{"type":24,"value":196}," 与 ",{"type":19,"tag":56,"props":198,"children":200},{"className":199},[],[201],{"type":24,"value":202},"sizes",{"type":24,"value":204}," 提供多分辨率图像，浏览器会选择最合适的资源以节省带宽并提升加载速度。",{"type":19,"tag":79,"props":206,"children":208},{"id":207},"懒加载与占位-1",[209],{"type":24,"value":44},{"type":19,"tag":33,"props":211,"children":212},{},[213,224],{"type":19,"tag":37,"props":214,"children":215},{},[216,217,222],{"type":24,"value":54},{"type":19,"tag":56,"props":218,"children":220},{"className":219},[],[221],{"type":24,"value":61},{"type":24,"value":223}," 或 IntersectionObserver 实现图片懒加载；对于首屏图像延迟加载可能影响 LCP，请谨慎选择。",{"type":19,"tag":37,"props":225,"children":226},{},[227],{"type":24,"value":228},"使用低质量占位图（LQIP）或 CSS gradient 占位代替空白区域，减少布局跳动。",{"type":19,"tag":79,"props":230,"children":232},{"id":231},"服务端优化图像-cdn",[233],{"type":24,"value":234},"服务端优化（图像 CDN）",{"type":19,"tag":33,"props":236,"children":237},{},[238],{"type":19,"tag":37,"props":239,"children":240},{},[241],{"type":24,"value":242},"使用图像处理服务或 CDN（如 Imgix、Cloudinary、Thumbor）按需裁剪、压缩与格式转换，避免在应用服务器上重复处理。",{"type":19,"tag":79,"props":244,"children":246},{"id":245},"上线注意事项",[247],{"type":24,"value":245},{"type":19,"tag":33,"props":249,"children":250},{},[251],{"type":19,"tag":37,"props":252,"children":253},{},[254],{"type":24,"value":255},"验证不同网络条件下的加载时间（3G、4G、Wi-Fi），并在 CI 中对关键页面进行带宽受限的回归测试。",{"type":19,"tag":149,"props":257,"children":258},{},[],{"type":19,"tag":20,"props":260,"children":261},{},[262],{"type":24,"value":263},"相关链接：",{"type":19,"tag":33,"props":265,"children":266},{},[267,274],{"type":19,"tag":37,"props":268,"children":269},{},[270],{"type":19,"tag":124,"props":271,"children":272},{"href":126},[273],{"type":24,"value":129},{"type":19,"tag":37,"props":275,"children":276},{},[277],{"type":19,"tag":124,"props":278,"children":279},{"href":135},[280],{"type":24,"value":138},{"title":7,"searchDepth":282,"depth":282,"links":283},3,[284,285,286,287,289,290,291,292,293,294],{"id":29,"depth":282,"text":29},{"id":44,"depth":282,"text":44},{"id":66,"depth":282,"text":69},{"id":81,"depth":288,"text":81},2,{"id":114,"depth":288,"text":114},{"id":159,"depth":288,"text":159},{"id":177,"depth":288,"text":180},{"id":207,"depth":288,"text":44},{"id":231,"depth":288,"text":234},{"id":245,"depth":288,"text":245},"markdown","content:blog:image-optimization.md","content","blog/image-optimization.md","blog/image-optimization","md",[302,310,318],{"_path":303,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":304,"description":305,"keywords":306,"author":11,"date":12,"category":13,"image":14,"_type":295,"_id":307,"_source":297,"_file":308,"_stem":309,"_extension":300},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":311,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":312,"description":313,"keywords":314,"author":11,"date":12,"category":13,"image":14,"_type":295,"_id":315,"_source":297,"_file":316,"_stem":317,"_extension":300},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":319,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":320,"description":321,"keywords":322,"author":11,"date":12,"category":13,"image":14,"_type":295,"_id":323,"_source":297,"_file":324,"_stem":325,"_extension":300},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945277641]