HTML Academy · 课时

用于艺术指导的 picture 元素

Q: 「用于艺术指导的 picture 元素」这节课中我会学到什么？

根据视口条件替换整张图像。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

根据视口条件替换整张图像。

用于艺术指导的 picture 元素 是 CoddyKit 上的免费 HTML Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

艺术指导问题

艺术指导是指根据屏幕尺寸提供完全不同的图像 crop 或构图：

桌面设备上显示完整的横向照片
移动设备上显示放大的纵向 crop
仅靠 srcset + sizes 无法解决此问题

图片元素

<picture> 元素包裹多个 <source> elements 和一个 <img> 回退项：

<picture>
  <source media="(min-width: 800px)" srcset="wide-crop.jpg">
  <source media="(min-width: 500px)" srcset="medium-crop.jpg">
  <img src="narrow-crop.jpg" alt="Team photo">
</picture>
<!-- Browser picks the first matching source -->
<!-- img is required as fallback and carries the alt attribute -->

图片元素的工作方式

浏览器会按顺序从上到下评估 <source> elements：

检查第一个来源的 media 条件——如果匹配，则使用该图像
检查第二个来源——如果匹配，则使用该图像
如果都不匹配，则回退到 <img> 作为默认项

<img> 元素仍会显示选定的图像，并携带 alt 文本。

使用 with 图片元素切换格式

<picture> 还可以根据浏览器支持情况选择图像格式：

<picture>
  <!-- AVIF: best compression, newest support -->
  <source type="image/avif" srcset="photo.avif">
  <!-- WebP: great compression, wide support -->
  <source type="image/webp" srcset="photo.webp">
  <!-- JPEG: universal fallback -->
  <img src="photo.jpg" alt="Mountain photo">
</picture>
<!-- Browser picks the first format it supports -->

结合艺术指导和格式选择

您可以结合媒体条件和格式选择：

<picture>
  <source
    media="(min-width: 800px)"
    type="image/webp"
    srcset="hero-wide.webp"
  >
  <source
    media="(min-width: 800px)"
    srcset="hero-wide.jpg"
  >
  <source type="image/webp" srcset="hero-mobile.webp">
  <img src="hero-mobile.jpg" alt="Hero image" width="1200" height="600">
</picture>

图片元素是必需的

<picture> inside 的 <img> 元素不是可选项：

它会显示选定的图像
它会携带用于无障碍访问的 alt 文本
它会携带 width、height、loading 和其他属性
没有它，就不会显示任何内容

来源元素的媒体属性

media 属性接受标准 CSS 媒体查询：

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="portrait.jpg" alt="Scene">
</picture>

<!-- Other media features work too: -->
<!-- (prefers-color-scheme: dark) -->
<!-- (min-resolution: 2dppx) -->
<!-- (max-width: 600px) -->

来源元素的响应式选择

将艺术指导与图像源集搭配使用，以实现完整控制：

<picture>
  <!-- Desktop: wide hero, multiple resolutions -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1024.jpg 1024w, hero-2048.jpg 2048w"
    sizes="100vw"
  >
  <!-- Mobile: portrait crop -->
  <img
    srcset="hero-mobile-400.jpg 400w, hero-mobile-800.jpg 800w"
    sizes="100vw"
    src="hero-mobile-400.jpg"
    alt="Conference keynote speaker on stage"
  >
</picture>

深色模式图像

为深色模式用户提供不同的图像：

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="logo-dark.svg"
  >
  <img src="logo-light.svg" alt="Company logo" width="120" height="40">
</picture>
<!-- Users with dark mode OS setting see logo-dark.svg -->
<!-- Everyone else sees logo-light.svg -->

图片元素与 CSS 背景图像的比较

何时使用 <picture>，何时使用 CSS 背景：

内容图像——使用 <picture>：需要替代文本，是文档内容的一部分
装饰性图像——使用带媒体查询的 CSS background-image
对 SEO 重要的图像——始终使用 <picture>：爬虫会索引图像 elements

无障碍提示

alt 属性始终属于 <img>，而不属于 <source>：

<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- alt goes on img, not source: -->
  <img src="photo.jpg" alt="Sunset over the Pacific Ocean">
</picture>
<!-- screen readers read img's alt, whichever source was selected -->

使用图片元素进行延迟加载

为 <picture> inside 的 <img> 添加延迟加载：

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img
    src="photo.jpg"
    alt="Gallery photo"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

快速检查

在图片块中，哪个元素必须始终存在，并携带替代文本属性？

回顾：图片元素

使用图片元素实现艺术指导：

<picture> 包裹 <source> elements 和一个 <img>
浏览器选择第一个匹配的 <source>
使用 media 表示视口条件，使用 type 进行格式选择
<img> 是必需的——它显示图像并携带替代文本
与 srcset + sizes 结合使用，以实现完整的响应式控制

常见问题解答

「用于艺术指导的 picture 元素」课时是免费的吗？

是的 — 「用于艺术指导的 picture 元素」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「用于艺术指导的 picture 元素」这节课中我会学到什么？

根据视口条件替换整张图像。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「用于艺术指导的 picture 元素」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy