第07篇：图片与多媒体

第07篇图片与多媒体网页有了文字和链接还需要图片来丰富视觉表达。从基础的img标签到响应式图片、语义化图片容器本篇带你全面掌握。学习目标深入理解img标签的所有重要属性及其作用掌握srcset和sizes实现响应式图片学会使用picture元素按条件加载不同图片理解figurefigcaption的语义化图片包裹了解图片懒加载和加载失败的降级处理核心知识点一、img标签全面解析img是网页中最常用的媒体标签用于嵌入图片资源。imgsrcphoto.jpgalt一只橘猫在阳光下睡觉width600height400loadinglazy核心属性详解属性作用是否必须示例值src图片路径Source✅images/cat.jpg、https://...alt替代文本描述✅一只橘猫在阳光下睡觉width图片显示宽度像素推荐600height图片显示高度像素推荐400loading加载策略推荐lazy懒加载、eager立即加载decoding解码策略可选async、sync、autosrcset多分辨率图片列表进阶见下文sizes图片在不同视口下的显示尺寸配合 srcset见下文alt属性的正确用法再强调alt不是可有可无的装饰它承载三个核心功能图片加载失败时显示替代文字屏幕阅读器朗读给视障用户搜索引擎通过alt理解图片内容!-- ✅ 好的 alt准确描述图片内容 --imgsrcteam-photo.jpgalt公司2024年度团建合影15名员工在天安门广场前微笑!-- ❌ 差的 alt没有信息价值 --imgsrcteam-photo.jpgalt图片imgsrcteam-photo.jpgalt照片!-- ✅ 装饰性图片alt 设为空字符串 --imgsrcdivider-line.pngaltrolepresentationwidth和height的重要性!-- ✅ 同时设置宽高浏览器能预留空间避免布局抖动CLS --imgsrchero.jpgwidth1200height600alt首屏大图!-- ❌ 只设置 width浏览器不知道高度图片加载时内容会跳动 --imgsrchero.jpgwidth1200alt首屏大图CLSCumulative Layout Shift图片没有预设尺寸时加载完成后会撑开空间导致页面内容突然下移用户体验很差。同时设置widthheight可以让浏览器提前预留空间。二、响应式图片srcset与sizes不同设备需要不同尺寸的图片手机上加载 400px 宽就够了桌面显示器可能需要 1200px。srcset让浏览器根据设备条件自动选择最合适的图片。基于像素密度的srcsetDPRimgsrcphoto-1x.jpgsrcsetphoto-1x.jpg 1x, photo-2x.jpg 2x, photo-3x.jpg 3xalt产品照片语法含义photo-1x.jpg 1x标准屏DPR1使用photo-2x.jpg 2x视网膜屏DPR2如 iPhone使用photo-3x.jpg 3x高密度屏DPR3使用基于宽度的srcsetsizesimgsrcflower-400.jpgsrcsetflower-400.jpg 400w, flower-800.jpg 800w, flower-1200.jpg 1200wsizes(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vwalt一束鲜花逐行解析代码含义srcset中的400w告诉浏览器这张图片的实际宽度是 400 像素sizes(max-width: 600px) 100vw当视口 ≤ 600px 时图片显示宽度是视口宽度的 100%sizes(max-width: 900px) 50vw当 600px 视口 ≤ 900px 时图片显示宽度是视口的 50%sizes33vw默认情况视口 900px图片显示宽度是视口的 33%浏览器的选择逻辑1. 浏览器知道当前视口宽度如 375pxiPhone 2. 查 sizes375px ≤ 600px → 图片显示宽度 100vw 375px 3. 查 srcset哪张图片最接近 375pxflower-400.jpg400w 4. 加载 flower-400.jpg简单记忆srcset提供有哪些可选图片sizes告诉浏览器图片会显示多大。浏览器根据这两个信息做最优选择。三、picture元素艺术指导Art Directionsrcset解决的是同一图片的不同尺寸而picture解决的是不同场景下显示完全不同的图片。picture!-- 当视口宽度 ≥ 800px 时使用这张大图 --sourcesrcsethero-desktop.jpgmedia(min-width: 800px)!-- 当视口宽度 ≥ 400px 时使用这张中图 --sourcesrcsethero-tablet.jpgmedia(min-width: 400px)!-- 兜底移动端小图img 必须存在作为后备 --imgsrchero-mobile.jpgalt响应式英雄图/picturepicture的使用场景场景说明裁切不同构图桌面显示完整风景手机只显示核心主体格式回退优先使用 WebP不支持则回退到 JPEG方向适配横屏设备显示横图竖屏设备显示竖图格式回退示例WebP → JPEGpicture!-- 浏览器支持 WebP 就用 WebP体积更小 --sourcesrcsetimage.webptypeimage/webp!-- 不支持就回退到 JPEG --sourcesrcsetimage.jpgtypeimage/jpeg!-- 最后的 img 是必须的 --imgsrcimage.jpgalt描述图片/picture⚠️注意picture本身不产生任何视觉效果它只是图片的包装器。真正的显示由内部的img完成。四、语义化图片容器figurefigcaption当图片需要附带说明文字时使用figure包裹语义更清晰。figureimgsrcmars-rover.jpgalt火星车在红色沙丘上行驶width800height500figcaption图 1毅力号火星车在 Jezero 陨石坑采集岩石样本。 图片来源NASA/JPL-Caltech/figcaption/figurefigure的语义figure表示独立的内容单元通常包含一张图片 说明一段代码 说明一个图表/表格 说明一段引用 说明!-- figure 不只用于图片 --figureprecodeconst greeting Hello, World!;/code/prefigcaption示例 2.1JavaScript 的常量声明/figcaption/figurefigcaption的位置figcaption可以放在figure的第一个子元素位置说明在图片上方或最后一个子元素位置说明在图片下方figurefigcaption图 1产品外观上方说明/figcaptionimgsrcproduct.jpgalt产品照片/figurefigureimgsrcproduct.jpgalt产品照片figcaption图 1产品外观下方说明/figcaption/figure五、图片懒加载懒加载Lazy Loading让图片在即将进入视口时才加载减少初始页面加载时间。!-- 页面首屏的图片立即加载 --imgsrchero.jpgalt首屏大图loadingeager!-- 页面底部的图片懒加载 --imgsrcgallery-1.jpgalt画廊照片1loadinglazyimgsrcgallery-2.jpgalt画廊照片2loadinglazy值行为使用场景eager立即加载默认值首屏图片、关键内容lazy滚动到视口附近才加载首屏下方的图片、长列表图片六、图片加载失败的处理图片可能因网络问题、路径错误、服务器故障而加载失败。使用onerror事件JavaScriptimgsrcphoto.jpgalt描述onerrorthis.srcfallback.jpg使用 CSS 降级样式styleimg{/* 图片加载前显示占位背景 */background-color:#f0f0f0;/* 图片加载失败时显示破碎图片图标 */}/style⚠️最佳实践始终提供有意义的alt文本这是图片加载失败时唯一的降级内容。七、图片格式速查格式特点适用场景JPEG有损压缩体积小不支持透明照片、复杂图像PNG无损压缩支持透明图标、需要透明的图片、截图GIF支持动画最多 256 色简单动画逐渐被 WebP/Video 替代WebP体积小、支持透明和动画现代浏览器的首选格式SVG矢量无限缩放不失真图标、Logo、简单图形AVIF体积比 WebP 更小前沿格式兼容性还在提升动手练习练习 1完善图片标签找出以下代码的问题并修正imgsrcbanner.pngimgsrcphoto.jpgalt图片width100%imgsrcicon.svgaltwidth24height24练习 2响应式图片实战使用srcsetsizes为一篇文章配图创建响应式方案准备三张不同尺寸的图片400w、800w、1200w当视口 ≤ 600px 时图片占满宽度当 600px 视口 ≤ 1000px 时图片占 80% 宽度当视口 1000px 时图片固定 800px 宽在浏览器 DevTools 的设备模拟中测试不同尺寸练习 3图片画廊页面创建一个包含 6 张图片的画廊页面每张图片使用figurefigcaption包裹首屏图片立即加载其余图片懒加载为每张图片写好alt文本使用picture实现移动端和桌面端显示不同裁切比例的图片至少一张常见误区 ⚠️误区真相“alt可以不写”必须写不写会导致可访问性问题和 SEO 损失“width100%是正确的写法”width属性只接受像素值无单位。百分比用 CSSwidth: 100%“srcset会自动调整图片大小”srcset只决定加载哪张图片显示大小还是由 CSS 或width属性控制“picture可以省略img”不可以img是必需的不支持source的浏览器会回退到img“懒加载对所有图片都好”首屏图片应该loadingeager否则用户会看到一个空白“figure只能放图片”figure可以包裹任何独立内容单元代码、引用、图表等“WebP 所有浏览器都支持”IE 不支持Safari 14 以下不支持。生产环境需提供格式回退“图片越大越清晰越好”过大的图片浪费带宽。用srcset提供合适尺寸或用压缩工具优化速查卡片 img标签完整属性imgsrc图片路径alt替代文本描述width显示宽度!--像素值无单位--height显示高度!-- 像素值无单位 --loadinglazy!-- lazy | eager --decodingasync!-- async | sync | auto --srcset...!-- 响应式图片源 --sizes...!-- 配合 srcset 使用 --srcsetsizes模板!-- 基于宽度w 描述符--imgsrcsetsmall.jpg 400w, medium.jpg 800w, large.jpg 1200wsizes(max-width: 600px) 100vw, 50vwsrcmedium.jpgalt描述!-- 基于像素密度x 描述符--imgsrcsetphoto.jpg 1x, photo2x.jpg 2xsrcphoto.jpgalt描述picture元素模板picturesourcesrcsetimage.webptypeimage/webpsourcesrcsetimage.jpgtypeimage/jpegmedia(min-width: 800px)imgsrcimage-fallback.jpgalt描述/picturefigurefigcaption模板figureimgsrcphoto.jpgalt描述width800height600figcaption图片说明文字/figcaption/figure图片格式选择决策是照片/复杂图像 ├── 是 → 需要透明 │ ├── 是 → PNG或 WebP │ └── 否 → JPEG或 WebP └── 否 → 是图标/Logo/图形 ├── 是 → SVG无限缩放 └── 否 → 是简单动画 ├── 是 → WebP 动画 / 视频 └── 否 → PNG图片 checklistalt属性已填写描述准确widthheight已同时设置避免布局抖动首屏图片用loadingeager其余用loadinglazy大尺寸图片考虑srcset响应式加载需要说明文字时用figurefigcaption扩展阅读MDN: 元素MDN: 响应式图片MDN: 元素MDN:和Google Web.dev: 优化图片加载英文下一步图片让页面有了视觉表达接下来进入 第08篇音频与视频让页面有声有色。