编程语言研究书库
HTML/CSS/JavaScript Web 开发

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

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

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

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

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

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

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

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

两个属性,各管一条命:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

大文件的出路:别自己扛

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

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

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

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

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

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

音频标签和视频几乎同构14:

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

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

7. 作者的判断与证据

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

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

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

8. 边界与局限

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

9. 可带走的

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

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

10. 原文地图

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

Footnotes

  1. 出处:「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">。 ↩

  2. 出处:「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.」 ↩ ↩2

  3. 出处:「Images, Video, and Audio」第 51–53 段(text/11-fm-introduction.txt:51,搜「less flexible」;:53,搜「width="400"」)。书里承认这法子「不够灵活,也不优化图片」。 ↩

  4. 出处:「Images, Video, and Audio」第 41 段(text/11-fm-introduction.txt:41,搜「TinyPNG」)。原文点了 TinyPNG 和 ImageOptim,并说明压缩能「在不太牺牲画质的前提下减小文件」。 ↩

  5. 出处:「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」)。 ↩ ↩2 ↩3

  6. 出处:「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.」 ↩ ↩2

  7. 出处:「Images, Video, and Audio」第 55 段(text/11-fm-introduction.txt:55,搜「above the fold」)。原文给出定义:above the fold = 初始加载不用滚动就可见的部分;below the fold = 滚动之后才可见的部分。 ↩

  8. 出处:「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」。 ↩ ↩2 ↩3

  9. 出处:「Images, Video, and Audio」第 71–77 段(text/11-fm-introduction.txt:73,搜「video.mp4」)。 ↩

  10. 出处:「Images, Video, and Audio」第 67 段(text/11-fm-introduction.txt:67,搜「most common」)。原文:MP4(H.264)最通行,另有 WebM、MOV、HEVC(H.265)。 ↩

  11. 出处:「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.」 ↩

  12. 出处:「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.」 ↩ ↩2 ↩3

  13. 出处:「Images, Video, and Audio」第 65 段(text/11-fm-introduction.txt:65,搜「content delivery network」)。原文点名 Akamai、CloudFlare、Amazon CloudFront,以及 YouTube、Vimeo 两类托管方案。 ↩ ↩2 ↩3

  14. 出处:「Images, Video, and Audio」第 107–113 段(text/11-fm-introduction.txt:107,搜「audio controls」)。 ↩

  15. 出处:「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.」 ↩

  16. 出处:「Images, Video, and Audio」第 151 段(text/11-fm-introduction.txt:151,搜「figcaption」)。这是「章末要点」里的建议,正文未展开。 ↩

HTML 元素 — 文字、表格、链接与列表

Previous Page

表单 — 让用户把数据交回来

Next Page

On this page

图片、视频、音频 — 媒体怎么进页面1. 先看现象:一页文字 vs 一页图2. 图片:<img> 两个属性,一个都不能省尺寸:width/height 能写,但别指望它优化3. 三种图片格式:一张分工表4. 懒加载:把「现在就要」和「等要再看」分开5. 视频:<video> 与它的三个开关大文件的出路:别自己扛6. 音频:<audio> 与「克制原则」7. 作者的判断与证据8. 边界与局限9. 可带走的10. 原文地图Footnotes