图片、视频、音频 — 媒体怎么进页面¶

这一章讲三件事: 图片怎么进页面(以及为什么每张图都必须带一段替代文字); 视频怎么进页面(以及为什么浏览器不许有声视频自动播放);音频怎么进页面(以及为什么书里反复劝你克制)。 暗线是一条工程常识:媒体文件比文字大几个数量级,所以媒体章的一半内容其实在讲「省」。

1. 先看现象:一页文字 vs 一页图¶

上一章那个餐厅页面,全部文字加起来可能不到 10 KB——一张手机拍的照片就有 2–4 MB, 差两三百倍。一个页面放十张图,用户要下载的东西就从「一页纸」变成了「半部电影」。所以媒体元素虽然标签简单(全书最简单的标签就在这一章),用好它们的知识全在标签外面: 格式选谁、要不要压、什么时候加载、放哪托管。这一章按这个顺序讲。

2. 图片:`<img>` 两个属性,一个都不能省¶

加图用 <img> 标签,书里给的完整写法¹:

<img src="carvery.jpg" alt="Our Sunday roast carvery">

两个属性,各管一条命:

src(source,来源):图片文件的路径或网址。 和链接的 href 一样,项目里的相对路径、网上的完整网址都行。
alt(alternative text,替代文字):这张图的一句话描述。 书里给了它两个使用场景²: 图片加载失败时,这段文字直接显示在图片的位置;屏幕阅读器读到图时,把这段文字念给视障用户听。

为什么 alt 不是可选项? 设想两个真实处境:用户在电梯里,图加载不出来,只看到一排空框—— 有 alt 的页面此时还能读;视障用户靠听页面——没有 alt,他对这张图的存在一无所知。 alt 是图片在「机器可读」维度的全部内容,就像 <strong> 是加粗在语义维度的全部内容。 这一行的工作规范里,「img 必须有 alt」是检查清单的第一行(哪怕 alt 故意留空 alt="", 也表示「这图纯装饰,没什么好描述的」——留空和没有是两回事)。

判断(我们的,不是书里的): alt 该怎么写,书只说了「描述图片」,值得再进一步: 写「用户在什么场景下需要这段文字」。「烤牛肉套餐」是描述,「今日特价的烤牛肉套餐,配约克郡布丁」才是替代——它要能顶替图片完成任务。写 alt 问一句「图没了,这句话够不够用」就够了。 如果错,会错在: 有些图确实没有信息(装饰性分隔线),这时 alt 留空才是对的—— 「每图必写长描述」和「每图必带 alt」是两回事,前者是教条。

尺寸:width/height 能写,但别指望它优化¶

<img> 上还能直接写 width="400" height="259" 定死显示尺寸³。书里给了一个诚实的提醒: 这只是「显示多大」,不是「文件多大」——把一个 4 MB 的原图用属性缩成 400 像素显示, 用户照样下载 4 MB。正确的做法是在图片编辑器里先把图缩到目标尺寸、压缩后再存, 工具书点了名:TinyPNG、ImageOptim 这类压缩工具,能在画质损失很小的情况下明显减小文件⁴。

第 07 章之后,尺寸会改用 CSS 管(那样才能做响应式),width/height 属性渐渐退出—— 但它俩有一个隐藏价值值得现在就知道:写上的话,浏览器在图加载完之前就能预留出位置, 页面不会加载时跳动。这是 ④ 类通用知识,书里没有,先记下。

3. 三种图片格式:一张分工表¶

书里把最常用的三种格式按「什么时候用谁」分了工⁵:

格式	特长	用在哪
JPEG	照片和色彩丰富的图,压缩率高	菜品照、活动照片
PNG	支持透明、边缘锐利	logo、图标、截图
WebP	同质量下更小,现代浏览器都支持	能用它就用它

为什么格式重要? 同样的图,WebP 往往比 JPEG 小 30% 上下——对一个十图的页面, 这就是用户少等几秒和流量省几 MB 的差别。书里的推荐顺序也符合 2026 年的现状: WebP 是新项目的默认,PNG 守住「要透明」的阵地,JPEG 守住「老系统兼容」的阵地。

4. 懒加载:把「现在就要」和「等要再看」分开¶

页面有二十张图,用户首屏只看得到三张——剩下十七张现在加载,纯属浪费他的流量和时间。 懒加载(lazy loading)就是解决这个的:给 <img> 加一个属性 loading="lazy", 浏览器就会把这张图的加载推迟到「它快要滚进视野时」⁶:

<img src="image2.jpg" alt="Second Image" loading="lazy">

一个词要先解释:视口(viewport)——浏览器窗口里实际看得见的那一块区域。「above the fold」(首屏,字面意思「折线以上」,借自报纸对折处)指不用滚动就能看到的部分; 「below the fold」指要往下滚才看得到的部分⁷。

于是懒加载的规矩只有一条,书里特意强调了⁸:

首屏的图不要懒加载,首屏以下的图才懒加载。

为什么?懒加载本身有一点点成本(浏览器要监听滚动、判断位置),首屏的图反正立刻就要显示, 推迟它没有任何收益只有延迟。这个细节就是「机制有边界」的现成教材: 同一个属性,放对位置是优化,放错位置是负优化。

  页面: [图1(首屏,正常加载)] ← 立刻加载
         …用户滚动…
        [图2 loading="lazy"]  ← 快滚到时才开始下载
        [图3 loading="lazy"]  ← 同上

  图说:懒加载挪的是“何时加载”,不是“是否加载”。

5. 视频:`<video>` 与它的三个开关¶

视频标签的写法和 img 不同——它肚子里要装一个 <source>(书里的模板⁹):

<video width="400" height="223" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

三个细节:

<source> 子标签:视频有不同的编码格式(MP4 最通行,还有 WebM、MOV、HEVC¹⁰), type 属性告诉浏览器这个文件的格式,省得它猜。标签和 </video> 之间那行文字是兜底: 老式浏览器不认 video 标签时,用户至少看得到这句话。
controls 属性:加上它,浏览器给视频配一套自带的播放/暂停/进度条控件¹¹。不加的话视频就是一个哑画面——教学场景几乎总要加。
autoplay 和 muted 的捆绑规矩:想自动播放,必须同时静音。书里原话:大多数浏览器会拦截「带声音的视频自动播放」;静音的视频才能自动播¹²。这不是浏览器刁难,是 2010 年代被自动播放广告轰炸出来的全网共识: 声音是页面的「最终解释权」,必须留在用户手里。

大文件的出路:别自己扛¶

书在这一节给了整章最有工程味的一段¹³:视频文件巨大,自己服务器直接对外播视频, 带宽(服务器对外传输数据的容量)很快会被吃光;访问量一高,网站就瘫。

出路有两条。第一条,内容分发网络(CDN):把文件复制到全国各地的专业服务器上 (Akamai、Cloudflare、Amazon CloudFront),用户从离他最近的那台取。

这些专业服务器存着文件的副本、就近供货——「存副本、就近取」这个手法叫缓存 (第 07 章「浏览器把 .css 缓存起来」是同一个词)。

第二条,干脆托管给视频平台(YouTube、Vimeo),让它们去操心带宽和转码, 你的页面用嵌入(把外部内容放进页面)的方式引用。

这一段的精髓是前端思维的第一课:你自己的服务器是最贵的资源,能交给专业的就交出去。

6. 音频:`<audio>` 与「克制原则」¶

音频标签和视频几乎同构¹⁴:

<audio controls>
    <source src="audiofile.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

但书对音频的态度明显慎重,原话的大意是:加音频可以增强体验,但必须小心, 只在它真的有用时才加(比如和页面内容相关的播客)¹⁵。为什么比视频还慎重? 因为音频是「无孔不入」的——视频至少占一块画面,用户知道它在哪;声音是不管用户在页面哪个角落都往耳朵里钻的, 用户关它的成本远高于关视频。交互设计的老话「声音默认关闭」就源于此。

7. 作者的判断与证据¶

书内作为事实给出的: alt 的两个使用场景²、三种格式的分工⁵、懒加载机制与首屏界线⁶⁸、自动播放必须有声静音的浏览器行为¹²、CDN/视频托管的带宽逻辑¹³。

属于作者经验、值得当默认值记住的: 「优先 WebP」「首屏不懒加载」「声音克制」—— 这些不是浏览器规则,是行业通行做法;书把它们和硬事实混排,我们帮你分开了。

一处轻描淡写的取舍: 书里用 width/height 属性缩放视频、用属性缩放图片,都是「能跑就行」的教学版; 真实项目媒体尺寸几乎全走 CSS(第 09 章的响应式会告诉你为什么)。

8. 边界与局限¶

格式表只到 WebP。 2026 年的新一代格式 AVIF(比 WebP 更小)书里没提——它不致命, 但你要知道自己手里的表比前沿旧半代。
没有讲 <figure>/<figcaption>。 章末的练习答案里倒是点了这两个「图 + 图注」的语义组合标签¹⁶,正文却没教——本书小毛边之一,补上:成对的图与说明文字,用 <figure> 包起来、图注放 <figcaption>,是这一行的标准做法。
视频转码、流媒体(HLS/DASH)这些真·视频工程不在视野内——那属于「媒体平台」而不是「前端入门」。

9. 可带走的¶

全章主线例子,一行写完: 餐厅页面加媒体 = <img src alt>(图,压缩过、选对格式)→ <video><source …></video>(controls 给人控制权、自动播必带 muted)→ <audio controls>(只在该有的时候才有)。

<img> 的 src 和 alt 一个都不能省;alt 写「图没了时能顶替它完成任务的一句话」;
尺寸用 width/height 属性只是「显示大小」,真省流量要在存进项目前压缩、缩尺寸;
格式分工:照片 JPEG、透明/图标 PNG、能用它就用 WebP⁵;
懒加载 loading="lazy":首屏以下才加,首屏加了是负优化⁸;
视频要 <source> 子标签;controls 给用户控制权;自动播放必须配 muted——浏览器硬规则¹²;
视频别自己服务器扛,CDN 或 YouTube/Vimeo 托管¹³;
音频比视频更需要克制:只在它真的完成任务的场合放;
媒体标签简单,媒体知识全在标签外——格式、压缩、时机、托管,每件都比语法重要。

10. 原文地图¶

主题	原书章	原文位置
img 的 src 与 alt	Images, Video, and Audio	`text/11-fm-introduction.txt:35`(搜「src attribute specifies」) · `text/11-fm-introduction.txt:37`(搜「alternative text description」)
压缩工具与优化	Images, Video, and Audio	`text/11-fm-introduction.txt:41`(搜「TinyPNG」)
三种格式分工	Images, Video, and Audio	`text/11-fm-introduction.txt:45`(搜「best for photographs」) · `text/11-fm-introduction.txt:47`(搜「transparency or sharp edges」) · `text/11-fm-introduction.txt:49`(搜「modern web usage」)
width/height 属性的局限	Images, Video, and Audio	`text/11-fm-introduction.txt:51`(搜「less flexible」)
懒加载与首屏界线	Images, Video, and Audio	`text/11-fm-introduction.txt:55`(搜「defers the loading」) · `text/11-fm-introduction.txt:59`(搜「except for the images」)
视频格式与 source 写法	Images, Video, and Audio	`text/11-fm-introduction.txt:67`(搜「most common」) · `text/11-fm-introduction.txt:73`(搜「video.mp4」)
CDN 与视频托管	Images, Video, and Audio	`text/11-fm-introduction.txt:65`(搜「content delivery network」)
自动播放与静音规矩	Images, Video, and Audio	`text/11-fm-introduction.txt:79`(搜「block autoplay」)
controls 属性	Images, Video, and Audio	`text/11-fm-introduction.txt:89`(搜「controls attribute」)
audio 标签与克制原则	Images, Video, and Audio	`text/11-fm-introduction.txt:105`(搜「enhance the user experience, but it should」)
章末要点:figure/figcaption	Images, Video, and Audio	`text/11-fm-introduction.txt:151`(搜「figcaption」)

出处:「Images, Video, and Audio」第 33 段(text/11-fm-introduction.txt:33,搜「path-to-your-image」)。原书模板:<img src="path-to-your-image" alt="Description of the image">。 ↩
出处:「Images, Video, and Audio」第 37 段(text/11-fm-introduction.txt:37,搜「alternative text description」)。原文:「This text is displayed if the image fails and is used by accessibility devices, such as screen readers, that use this text to describe the image to visually impaired users.」 ↩↩
出处:「Images, Video, and Audio」第 51–53 段(text/11-fm-introduction.txt:51,搜「less flexible」;:53,搜「width="400"」)。书里承认这法子「不够灵活,也不优化图片」。 ↩
出处:「Images, Video, and Audio」第 41 段(text/11-fm-introduction.txt:41,搜「TinyPNG」)。原文点了 TinyPNG 和 ImageOptim,并说明压缩能「在不太牺牲画质的前提下减小文件」。 ↩
出处:「Images, Video, and Audio」第 45、47、49 段(text/11-fm-introduction.txt:45,搜「best for photographs」;:47,搜「transparency or sharp edges」;:49,搜「modern web usage」)。 ↩↩↩
出处:「Images, Video, and Audio」第 55 段(text/11-fm-introduction.txt:55,搜「defers the loading」)。原文:「Lazy loading is an optimization technique that defers the loading of images until they are about to enter the viewport.」 ↩↩
出处:「Images, Video, and Audio」第 55 段(text/11-fm-introduction.txt:55,搜「above the fold」)。原文给出定义:above the fold = 初始加载不用滚动就可见的部分;below the fold = 滚动之后才可见的部分。 ↩
出处:「Images, Video, and Audio」第 55、59 段(text/11-fm-introduction.txt:55,搜「do not lazy load」;:59,搜「except for the images」)。原文:「do not lazy load the images that are immediately visible when the page loads」。 ↩↩↩
出处:「Images, Video, and Audio」第 71–77 段(text/11-fm-introduction.txt:73,搜「video.mp4」)。 ↩
出处:「Images, Video, and Audio」第 67 段(text/11-fm-introduction.txt:67,搜「most common」)。原文:MP4(H.264)最通行,另有 WebM、MOV、HEVC(H.265)。 ↩
出处:「Images, Video, and Audio」第 89 段(text/11-fm-introduction.txt:89,搜「controls attribute」)。原文:「If you want the user to be able to control the video themselves, use the controls attribute.」 ↩
出处:「Images, Video, and Audio」第 79 段(text/11-fm-introduction.txt:79,搜「block autoplay」)。原文:「most browsers block autoplay videos that contain sound, but if you mute the video, it will autoplay without requiring user interaction.」 ↩↩↩
出处:「Images, Video, and Audio」第 65 段(text/11-fm-introduction.txt:65,搜「content delivery network」)。原文点名 Akamai、CloudFlare、Amazon CloudFront,以及 YouTube、Vimeo 两类托管方案。 ↩↩↩
出处:「Images, Video, and Audio」第 107–113 段(text/11-fm-introduction.txt:107,搜「audio controls」)。 ↩
出处:「Images, Video, and Audio」第 105 段(text/11-fm-introduction.txt:105,搜「enhance the user experience, but it should」)。原文:「adding audio to a web page can enhance the user experience, but it should be done carefully to avoid distraction and irritability.」 ↩
出处:「Images, Video, and Audio」第 151 段(text/11-fm-introduction.txt:151,搜「figcaption」)。这是「章末要点」里的建议,正文未展开。 ↩