React Academy · 课时

React 中的图像与字体优化

Q: 「React 中的图像与字体优化」这节课中我会学到什么？

使用 next/image 或延迟加载的 ，并设置正确的尺寸、格式（AVIF/WebP）和 font-display。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 next/image 或延迟加载的，并设置正确的尺寸、格式（AVIF/WebP）和 font-display。

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

为什么图片很关键

图片通常是页面上最大的资源。未优化的图片会导致 LCP 较差、页面加载缓慢以及带宽成本较高，在移动设备上尤其明显。

Next.js Image 组件

next/image 会自动优化图片：默认进行延迟加载，提供响应式 srcSet，使用现代格式（WebP/AVIF），并设置正确的尺寸以防止 CLS。

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority // preload above-the-fold images
  sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>

在纯 React 中进行延迟加载

为原生 <img> 元素添加 loading='lazy'。browser 会延迟加载屏幕外的图片，直到它们即将滚动进入视口。

// Below-the-fold images:
<img src="/product.jpg" alt="Product" loading="lazy" />

// Above-the-fold (hero) — eager to avoid LCP delay:
<img src="/hero.jpg" alt="Hero" loading="eager" fetchPriority="high" />

现代图片格式

使用 WebP 或 AVIF，而不是 JPEG/PNG。相同质量下，AVIF 比 JPEG 小 50%。使用 <picture> 元素进行格式协商，并提供备用格式。

<picture>
  <source srcSet="/hero.avif" type="image/avif" />
  <source srcSet="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="Hero" width="1200" height="600" />
</picture>

使用 srcSet 实现响应式图片

提供多个尺寸，让 browser 根据屏幕选择合适的分辨率，避免为 400px 宽的移动屏幕下载 2000px 宽的图片。

<img
  src="/photo-800.jpg"
  srcSet="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="Photo"
/>

Blurhash / 骨架占位符

图片加载时显示模糊占位符，以防止布局偏移并改善用户感知的性能。

// With next/image blur placeholder:
<Image
  src="/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 blur
/>

字体加载策略

字体会阻塞渲染。使用 font-display: swap，在自定义字体加载期间显示备用字体，从而减少 FOIT（不可见文本闪烁）。

/* In global CSS: */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont.woff2') format('woff2');
  font-display: swap; /* show fallback, swap to MyFont when ready */
}

Next.js 字体优化

next/font 会在构建时加载 Google Fonts，将其托管在自己的服务器上，并应用 font-display: optional，从而消除字体切换造成的 CLS。

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

export default function RootLayout({ children }) {
  return <html className={inter.variable}><body>{children}</body></html>;
}

字体子集化

只加载所需的字符子集。完整的 Unicode 字体可能超过 1MB；拉丁字符子集通常为 30–80KB。

// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin

// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });

预加载关键字体

预加载首屏上方使用的字体，使其与 HTML 解析并行加载，从而减少阻塞渲染的时间。

<link
  rel="preload"
  href="/fonts/MyFont.woff2"
  as="font"
  type="font/woff2"
  crossOrigin="anonymous"
/>

CDN 与缓存

通过 CDN 提供图片和字体，并设置较长的缓存 TTL（Cache-Control: max-age=31536000, immutable）。带内容哈希的文件名可确保新文件绕过缓存。

快速检查

font-display: swap 对 Web 字体有什么作用？

回顾

使用 next/image 自动优化图片，或在纯 React 中使用原生 loading='lazy' + srcSet。通过 <picture> 提供 AVIF/WebP 及备用格式。为 Web 字体应用 font-display: swap，使用 next/font 自托管 Google Fonts，并预加载首屏上方的关键资源。

常见问题解答

「React 中的图像与字体优化」课时是免费的吗？

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

「React 中的图像与字体优化」这节课中我会学到什么？

使用 next/image 或延迟加载的，并设置正确的尺寸、格式（AVIF/WebP）和 font-display。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

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

「React 中的图像与字体优化」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 React Academy