网站图片优化代码规范

发布时间：2026-05-22 文章来源：本站浏览次数：6

"}}}}},"FCdofZi1qd4DsqcVLdNcsxrvnfc":{"id":"FCdofZi1qd4DsqcVLdNcsxrvnfc","snapshot":{"type":"text","comments":[],"hidden":false,"ai_extra":{"rewrite_command":1},"children":[],"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"locked":false,"author":"7592586811961052102","text":{"apool":{"nextNum":3,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1*2+f"},"text":{"0":"配套通用CSS规范（全局引用）"}}},"align":"left"}},"Fyndfcw3xdVeduciyH8cZBFsnRb":{"id":"Fyndfcw3xdVeduciyH8cZBFsnRb","snapshot":{"language":"css","parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","comments":[],"hidden":false,"author":"7592586811961052102","ai_extra":{"rewrite_command":1},"children":[],"align":"","type":"code","revisions":[],"locked":false,"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1|4+1o"},"text":{"0":"img {\n max-width: 100%;\n height: auto;\n display: block;\n}"}}}}},"JlaufAfwYdBw50cSO7Jccia7nTg":{"id":"JlaufAfwYdBw50cSO7Jccia7nTg","snapshot":{"locked":false,"author":"7592586811961052102","children":[],"text":{"apool":{"nextNum":3,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1*2+4*0*1+15"},"text":{"0":"禁止写法：不写宽高、只写单一宽或高、宽高比例失衡，会直接造成CLS超标，影响SEO体验分。"}}},"comments":[],"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"hidden":false,"ai_extra":{"rewrite_command":1},"align":"left","type":"text"}},"MYcufnAdQd0yMycysRhclpOcnXh":{"id":"MYcufnAdQd0yMycysRhclpOcnXh","snapshot":{"revisions":[],"locked":false,"hidden":false,"children":[],"align":"left","type":"heading2","parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","comments":[],"author":"7592586811961052102","ai_extra":{"rewrite_command":1},"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+p"},"text":{"0":"二、懒加载代码规范：区分首屏与非首屏，优化首屏速度"}}}}},"PodjfIbK8ddcHLc8holcywFqnvc":{"id":"PodjfIbK8ddcHLc8holcywFqnvc","snapshot":{"comments":[],"align":"left","ai_extra":{"rewrite_command":1},"children":[],"type":"text","parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","text":{"apool":{"nextNum":3,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+13*0*1*2+a*0*1+c"},"text":{"0":"懒加载是降低首屏资源体积、提升LCP最大内容绘制速度的核心代码方案，规范重点是首屏禁用、非首屏全开，避免首屏图片延迟闪烁。"}}}}},"Mlgrfsjzpd8oS3cr8qncjXyznIh":{"id":"Mlgrfsjzpd8oS3cr8qncjXyznIh","snapshot":{"type":"text","parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"author":"7592586811961052102","align":"left","comments":[],"locked":false,"hidden":false,"ai_extra":{"rewrite_command":1},"children":[],"text":{"apool":{"nextNum":3,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1*2+h"},"text":{"0":"1. 原生浏览器懒加载规范（推荐）"}}}}},"VHaRfiWoNdfTgtcmNP2cxEwbnUh":{"id":"VHaRfiWoNdfTgtcmNP2cxEwbnUh","snapshot":{"align":"left","type":"text","parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","comments":[],"hidden":false,"author":"7592586811961052102","ai_extra":{"rewrite_command":1},"revisions":[],"locked":false,"children":[],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+1a"},"text":{"0":"使用原生 loading=\"lazy\" 属性，无需JS插件，兼容性全覆盖，轻量化无性能损耗。"}}}}},"OVkFfFCT9d73xDcBSTjcKPQUnVc":{"id":"OVkFfFCT9d73xDcBSTjcKPQUnVc","snapshot":{"ai_extra":{"rewrite_command":1},"align":"","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"language":"html","locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"\n $\"列表图片\"$ "},"attribs":{"0":"*0*1|1+25*0*1+h"},"rows":{},"cols":{}}},"type":"code"}},"CXtWf83RhdDkSHcJzmEcMtvpngd":{"id":"CXtWf83RhdDkSHcJzmEcMtvpngd","snapshot":{"hidden":false,"author":"7592586811961052102","text":{"apool":{"nextNum":3,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1*2+e"},"text":{"0":"2. 首屏图片强制关闭懒加载"}}},"align":"left","type":"text","parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","comments":[],"revisions":[],"locked":false,"ai_extra":{"rewrite_command":1},"children":[]}},"GAJxfVtmSds2EtcBItFcxaqTnJh":{"id":"GAJxfVtmSds2EtcBItFcxaqTnJh","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"首页Banner、首屏核心展示图，禁止添加懒加载属性，防止出现白屏、延迟加载，保证首屏渲染优先级。"},"attribs":{"0":"*0*1+1d"},"rows":{},"cols":{}}},"type":"text"}},"RiPRfcPOOdQ9QVc2QVGcQ4Udnlh":{"id":"RiPRfcPOOdQ9QVc2QVGcQ4Udnlh","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"3. 懒加载避坑规范：禁止全站统一批量开启懒加载，必须区分页面区域；禁止使用老旧JS懒加载插件，容易造成加载阻塞、图片加载失败。"},"attribs":{"0":"*0*1*2+a*0*1+1i"},"rows":{},"cols":{}}},"type":"text"}},"H8fifeVpAdRGFycQJ65cF7crnkg":{"id":"H8fifeVpAdRGFycQJ65cF7crnkg","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"三、Alt属性代码规范：图片SEO核心标准"},"attribs":{"0":"*0*1+l"},"rows":{},"cols":{}}},"type":"heading2"}},"V0qbfZCNgdMifScE5OycvnHPnAF":{"id":"V0qbfZCNgdMifScE5OycvnHPnAF","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"alt标签是搜索引擎识别图片内容的唯一代码标识，同时是图片加载失败的兜底展示文本，属于SEO硬性代码规范，所有图片缺一不可。"},"attribs":{"0":"*0*1+1q"},"rows":{},"cols":{}}},"type":"text"}},"A0QLf5slddRO08cQwA8cbVh8nCb":{"id":"A0QLf5slddRO08cQwA8cbVh8nCb","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"代码规范要求"},"attribs":{"0":"*0*1*2+6"},"rows":{},"cols":{}}},"type":"text"}},"VvM0fWVH3dhHSZcUfDdczEeXn7o":{"id":"VvM0fWVH3dhHSZcUfDdczEeXn7o","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"1. 所有img标签禁止空alt、不写alt；"},"attribs":{"0":"*0*1+a*0*1*2+c*0*1+1"},"rows":{},"cols":{}}},"type":"text"}},"SWNvfBg2kdYZjFcNe6Vc7mK1nLe":{"id":"SWNvfBg2kdYZjFcNe6Vc7mK1nLe","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"2. alt内容简洁精准，描述图片主体内容，自然植入相关长尾关键词，不堆砌、不浮夸；"},"attribs":{"0":"*0*1+16"},"rows":{},"cols":{}}},"type":"text"}},"NYkGfaKYCdERATcTEnNc2NjEnkc":{"id":"NYkGfaKYCdERATcTEnNc2NjEnkc","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"3. 装饰性极简图标alt可填空字符，避免无效关键词堆砌。"},"attribs":{"0":"*0*1+t"},"rows":{},"cols":{}}},"type":"text"}},"PJY7fRLtWdQhTOcuLbUc6YUwnZg":{"id":"PJY7fRLtWdQhTOcuLbUc6YUwnZg","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"标准写法"},"attribs":{"0":"*0*1*2+4"},"rows":{},"cols":{}}},"type":"text"}},"YrCEfXvghdQwGYc5UOxcvRBpnhd":{"id":"YrCEfXvghdQwGYc5UOxcvRBpnhd","snapshot":{"ai_extra":{"rewrite_command":1},"align":"","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"language":"html","locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"\n $\"网站SEO图片优化代码规范教程\"$ \n\n\n $\"\"$ "},"attribs":{"0":"*0*1|4+4k"},"rows":{},"cols":{}}},"type":"code"}},"KmRTfn45wdQXs0c96mnc0U1unHh":{"id":"KmRTfn45wdQXs0c96mnc0U1unHh","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"四、图片格式与路径代码规范：减少解析损耗"},"attribs":{"0":"*0*1+k"},"rows":{},"cols":{}}},"type":"heading2"}},"VdQRfrGYrdgkPxcGtdwc7AKKngI":{"id":"VdQRfrGYrdgkPxcGtdwc7AKKngI","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"代码层面的图片格式调用、路径写法不规范，会增加浏览器解析请求成本，间接影响加载速度。"},"attribs":{"0":"*0*1+16"},"rows":{},"cols":{}}},"type":"text"}},"NcvYfsNxVdo1FlcttBLcUwJsn8g":{"id":"NcvYfsNxVdo1FlcttBLcUwJsn8g","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"1. 格式调用规范：代码中优先调用webp、avif格式图片，淘汰jpg、png大图调用方式，同页面统一图片格式标准，减少浏览器解码压力。"},"attribs":{"0":"*0*1*2+9*0*1+1o"},"rows":{},"cols":{}}},"type":"text"}},"FuNifSdrMdHrQBc91jKcDdO4nZd":{"id":"FuNifSdrMdHrQBc91jKcDdO4nZd","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"2. 图片路径规范"},"attribs":{"0":"*0*1*2+9"},"rows":{},"cols":{}}},"type":"text"}},"VIr9fJ3MDda5HTcXt7Zc4sUrnXf":{"id":"VIr9fJ3MDda5HTcXt7Zc4sUrnXf","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"统一使用相对路径或规范CDN绝对路径，禁止混乱路径、无效跳转路径；禁止本地绝对路径、带特殊字符、乱码命名的图片地址，避免爬虫抓取失败、图片加载报错。"},"attribs":{"0":"*0*1+4*0*1*2+4*0*1+1u"},"rows":{},"cols":{}}},"type":"text"}},"NXbrfDv1gdz9dBcCRWZc80mvnBe":{"id":"NXbrfDv1gdz9dBcCRWZc80mvnBe","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"标准CDN路径写法"},"attribs":{"0":"*0*1*2+9"},"rows":{},"cols":{}}},"type":"text"}},"Hs5OfmKEld2NxXcMfy4cCLmVnch":{"id":"Hs5OfmKEld2NxXcMfy4cCLmVnch","snapshot":{"ai_extra":{"rewrite_command":1},"align":"","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"language":"html","locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":" $\"图片优化规范\"$ "},"attribs":{"0":"*0*1+2d"},"rows":{},"cols":{}}},"type":"code"}},"Z5zofPFiSdidjacyPjRcHB5vnEb":{"id":"Z5zofPFiSdidjacyPjRcHB5vnEb","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"五、CSS图片渲染规范：提升渲染流畅度"},"attribs":{"0":"*0*1+j"},"rows":{},"cols":{}}},"type":"heading2"}},"RFFXfcq90dT2HLceVT2cPl18n0d":{"id":"RFFXfcq90dT2HLceVT2cPl18n0d","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"通过CSS代码优化图片渲染模式，减少浏览器重绘、重排，提升页面滚动流畅度。"},"attribs":{"0":"*0*1+11"},"rows":{},"cols":{}}},"type":"text"}},"QoWHfKNzXdfWmlcxdJTcXgIun1e":{"id":"QoWHfKNzXdfWmlcxdJTcXgIun1e","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"1. 开启硬件加速、优化渲染"},"attribs":{"0":"*0*1*2+e"},"rows":{},"cols":{}}},"type":"text"}},"SL37fQHZ4d4xbKccOLUco2f3nzc":{"id":"SL37fQHZ4d4xbKccOLUco2f3nzc","snapshot":{"ai_extra":{"rewrite_command":1},"align":"","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"language":"css","locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"img {\n /* 提升图片渲染层级，优化流畅度 */\n transform: translateZ(0);\n /* 禁止图片重复渲染 */\n image-rendering: crisp-edges;\n}"},"attribs":{"0":"*0*1|5+2z"},"rows":{},"cols":{}}},"type":"code"}},"R6Befpldld954hcYRr4czZpmntb":{"id":"R6Befpldld954hcYRr4czZpmntb","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"2. 背景图代码优化规范"},"attribs":{"0":"*0*1*2+c"},"rows":{},"cols":{}}},"type":"text"}},"MdGafWK23duQlLcFrQQc53MTnxB":{"id":"MdGafWK23duQlLcFrQQc53MTnxB","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"CSS背景图必须添加尺寸限制、禁止超大背景图，同时开启背景图懒加载逻辑，避免背景图阻塞首屏渲染："},"attribs":{"0":"*0*1+1c"},"rows":{},"cols":{}}},"type":"text"}},"XYTefmmRAdZmZAc0ZkCcF5x6nGf":{"id":"XYTefmmRAdZmZAc0ZkCcF5x6nGf","snapshot":{"ai_extra":{"rewrite_command":1},"align":"","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"language":"css","locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":".bg-box {\n width: 100%;\n height: 400px;\n background: url(banner.webp) no-repeat center;\n background-size: cover;\n}"},"attribs":{"0":"*0*1|5+3a"},"rows":{},"cols":{}}},"type":"code"}},"DTmsfXCNmdSFMzcmg59cSYvPnod":{"id":"DTmsfXCNmdSFMzcmg59cSYvPnod","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"六、图标类图片替代代码规范：彻底轻量化"},"attribs":{"0":"*0*1+j"},"rows":{},"cols":{}}},"type":"heading2"}},"OZ4yfshZadgEEIct1uEcLg4hndO":{"id":"OZ4yfshZadgEEIct1uEcLg4hndO","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"网站小图标、装饰图禁止使用PNG/JPG图片，统一用轻量化代码方案，减少HTTP请求数量。"},"attribs":{"0":"*0*1+19"},"rows":{},"cols":{}}},"type":"text"}},"UAurftPnidrefAcGN2ocCEqpnme":{"id":"UAurftPnidrefAcGN2ocCEqpnme","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"1. 优先使用SVG矢量图"},"attribs":{"0":"*0*1*2+d"},"rows":{},"cols":{}}},"type":"text"}},"AVumfIUCgdk97rc3QNsc76M5nNe":{"id":"AVumfIUCgdk97rc3QNsc76M5nNe","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"t, ext":{"0":"SVG体积极小、无损放大、无需图片请求，适配所有图标场景："},"attribs":{"0":"*0*1+t"},"rows":{},"cols":{}}},"type":"text"}},"PdOEfSKdEdfveycswTRc61m9nBg":{"id":"PdOEfSKdEdfveycswTRc61m9nBg","snapshot":{"ai_extra":{"rewrite_command":1},"align":"","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"language":"html","locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":""},"attribs":{"0":"*0*1+2l"},"rows":{},"cols":{}}},"type":"code"}},"L3tFfA80odPGe2c4fVBcZKsMnwf":{"id":"L3tFfA80odPGe2c4fVBcZKsMnwf","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"2. 小图标统一使用CSS雪碧图：将多个小图标合并为一张雪碧图，由多次HTTP请求合并为1次请求，大幅减少请求数、提速明显。"},"attribs":{"0":"*0*1*2+g*0*1+1a"},"rows":{},"cols":{}}},"type":"text"}},"Qayrfb0UqdqHIzcUWjKcAN4In5f":{"id":"Qayrfb0UqdqHIzcUWjKcAN4In5f","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"七、缓存与响应头代码配置规范"},"attribs":{"0":"*0*1+e"},"rows":{},"cols":{}}},"type":"heading2"}},"OfH4fiYDqdAyGucVhJmceHGNnQc":{"id":"OfH4fiYDqdAyGucVhJmceHGNnQc","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"通过服务器代码配置图片缓存，实现二次访问秒开，属于图片优化底层代码规范。"},"attribs":{"0":"*0*1+10"},"rows":{},"cols":{}}},"type":"text"}},"CXyEfql6SdvwxzcUhjIcslHXnVd":{"id":"CXyEfql6SdvwxzcUhjIcslHXnVd","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"服务端响应头规范（Nginx/Apache通用）"},"attribs":{"0":"*0*1*2+o"},"rows":{},"cols":{}}},"type":"text"}},"Rdfxf8suAdQqq0cSebCczUZVnEh":{"id":"Rdfxf8suAdQqq0cSebCczUZVnEh","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"对webp、jpg、png、svg等图片资源，设置长期缓存、强制缓存：缓存时效7-30天，减少重复下载。"},"attribs":{"0":"*0*1+1g"},"rows":{},"cols":{}}},"type":"text"}},"ZvjcfsWvzdRz9BcmgxJclFLxnJc":{"id":"ZvjcfsWvzdRz9BcmgxJclFLxnJc","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1,"bold,true":2}},"initialAttributedTexts":{"text":{"0":"规范配置效果：首次加载图片后，浏览器本地缓存生效，二次访问无需重新请求图片，极大提升回访速度。"},"attribs":{"0":"*0*1*2+6*0*1+15"},"rows":{},"cols":{}}},"type":"text"}},"HPwyf07LediXMqc5EZ5cFtpDnlc":{"id":"HPwyf07LediXMqc5EZ5cFtpDnlc","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"八、禁止的错误代码写法（避坑红线）"},"attribs":{"0":"*0*1+h"},"rows":{},"cols":{}}},"type":"heading2"}},"SBdyfMrtydKSxOcJEKkcvIdqnbe":{"id":"SBdyfMrtydKSxOcJEKkcvIdqnbe","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"1. 禁止img标签不写width、height，造成CLS布局偏移；"},"attribs":{"0":"*0*1+z"},"rows":{},"cols":{}}},"type":"text"}},"L81Zf7xEadU90tc8N7PcYyBFnYc":{"id":"L81Zf7xEadU90tc8N7PcYyBFnYc","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"2. 禁止全站图片统一开启懒加载，导致首屏卡顿闪烁；"},"attribs":{"0":"*0*1+q"},"rows":{},"cols":{}}},"type":"text"}},"Q2J2fAydvdJaeNcPdvQcX5H3nzc":{"id":"Q2J2fAydvdJaeNcPdvQcX5H3nzc","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"3. 禁止alt属性堆砌关键词、空alt、alt与内容不符；"},"attribs":{"0":"*0*1+u"},"rows":{},"cols":{}}},"type":"text"}},"FUhtfHPRbdDtXDcdf5ZcRJH9nFf":{"id":"FUhtfHPRbdDtXDcdf5ZcRJH9nFf","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"4. 禁止页面加载超大PNG、原图图片，不做格式转换与压缩；"},"attribs":{"0":"*0*1+u"},"rows":{},"cols":{}}},"type":"text"}},"IPozfT2wYdF4Plc1vjBcoYqWnCc":{"id":"IPozfT2wYdF4Plc1vjBcoYqWnCc","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"5. 禁止图片乱命名、特殊字符路径、无效资源链接。"},"attribs":{"0":"*0*1+p"},"rows":{},"cols":{}}},"type":"text"}},"OLMrfqA2WdbDMucXcxEcDMFAn0b":{"id":"OLMrfqA2WdbDMucXcxEcDMFAn0b","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]},"nextNum":2,"attribToNum":{"author,7592586811961052102":0,"ai-extra,{\"is_ai_gen\":true,\"rewrite_command\":1}":1}},"initialAttributedTexts":{"text":{"0":"总结"},"attribs":{"0":"*0*1+2"},"rows":{},"cols":{}}},"type":"heading2"}},"XBwtfNyzsdZlYdcITWNcCpdWn0g":{"id":"XBwtfNyzsdZlYdcITWNcCpdWn0g","snapshot":{"ai_extra":{"rewrite_command":1},"align":"left","author":"7592586811961052102","children":[],"comments":[],"hidden":false,"locked":false,"parent_id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","revisions":[],"text":{"initialAttributedTexts":{"text":{"0":"网站图片优化核心代码规范：必写宽高防偏移、首屏不懒加载、非首屏全开懒加载、alt精准赋值、统一WebP格式、CDN规范路径、轻量化图标替代、长效缓存配置。严格遵守以上代码规范，可一次性解决图片带来的LCP慢、CLS超标、请求过多、SEO图片无收录四大核心问题，完美适配页面速度优化与搜索引擎体验评分标准。"},"attribs":{"0":"*1*0+d*1*0*2+1r*1*0+24"}},"apool":{"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"],"2":["bold","true"]},"nextNum":3}},"type":"text"}},"Oz3ldibs7ordV7xX2x4cF6ZXnxg":{"id":"Oz3ldibs7ordV7xX2x4cF6ZXnxg","snapshot":{"type":"page","parent_id":"","comments":[],"revisions":[],"locked":false,"hidden":false,"author":"7592586811961052102","children":["E8IIf7LHZdYG6Ucqwyxcg3EknGd","Ozc6f4KuMdyS52csBrRcFsGRnUe","RRNSf2xV9dMz5xcrAjocFtX9nWe","KmOLfhZcwdApc6cJKdEcMWjJneg","LnWvfaMhrddDB0cF8hEcYjdhnwc","JJV7f4tImd6z3BchVjDco8BAnLg","FCdofZi1qd4DsqcVLdNcsxrvnfc","Fyndfcw3xdVeduciyH8cZBFsnRb","JlaufAfwYdBw50cSO7Jccia7nTg","MYcufnAdQd0yMycysRhclpOcnXh","PodjfIbK8ddcHLc8holcywFqnvc","Mlgrfsjzpd8oS3cr8qncjXyznIh","VHaRfiWoNdfTgtcmNP2cxEwbnUh","OVkFfFCT9d73xDcBSTjcKPQUnVc","CXtWf83RhdDkSHcJzmEcMtvpngd","GAJxfVtmSds2EtcBItFcxaqTnJh","RiPRfcPOOdQ9QVc2QVGcQ4Udnlh","H8fifeVpAdRGFycQJ65cF7crnkg","V0qbfZCNgdMifScE5OycvnHPnAF","A0QLf5slddRO08cQwA8cbVh8nCb","VvM0fWVH3dhHSZcUfDdczEeXn7o","SWNvfBg2kdYZjFcNe6Vc7mK1nLe","NYkGfaKYCdERATcTEnNc2NjEnkc","PJY7fRLtWdQhTOcuLbUc6YUwnZg","YrCEfXvghdQwGYc5UOxcvRBpnhd","KmRTfn45wdQXs0c96mnc0U1unHh","VdQRfrGYrdgkPxcGtdwc7AKKngI","NcvYfsNxVdo1FlcttBLcUwJsn8g","FuNifSdrMdHrQBc91jKcDdO4nZd","VIr9fJ3MDda5HTcXt7Zc4sUrnXf","NXbrfDv1gdz9dBcCRWZc80mvnBe","Hs5OfmKEld2NxXcMfy4cCLmVnch","Z5zofPFiSdidjacyPjRcHB5vnEb","RFFXfcq90dT2HLceVT2cPl18n0d","QoWHfKNzXdfWmlcxdJTcXgIun1e","SL37fQHZ4d4xbKccOLUco2f3nzc","R6Befpldld954hcYRr4czZpmntb","MdGafWK23duQlLcFrQQc53MTnxB","XYTefmmRAdZmZAc0ZkCcF5x6nGf","DTmsfXCNmdSFMzcmg59cSYvPnod","OZ4yfshZadgEEIct1uEcLg4hndO","UAurftPnidrefAcGN2ocCEqpnme","AVumfIUCgdk97rc3QNsc76M5nNe","PdOEfSKdEdfveycswTRc61m9nBg","L3tFfA80odPGe2c4fVBcZKsMnwf","Qayrfb0UqdqHIzcUWjKcAN4In5f","OfH4fiYDqdAyGucVhJmceHGNnQc","CXyEfql6SdvwxzcUhjIcslHXnVd","Rdfxf8suAdQqq0cSebCczUZVnEh","ZvjcfsWvzdRz9BcmgxJclFLxnJc","HPwyf07LediXMqc5EZ5cFtpDnlc","SBdyfMrtydKSxOcJEKkcvIdqnbe","L81Zf7xEadU90tc8N7PcYyBFnYc","Q2J2fAydvdJaeNcPdvQcX5H3nzc","FUhtfHPRbdDtXDcdf5ZcRJH9nFf","IPozfT2wYdF4Plc1vjBcoYqWnCc","OLMrfqA2WdbDMucXcxEcDMFAn0b","XBwtfNyzsdZlYdcITWNcCpdWn0g"],"text":{"apool":{"nextNum":2,"numToAttrib":{"0":["author","7592586811961052102"],"1":["ai-extra","{\"is_ai_gen\":true,\"rewrite_command\":1}"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+k*0*1+1"},"text":{"0":"网站图片优化代码规范（前端可直接落地标准）"}}},"align":"","doc_info":{"editors":["7592586811961052102"],"options":["editors","edit_time"],"deleted_editors":null,"option_modified":null},"revision_container_id":"doxcnA86Q1g8wQ1CWP7zS9aMhwf","status":{"streaming":{"enabled":false,"expired_at":"1783921236","is_create_command":true,"operator_id":"7592586811961052102","source":1}}}}},"payloadMap":{"E8IIf7LHZdYG6Ucqwyxcg3EknGd":{"level":1},"RRNSf2xV9dMz5xcrAjocFtX9nWe":{"level":1},"KmOLfhZcwdApc6cJKdEcMWjJneg":{"level":1},"LnWvfaMhrddDB0cF8hEcYjdhnwc":{"level":1},"FCdofZi1qd4DsqcVLdNcsxrvnfc":{"level":1},"JlaufAfwYdBw50cSO7Jccia7nTg":{"level":1},"PodjfIbK8ddcHLc8holcywFqnvc":{"level":1},"Mlgrfsjzpd8oS3cr8qncjXyznIh":{"level":1},"VHaRfiWoNdfTgtcmNP2cxEwbnUh":{"level":1},"CXtWf83RhdDkSHcJzmEcMtvpngd":{"level":1},"GAJxfVtmSds2EtcBItFcxaqTnJh":{"level":1},"RiPRfcPOOdQ9QVc2QVGcQ4Udnlh":{"level":1},"V0qbfZCNgdMifScE5OycvnHPnAF":{"level":1},"A0QLf5slddRO08cQwA8cbVh8nCb":{"level":1},"VvM0fWVH3dhHSZcUfDdczEeXn7o":{"level":1},"SWNvfBg2kdYZjFcNe6Vc7mK1nLe":{"level":1},"NYkGfaKYCdERATcTEnNc2NjEnkc":{"level":1},"PJY7fRLtWdQhTOcuLbUc6YUwnZg":{"level":1},"VdQRfrGYrdgkPxcGtdwc7AKKngI":{"level":1},"NcvYfsNxVdo1FlcttBLcUwJsn8g":{"level":1},"FuNifSdrMdHrQBc91jKcDdO4nZd":{"level":1},"VIr9fJ3MDda5HTcXt7Zc4sUrnXf":{"level":1},"NXbrfDv1gdz9dBcCRWZc80mvnBe":{"level":1},"RFFXfcq90dT2HLceVT2cPl18n0d":{"level":1},"QoWHfKNzXdfWmlcxdJTcXgIun1e":{"level":1},"R6Befpldld954hcYRr4czZpmntb":{"level":1},"MdGafWK23duQlLcFrQQc53MTnxB":{"level":1},"OZ4yfshZadgEEIct1uEcLg4hndO":{"level":1},"UAurftPnidrefAcGN2ocCEqpnme":{"level":1},"AVumfIUCgdk97rc3QNsc76M5nNe":{"level":1},"L3tFfA80odPGe2c4fVBcZKsMnwf":{"level":1},"OfH4fiYDqdAyGucVhJmceHGNnQc":{"level":1},"CXyEfql6SdvwxzcUhjIcslHXnVd":{"level":1},"Rdfxf8suAdQqq0cSebCczUZVnEh":{"level":1},"ZvjcfsWvzdRz9BcmgxJclFLxnJc":{"level":1},"SBdyfMrtydKSxOcJEKkcvIdqnbe":{"level":1},"L81Zf7xEadU90tc8N7PcYyBFnYc":{"level":1},"Q2J2fAydvdJaeNcPdvQcX5H3nzc":{"level":1},"FUhtfHPRbdDtXDcdf5ZcRJH9nFf":{"level":1},"IPozfT2wYdF4Plc1vjBcoYqWnCc":{"level":1},"XBwtfNyzsdZlYdcITWNcCpdWn0g":{"level":1}},"extra":{"channel":"saas","pasteRandomId":"00ade8bd-20b3-485d-8875-95ea45662487","mention_page_title":{},"external_mention_url":{},"isEqualBlockSelection":true},"isKeepQuoteContainer":false,"selection":[{"id":2,"type":"text","selection":{"start":0,"end":144},"recordId":"E8IIf7LHZdYG6Ucqwyxcg3EknGd"},{"id":3,"type":"text","selection":{"start":0,"end":24},"recordId":"Ozc6f4KuMdyS52csBrRcFsGRnUe"},{"id":4,"type":"text","selection":{"start":0,"end":79},"recordId":"RRNSf2xV9dMz5xcrAjocFtX9nWe"},{"id":5,"type":"text","selection":{"start":0,"end":86},"recordId":"KmOLfhZcwdApc6cJKdEcMWjJneg"},{"id":6,"type":"text","selection":{"start":0,"end":6},"recordId":"LnWvfaMhrddDB0cF8hEcYjdhnwc"},{"id":7,"type":"block","recordId":"JJV7f4tImd6z3BchVjDco8BAnLg"},{"id":8,"type":"text","selection":{"start":0,"end":15},"recordId":"FCdofZi1qd4DsqcVLdNcsxrvnfc"},{"id":9,"type":"block","recordId":"Fyndfcw3xdVeduciyH8cZBFsnRb"},{"id":10,"type":"text","selection":{"start":0,"end":45},"recordId":"JlaufAfwYdBw50cSO7Jccia7nTg"},{"id":11,"type":"text","selection":{"start":0,"end":25},"recordId":"MYcufnAdQd0yMycysRhclpOcnXh"},{"id":12,"type":"text","selection":{"start":0,"end":61},"recordId":"PodjfIbK8ddcHLc8holcywFqnvc"},{"id":13,"type":"text","selection":{"start":0,"end":17},"recordId":"Mlgrfsjzpd8oS3cr8qncjXyznIh"},{"id":14,"type":"text","selection":{"start":0,"end":46},"recordId":"VHaRfiWoNdfTgtcmNP2cxEwbnUh"},{"id":15,"type":"block","recordId":"OVkFfFCT9d73xDcBSTjcKPQUnVc"},{"id":16,"type":"text","selection":{"start":0,"end":14},"recordId":"CXtWf83RhdDkSHcJzmEcMtvpngd"},{"id":17,"type":"text","selection":{"start":0,"end":49},"recordId":"GAJxfVtmSds2EtcBItFcxaqTnJh"},{"id":18,"type":"text","selection":{"start":0,"end":64},"recordId":"RiPRfcPOOdQ9QVc2QVGcQ4Udnlh"},{"id":19,"type":"text","selection":{"start":0,"end":21},"recordId":"H8fifeVpAdRGFycQJ65cF7crnkg"},{"id":20,"type":"text","selection":{"start":0,"end":62},"recordId":"V0qbfZCNgdMifScE5OycvnHPnAF"},{"id":21,"type":"text","selection":{"start":0,"end":6},"recordId":"A0QLf5slddRO08cQwA8cbVh8nCb"},{"id":22,"type":"text","selection":{"start":0,"end":23},"recordId":"VvM0fWVH3dhHSZcUfDdczEeXn7o"},{"id":23,"type":"text","selection":{"start":0,"end":42},"recordId":"SWNvfBg2kdYZjFcNe6Vc7mK1nLe"},{"id":24,"type":"text","selection":{"start":0,"end":29},"recordId":"NYkGfaKYCdERATcTEnNc2NjEnkc"},{"id":25,"type":"text","selection":{"start":0,"end":4},"recordId":"PJY7fRLtWdQhTOcuLbUc6YUwnZg"},{"id":26,"type":"block","recordId":"YrCEfXvghdQwGYc5UOxcvRBpnhd"},{"id":27,"type":"text","selection":{"start":0,"end":20},"recordId":"KmRTfn45wdQXs0c96mnc0U1unHh"},{"id":28,"type":"text","selection":{"start":0,"end":42},"recordId":"VdQRfrGYrdgkPxcGtdwc7AKKngI"},{"id":29,"type":"text","selection":{"start":0,"end":69},"recordId":"NcvYfsNxVdo1FlcttBLcUwJsn8g"},{"id":30,"type":"text","selection":{"start":0,"end":9},"recordId":"FuNifSdrMdHrQBc91jKcDdO4nZd"},{"id":31,"type":"text","selection":{"start":0,"end":74},"recordId":"VIr9fJ3MDda5HTcXt7Zc4sUrnXf"},{"id":32,"type":"text","selection":{"start":0,"end":9},"recordId":"NXbrfDv1gdz9dBcCRWZc80mvnBe"},{"id":33,"type":"block","recordId":"Hs5OfmKEld2NxXcMfy4cCLmVnch"},{"id":34,"type":"text","selection":{"start":0,"end":19},"recordId":"Z5zofPFiSdidjacyPjRcHB5vnEb"},{"id":35,"type":"text","selection":{"start":0,"end":37},"recordId":"RFFXfcq90dT2HLceVT2cPl18n0d"},{"id":36,"type":"text","selection":{"start":0,"end":14},"recordId":"QoWHfKNzXdfWmlcxdJTcXgIun1e"},{"id":37,"type":"block","recordId":"SL37fQHZ4d4xbKccOLUco2f3nzc"},{"id":38,"type":"text","selection":{"start":0,"end":12},"recordId":"R6Befpldld954hcYRr4czZpmntb"},{"id":39,"type":"text","selection":{"start":0,"end":48},"recordId":"MdGafWK23duQlLcFrQQc53MTnxB"},{"id":40,"type":"block","recordId":"XYTefmmRAdZmZAc0ZkCcF5x6nGf"},{"id":41,"type":"text","selection":{"start":0,"end":19},"recordId":"DTmsfXCNmdSFMzcmg59cSYvPnod"},{"id":42,"type":"text","selection":{"start":0,"end":45},"recordId":"OZ4yfshZadgEEIct1uEcLg4hndO"},{"id":43,"type":"text","selection":{"start":0,"end":13},"recordId":"UAurftPnidrefAcGN2ocCEqpnme"},{"id":44,"type":"text","selection":{"start":0,"end":29},"recordId":"AVumfIUCgdk97rc3QNsc76M5nNe"},{"id":45,"type":"block","recordId":"PdOEfSKdEdfveycswTRc61m9nBg"},{"id":46,"type":"text","selection":{"start":0,"end":62},"recordId":"L3tFfA80odPGe2c4fVBcZKsMnwf"},{"id":47,"type":"text","selection":{"start":0,"end":14},"recordId":"Qayrfb0UqdqHIzcUWjKcAN4In5f"},{"id":48,"type":"text","selection":{"start":0,"end":36},"recordId":"OfH4fiYDqdAyGucVhJmceHGNnQc"},{"id":49,"type":"text","selection":{"start":0,"end":24},"recordId":"CXyEfql6SdvwxzcUhjIcslHXnVd"},{"id":50,"type":"text","selection":{"start":0,"end":52},"recordId":"Rdfxf8suAdQqq0cSebCczUZVnEh"},{"id":51,"type":"text","selection":{"start":0,"end":47},"recordId":"ZvjcfsWvzdRz9BcmgxJclFLxnJc"},{"id":52,"type":"text","selection":{"start":0,"end":17},"recordId":"HPwyf07LediXMqc5EZ5cFtpDnlc"},{"id":53,"type":"text","selection":{"start":0,"end":35},"recordId":"SBdyfMrtydKSxOcJEKkcvIdqnbe"},{"id":54,"type":"text","selection":{"start":0,"end":26},"recordId":"L81Zf7xEadU90tc8N7PcYyBFnYc"},{"id":55,"type":"text","selection":{"start":0,"end":30},"recordId":"Q2J2fAydvdJaeNcPdvQcX5H3nzc"},{"id":56,"type":"text","selection":{"start":0,"end":30},"recordId":"FUhtfHPRbdDtXDcdf5ZcRJH9nFf"},{"id":57,"type":"text","selection":{"start":0,"end":25},"recordId":"IPozfT2wYdF4Plc1vjBcoYqWnCc"},{"id":58,"type":"text","selection":{"start":0,"end":2},"recordId":"OLMrfqA2WdbDMucXcxEcDMFAn0b"},{"id":59,"type":"text","selection":{"start":0,"end":152},"recordId":"XBwtfNyzsdZlYdcITWNcCpdWn0g"}],"pasteFlag":"97d0da09-5601-4d19-acea-ecf458e6cb11"}" data-lark-record-format="docx/record" class="lark-record-clipboard">

网站图片的加载卡顿、布局偏移、爬虫识别异常、首屏阻塞等问题，大多源于前端代码不规范。优质的图片代码规范，既能大幅提升页面加载速度、优化Core Web Vitals核心指标，又能适配搜索引擎图片SEO抓取规则。以下为统一、可直接复用的网站图片优化代码规范，无冗余理论，全部为落地代码标准。

一、固定宽高规范：彻底解决CLS布局偏移（必做）

CLS（累积布局偏移）是百度、谷歌核心扣分指标，绝大多数图片产生的CLS，是因为图片未设置宽高属性，浏览器无法提前预留位置，图片加载完成后导致页面塌陷、抖动。

代码规范要求：所有img标签必须强制设置width、height属性，同时通过CSS保持自适应，不固定死显示尺寸。浏览器可根据宽高比例提前预留图片占位区域，实现零布局偏移。

标准正确写法

<!-- 原生宽高赋值 + CSS自适应，兼顾规范与适配 -->
<img src="pic.webp" width="800" height="450" alt="关键词描述">

配套通用CSS规范（全局引用）

img {
  max-width: 100%;
  height: auto;
  display: block;
}

禁止写法：不写宽高、只写单一宽或高、宽高比例失衡，会直接造成CLS超标，影响SEO体验分。

二、懒加载代码规范：区分首屏与非首屏，优化首屏速度

懒加载是降低首屏资源体积、提升LCP最大内容绘制速度的核心代码方案，规范重点是首屏禁用、非首屏全开，避免首屏图片延迟闪烁。

1. 原生浏览器懒加载规范（推荐）

使用原生 loading="lazy" 属性，无需JS插件，兼容性全覆盖，轻量化无性能损耗。

<!-- 非首屏图片统一开启懒加载 -->
<img src="list.webp" width="600" height="400" alt="列表图片" loading="lazy">

2. 首屏图片强制关闭懒加载

首页Banner、首屏核心展示图，禁止添加懒加载属性，防止出现白屏、延迟加载，保证首屏渲染优先级。

3. 懒加载避坑规范：禁止全站统一批量开启懒加载，必须区分页面区域；禁止使用老旧JS懒加载插件，容易造成加载阻塞、图片加载失败。

三、Alt属性代码规范：图片SEO核心标准

alt标签是搜索引擎识别图片内容的唯一代码标识，同时是图片加载失败的兜底展示文本，属于SEO硬性代码规范，所有图片缺一不可。

代码规范要求

1. 所有img标签禁止空alt、不写alt；

2. alt内容简洁精准，描述图片主体内容，自然植入相关长尾关键词，不堆砌、不浮夸；

3. 装饰性极简图标alt可填空字符，避免无效关键词堆砌。

标准写法

<!-- 产品/内容图标准alt -->
<img src="product.webp" width="700" height="500" alt="网站SEO图片优化代码规范教程">

<!-- 装饰图标规范alt -->
<img src="icon.webp" width="24" height="24" alt="">

四、图片格式与路径代码规范：减少解析损耗

代码层面的图片格式调用、路径写法不规范，会增加浏览器解析请求成本，间接影响加载速度。

1. 格式调用规范：代码中优先调用webp、avif格式图片，淘汰jpg、png大图调用方式，同页面统一图片格式标准，减少浏览器解码压力。

2. 图片路径规范

统一使用相对路径或规范CDN绝对路径，禁止混乱路径、无效跳转路径；禁止本地绝对路径、带特殊字符、乱码命名的图片地址，避免爬虫抓取失败、图片加载报错。

标准CDN路径写法

<img src="https://cdn.xxx.com/images/pic.webp" width="800" height="450" alt="图片优化规范">

五、CSS图片渲染规范：提升渲染流畅度

通过CSS代码优化图片渲染模式，减少浏览器重绘、重排，提升页面滚动流畅度。

1. 开启硬件加速、优化渲染

img {
  /* 提升图片渲染层级，优化流畅度 */
  transform: translateZ(0);
  /* 禁止图片重复渲染 */
  image-rendering: crisp-edges;
}

2. 背景图代码优化规范

CSS背景图必须添加尺寸限制、禁止超大背景图，同时开启背景图懒加载逻辑，避免背景图阻塞首屏渲染：

.bg-box {
  width: 100%;
  height: 400px;
  background: url(banner.webp) no-repeat center;
  background-size: cover;
}

六、图标类图片替代代码规范：彻底轻量化

网站小图标、装饰图禁止使用PNG/JPG图片，统一用轻量化代码方案，减少HTTP请求数量。

1. 优先使用SVG矢量图

SVG体积极小、无损放大、无需图片请求，适配所有图标场景：

<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="..." fill="#333"/></svg>

2. 小图标统一使用CSS雪碧图：将多个小图标合并为一张雪碧图，由多次HTTP请求合并为1次请求，大幅减少请求数、提速明显。

七、缓存与响应头代码配置规范

通过服务器代码配置图片缓存，实现二次访问秒开，属于图片优化底层代码规范。

服务端响应头规范（Nginx/Apache通用）

对webp、jpg、png、svg等图片资源，设置长期缓存、强制缓存：缓存时效7-30天，减少重复下载。

规范配置效果：首次加载图片后，浏览器本地缓存生效，二次访问无需重新请求图片，极大提升回访速度。

八、禁止的错误代码写法（避坑红线）

1. 禁止img标签不写width、height，造成CLS布局偏移；

2. 禁止全站图片统一开启懒加载，导致首屏卡顿闪烁；

3. 禁止alt属性堆砌关键词、空alt、alt与内容不符；

4. 禁止页面加载超大PNG、原图图片，不做格式转换与压缩；

5. 禁止图片乱命名、特殊字符路径、无效资源链接。

总结

网站图片优化核心代码规范：必写宽高防偏移、首屏不懒加载、非首屏全开懒加载、alt精准赋值、统一WebP格式、CDN规范路径、轻量化图标替代、长效缓存配置。严格遵守以上代码规范，可一次性解决图片带来的LCP慢、CLS超标、请求过多、SEO图片无收录四大核心问题，完美适配页面速度优化与搜索引擎体验评分标准。

上一条：网站图片懒加载的优缺点及...

下一条：网站页面加载速度对SEO...