HTML图片与多媒体重点知识与细节

图片与多媒体是现代网页中视觉与交互的核心部分，而且这几年（2020–2025）变化非常多，比如响应式图片、懒加载、媒体格式、无障碍标签、视频字幕、WebP/AVIF支持等。

🖼️ 一、HTML 图片（`<img>`）基础与现代细节

<img src="photo.jpg" alt="风景照片">

✅ 重点属性

属性	说明
`src`	图片路径
`alt`	替代文字（无障碍与 SEO 必须）
`width` / `height`	显示尺寸（建议配合 CSS 控制）
`loading="lazy"`	懒加载，滚动到视口才加载
`decoding="async"`	异步解码，提高性能
`fetchpriority=“high	low”`	控制图片加载优先级（2024新）
`referrerpolicy`	控制请求头 referrer 行为
`crossorigin`	跨域资源加载时需要设置
`title`	鼠标悬停提示文字

💡最佳实践： 始终提供 alt 文本，否则搜索引擎与屏幕阅读器无法识别。如果图片纯装饰用，可设置 alt=""，避免被读出。

🪄 二、响应式图片（Responsive Images）

让浏览器根据设备屏幕自动选择最合适的图像，是现代前端必须掌握的技巧。

1️⃣ `srcset` 与 `sizes`

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="山景图">

📘说明：

srcset：列出多张图片及其宽度描述（如 400w, 800w）
sizes：告诉浏览器在不同视口下的显示宽度
浏览器自动选择最合适的文件（性能优化）

2️⃣ `<picture>` 元素（媒体条件 + 多格式支持）

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="高山风景">
</picture>

📘说明：

浏览器会从上到下检测支持的格式（如 AVIF → WebP → JPG）

<picture> 也支持 media 条件：

<source media="(max-width: 600px)" srcset="small.jpg">

最后 <img> 是兜底方案。

⚙️ 三、图片格式（2025年常用）

格式	优点	适用场景
JPEG	有损压缩，体积小	照片、摄影图
PNG	无损，支持透明	图标、截图、UI
WebP	体积小，画质高	Web 默认推荐（支持广泛）
AVIF	压缩更强，HDR支持	高质量、现代浏览器
SVG	矢量图，可CSS/JS操作	图标、Logo
GIF	动画，体积大	轻动画、表情包（被视频替代中）
ICO	网站图标（favicon）	浏览器标签、PWA图标

💡趋势：

推荐主流格式组合：AVIF + WebP + JPG 作为渐进方案。
SVG 图标越来越普遍（支持响应式、变色动画）。

🌄 四、性能优化细节

技术	用法	说明
懒加载	`<img loading="lazy">`	延迟加载非首屏图片
优先加载	`<img fetchpriority="high">`	提示浏览器优先加载关键图
预加载	`<link rel="preload" as="image" href="hero.webp">`	提前下载关键资源
解码优化	`<img decoding="async">`	异步解码防止阻塞渲染
WebP/AVIF 多源	`<picture>` 结构	自动适配最优格式
CDN自适应	动态生成不同尺寸图	常见于 Cloudflare / Vercel 图片服务

🎥 五、视频（`<video>`）要点与进阶

<video controls width="640" preload="metadata" poster="thumb.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持视频播放。
</video>

属性	说明
`controls`	显示播放控制
`autoplay`	自动播放（需静音）
`muted`	静音播放
`loop`	循环播放
`poster`	封面图
`preload`	预加载策略：`none`, `metadata`, `auto`
`playsinline`	移动端内联播放（防全屏）

💡 注意：

iOS/Chrome 等浏览器要求 静音 (muted) 才允许 autoplay。
多个 <source> 提供兼容格式，浏览器自动选择。

🎬 六、视频字幕与多语言支持

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
  <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
</video>

属性	说明
`kind="subtitles"`	字幕轨道
`srclang`	字幕语言代码
`label`	菜单显示文字
`default`	默认启用该字幕

字幕文件 .vtt 示例：

WEBVTT
00:00:00.000 --> 00:00:04.000
你好，欢迎来到影片。

00:00:04.000 --> 00:00:08.000
今天我们将学习 HTML 视频。

🎧 七、音频（`<audio>`）标签

<audio controls preload="none">
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  您的浏览器不支持音频播放。
</audio>

属性	说明
`controls`	显示播放控制
`autoplay`	自动播放（静音时才允许）
`loop`	循环播放
`preload`	`none` / `metadata` / `auto`
`muted`	静音启动
`crossorigin`	允许跨域加载

💡细节：

多音轨、背景音乐通常配合 JS 控制。
AudioContext（Web Audio API）可做音效处理、可视化。

🎛️ 八、现代浏览器多媒体 API（了解）

API	用途
`HTMLMediaElement`	控制播放、暂停、音量、事件监听
`MediaSource Extensions (MSE)`	流式加载视频（如 HLS/DASH 播放）
`Web Audio API`	实现音频可视化、滤波、混响等效果
`MediaRecorder API`	录音/录屏功能
`Picture-in-Picture API`	画中画播放
`Fullscreen API`	视频全屏显示

🪶 九、无障碍与 SEO 细节

内容	建议
图片	提供准确 `alt` 文本
装饰图片	`alt=""` 且 `role="presentation"`
视频	提供字幕轨 `<track>`
音频	提供文字说明或转录文本
图像按钮	使用 `<button><img></button>` 而非裸图

🧩 十、常见错误与兼容建议

问题	说明
忘记 `alt`	严重影响 SEO 与可访问性
图片过大	未优化分辨率或压缩
使用 `autoplay`	会被移动端拦截（必须静音）
`<video>` 没设置 `preload`	默认下载整个视频，浪费流量
没有提供多格式	WebP/AVIF 不兼容时图片消失
没用 HTTPS	某些浏览器会禁止媒体自动播放

✅ 十一、总结重点

类别	关键特性
图片基础	`alt`, `loading`, `decoding`, `fetchpriority`
响应式图像	`srcset`, `sizes`, `<picture>`
性能优化	懒加载、预加载、WebP/AVIF
视频	多源格式、自动播放、poster、字幕
音频	控制播放、loop、preload
无障碍	`alt`、`track`、`role="presentation"`
新趋势	`fetchpriority`、AVIF、Picture-in-Picture API

🖼️ 图片开发 Checklist

✅ 基础

使用 <img>，必须写 alt
图片尺寸用 CSS 控制，不用 width/height 属性固定
需要性能优化时，加 loading="lazy"
需要异步解码时，加 decoding="async"

⚡ 响应式与兼容

小屏 → 大屏使用 srcset / sizes
不同格式（WebP / JPEG）使用 <picture>
确保 fallback 图片能正常显示
优先使用 .webp、.avif 格式

🧩 语义与可访问性

内容图片：alt="描述"
装饰图片：alt="" 或用 CSS 背景图
使用 SVG 时：可内嵌控制颜色与动画

🎥 视频开发 Checklist

<video src="xxx.mp4" controls> 是基础
同时提供多格式（mp4、webm）以增强兼容性
若需自动播放：必须加 muted autoplay
加封面：poster="cover.jpg"
循环播放：loop
加字幕：<track kind="subtitles" src="xx.vtt" srclang="en">
不需要预加载内容：preload="metadata"

🎵 音频开发 Checklist

<audio controls> 必须有可播放控制
提供多格式：mp3、ogg
适当设置 autoplay / loop / muted
大文件时，使用 preload="none" 减轻加载压力

🌐 其他媒体（嵌入）

嵌入 YouTube / 地图时使用 <iframe>
添加 loading="lazy"
安全起见，加 sandbox 属性
避免使用过时的 <embed> / <object>

🧠 性能与优化

使用现代图片格式（WebP / AVIF）
启用懒加载（loading="lazy")
压缩媒体文件体积（TinyPNG、FFmpeg）
CDN 加速（如 Cloudflare、Vercel Assets）