Frontend Academy · 课时

图像优化：懒加载、WebP 格式

为图像添加 loading=lazy，提供现代 WebP 和 AVIF 格式，使用带有 srcset 和 sizes 的响应式图像，并设置明确的宽度和高度以防止布局偏移。

图像优化：懒加载、WebP 格式 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

图片占据页面体积的大部分

网页的中位页面大小约为 2MB，其中图片约占一半。优化图片是提升性能影响最大的单项任务。

现代格式：WebP 和 AVIF

WebP 在质量相近的情况下比 JPEG 小 25%–35%，所有现代浏览器都支持。AVIF 还要更小（可减少 50%），但编码速度更慢。两者都应使用，并提供后备方案。

picture 元素

使用 <picture>，在支持时提供 AVIF，然后提供 WebP，最后以 JPEG 作为后备格式。

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

原生延迟加载

为首屏以下的图片添加 loading="lazy"。浏览器会将加载推迟到图片接近视口时——无需任何 JavaScript。

<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">

<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">

使用 srcset 和 sizes 的响应式图片

为较小的屏幕提供较小的图片。srcset 会列出带有宽度的候选图片；sizes 会告知浏览器图片在各个断点处显示的宽度。

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w,
          /photo-800.jpg 800w,
          /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="" width="800" height="600">

为什么要明确设置 width 和 height

浏览器会根据 width/height 属性预留空间，从而防止图片到达时发生布局偏移。现代浏览器会根据这些属性自动计算宽高比。

decoding="async"

添加 decoding="async"，允许浏览器在主线程之外解码图片，从而让主线程可以绘制其他内容。

<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">

图片 CDN

图片 CDN（Cloudinary、imgix、Vercel Image Optimization、Cloudflare Images）可以实时转换图片：调整尺寸、转换为 WebP/AVIF、压缩，并从边缘缓存提供服务。

<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">

Next.js Image 组件

Next.js 的 <Image> 开箱即用地处理响应式 srcset、WebP 转换、延迟加载和模糊占位符。

import Image from 'next/image';

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  placeholder="blur"
  priority={isHero}
/>

压缩 JPEG 和 PNG

如果无法切换到 WebP，至少要进行压缩：单张图片可使用 Squoosh（squoosh.app），批量处理可使用 ImageOptim，或者在构建脚本中使用 sharp。

用于图标和徽标的 SVG

图标、徽标和任何矢量图都应使用 SVG。SVG 可以完美缩放、体积很小，并且可以使用 CSS 设置样式。将较小的 SVG 内联，以避免额外的 HTTP 请求。

快速检查

哪个 HTML 属性会告知浏览器推迟加载图片，直到图片接近视口？

回顾：图片优化

通过 picture 元素使用现代格式（AVIF、WebP）。在首屏以下添加 loading="lazy"，为首屏主图设置 fetchpriority="high"。明确设置宽度和高度，以防止 CLS。使用 srcset/sizes 提供响应式图片。图片 CDN 可以自动完成转换。Next.js Image 会处理所有这些工作。图标使用 SVG。

常见问题解答

「图像优化：懒加载、WebP 格式」课时是免费的吗？

是的 — 「图像优化：懒加载、WebP 格式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「图像优化：懒加载、WebP 格式」这节课中我会学到什么？

为图像添加 loading=lazy，提供现代 WebP 和 AVIF 格式，使用带有 srcset 和 sizes 的响应式图像，并设置明确的宽度和高度以防止布局偏移。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「图像优化：懒加载、WebP 格式」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy