技能介绍

页面变慢与视觉混乱的根源

网站图片往往占用 50-70% 的页面体积，却常被当成纯粹的装饰元素随意堆砌。直接塞入未经压缩的原始相机照片（动辄 3-10MB）、混用风格迥异的图库素材、缺失 alt 属性，不仅会拖垮 LCP（最大内容渲染）和整体性能，还会引发 CLS（累积布局偏移）、破坏无障碍体验，甚至让品牌视觉语言变得廉价且混乱。

从策略定义到技术落地的检查清单

该技能将图片视为承载信息与情感的内容，而非可有可无的填充物。其核心工作流分为三个关键步骤：

建立视觉概念：在挑选具体图片前，先定义目标受众、期望情绪、品牌调性以及统一的色调与裁剪风格。
技术优化与防偏移：强制使用 WebP 或 AVIF 格式，通过 srcset 提供至少三种分辨率变体（如 400px、800px、1200px），并为所有图片显式设置 width 和 height 属性以消除 CLS。首屏主图禁止 loading="lazy"，非首屏图片则必须懒加载，且单图体积控制在 200KB 以内。
无障碍与语义化：为内容图片编写精准描述的 Alt 文本（避免以 "Image of..." 开头），纯装饰性图片使用 alt=""，同时优先采用内联 SVG 构建图标系统。

适用边界与安全注意点

该技能提供的是设计原则与技术规范指南，主要用于指导前端开发与视觉决策，不会自动执行代码或修改系统配置。涉及具体的响应式裁切（如使用 <picture> 元素进行 art direction）时，需开发者自行编写实现逻辑。此外，在引入真实人物素材时，需严格甄别版权许可，避免使用刻板印象的图库摆拍。