images-media

图像和媒体

每张图片都必须发挥作用——传递信息、唤起情感、提供方向指引或强化品牌。没有用途的图片只会徒增负担。

适用范围

在以下情况下使用此技能：

• 为网站制定图像策略
• 设计主视觉区域或图片画廊
• 从技术层面优化图片（格式、压缩、srcset）
• 使用图标和 SVG，或构建图标系统
• 编写或审核替代文本
• 在图库照片和定制图像之间做选择

原则

1. 图片是内容，不是装饰

每张图片都发挥作用。没有用途的图片只会徒增负担并拖慢页面加载速度。

2. 重质不重量

少量高质量、真实的图片，比大量千篇一律的图库照片更有影响力。

3. 先制定图像策略，再选择图片

先定义视觉概念（风格、氛围、配色），再选择图片。

4. 性能不容妥协

图片占页面体积的 50-70%。优化图片能带来最大的性能提升。

5. 真实胜过完美

真实场景中的真人，比摆拍的图库照片更有说服力。

规则

应做：制定图像策略

• 选择图片前先定义视觉概念。
• 将目标受众、期望传达的情绪和品牌形象作为选择标准。
• 选择风格一致的图片（配色、裁剪方式、光线）。
• 确保连贯性：在整个网站中保持一致的视觉语言。

应做：让图片发挥实际作用

每张图片至少发挥以下四种功能之一：

• 布局元素： 用于营造氛围的页眉图片、背景和图案。
• 方向指引元素： 为新板块提供视觉锚点，打破文字密集区域的沉闷感。
• 内容元素： 复杂主题的可视化呈现、产品图片。
• 情感元素： 塑造品牌、营造氛围、增强辨识度。

应做：展示人物

• 使用真实场景中的真实人物。
• 避免摆拍和明显刻意的姿势。
• 在情境适合时展现不同年龄、性别和种族的人物。

应做：从技术层面优化图片

• 使用 WebP（标准）或 AVIF（渐进式）进行压缩。
• 通过 srcset 提供至少 3 种尺寸（400px、800px、1200px）。
• 使用 picture 根据视口采用不同的裁剪方式。
• 设置 width 和 height 属性以防止 CLS。
• 对首屏以下的图片设置 loading="lazy"。
• 将文件大小控制在 200KB 以下（主视觉图片最大 400KB）。

应做：编写有意义的替代文本

• 为屏幕阅读器和 SEO 准确描述图片内容。
• 避免以“Image of...”开头。
• 仅对纯装饰性图片设置 alt=""。
• 使用描述性文件名（例如，用 team-meeting-office.webp 代替 IMG_4523.webp）。

应做：保持图标一致

• 始终将图标与文字标签搭配使用。
• 在整个网站中使用一致的图标集。
• 优先使用 SVG 图标，以获得清晰的显示效果和更小的文件体积。

应做：优先使用 SVG

• 对徽标、图标、插图和简单图形使用 SVG。
• 需要交互效果（悬停时改变颜色、动画）时内联 SVG。
• 对频繁使用的图标使用 SVG 雪碧图。

不应做：使用千篇一律的图库照片

• 避免使用陈词滥调的图片（微笑的商务人士、握手、灯泡）。
• 投入定制拍摄，或从经过精选且后期风格一致的高端图库中选图。

不应做：嵌入未优化的图片

• 不要以原始分辨率提供图片。
• 有 WebP/AVIF 可用时，不要使用 JPEG/PNG。
• 不要对主视觉图片和徽标进行延迟加载（必须立即加载）。

不应做：在图片中放置没有替代方案的文字

• 不要将重要文字信息仅嵌入图片中。
• 图片中的文字无法无障碍访问、无法搜索，也无法自适应显示。

模式

带叠加层的主视觉图片

用于首页和落地页：使用大幅图片，并添加半透明叠加层以确保文字清晰易读。在图片上方放置标题、副标题和 CTA。主视觉图片不要延迟加载。

图片画廊 / 项目展示

采用纵横比一致的网格布局（16:9 或 4:3）。悬停时显示额外信息。提供用于查看详情的灯箱。懒加载首屏以下的图片。

图片卡片

卡片上半部分显示图片，下半部分显示标题、摘要和行动号召（CTA）。纵横比保持一致。使用 object-fit: cover 实现统一的呈现效果。

带艺术指导的响应式图片

使用 picture 元素和不同的 source 元素。移动端：紧凑的纵向裁剪。桌面端：完整的横向裁剪。代码示例请参阅 references/responsive-images.md。

图标系统

图标达到 10 个或以上时，使用风格一致的图标集（线条风格或填充风格，不要混用）。使用 SVG 雪碧图提升性能。尺寸统一（例如以 24px 为基准）。图标始终搭配文本标签或 aria-label。

反模式

千篇一律的图库照片

所有图片都来自同一个平台，看起来通用且毫无区别。用户能立刻认出图库照片。解决方案： 使用定制照片或经过筛选、编辑风格一致的优质图库照片。

未优化的大尺寸图片

直接嵌入相机拍摄的原始照片（3-10MB）。解决方案： 使用构建流水线自动压缩、调整尺寸并转换格式。

过多装饰性图片

图片过多，却没有提供信息价值。解决方案： 每张图片都必须通过“有什么用？”测试。留白往往更有效。

缺少替代文本

图片没有 alt 属性，或使用“image1.jpg”这样的文本。这违反无障碍规范，也不利于 SEO。解决方案： 为内容图片提供描述性替代文本；装饰性图片使用 alt=""。

视觉语言不一致

混用风格和质量水平各异的照片。解决方案： 制定图片策略，明确色彩处理方式、风格和质量标准。

检查清单

策略

• 明确图片策略，包括风格、氛围和配色方案
• 所有页面的视觉语言保持一致
• 每张图片至少发挥一种作用
• 避免使用通用图库照片

技术优化

• 以 WebP 或 AVIF 作为主要格式
• 使用至少包含 3 种尺寸的 srcset
• 对首屏以下的图片设置 loading="lazy"
• 主视觉图片不使用懒加载
• 设置 width 和 height 属性
• 文件小于 200KB（主视觉图片最大 400KB）
• Logo、图标和插图使用 SVG

无障碍

• 为所有内容图片提供替代文本
• 纯装饰性图片使用 alt=""
• 不要只在图片中呈现重要文本
• 确保图片上的文本具有足够的对比度

法律

• 核实使用权和许可
• 正确标注图片来源

交叉引用

• responsive-design -- 响应式图片、srcset、picture 元素
• ui-design -- 视觉层级和图片布局
• branding-identity -- 作为品牌标识一部分的视觉语言
• accessibility -- 替代文本、对比度、图片中的文本
• color-theory -- 图片配色在整体配色概念中的应用