Skip to main content

图片优化

Examples

根据 网络年鉴，图片占典型网站 页面重量 的很大一部分，并且可以对网站的 LCP 性能 产生相当大的影响。

¥According to Web Almanac, images account for a huge portion of the typical website’s page weight and can have a sizable impact on your website's LCP performance.

Next.js 图片组件扩展了 HTML <img> 元素，具有自动图片优化功能：

¥The Next.js Image component extends the HTML <img> element with features for automatic image optimization:

  • 尺寸优化：使用 WebP 和 AVIF 等现代图片格式自动为每个设备提供正确尺寸的图片。

    ¥Size Optimization: Automatically serve correctly sized images for each device, using modern image formats like WebP and AVIF.

  • 视觉稳定性：加载图片时自动阻止 布局转变。

    ¥Visual Stability: Prevent layout shift automatically when images are loading.

  • 更快的页面加载：仅当图片使用原生浏览器延迟加载进入视口时才会加载图片，并带有可选的模糊占位符。

    ¥Faster Page Loads: Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders.

  • 资源灵活性：按需调整图片大小，即使是存储在远程服务器上的图片

    ¥Asset Flexibility: On-demand image resizing, even for images stored on remote servers

🎥 监视：了解有关如何使用 next/image → YouTube（9 分钟） 的更多信息。

¥🎥 Watch: Learn more about how to use next/image → YouTube (9 minutes).

用法​

¥Usage

import Image from 'next/image'

然后，你可以为图片（本地或远程）定义 src。

¥You can then define the src for your image (either local or remote).

本地图片​

¥Local Images

要使用本地映像，请 import 你的 .jpg、.png 或 .webp 映像文件。

¥To use a local image, import your .jpg, .png, or .webp image files.

Next.js 将根据导入的文件 自动判断 图片的内部 width 和 height。这些值用于确定图片比例并在图片加载时防止 累积布局偏移。

¥Next.js will automatically determine the intrisic width and height of your image based on the imported file. These values are used to determine the image ratio and prevent Cumulative Layout Shift while your image is loading.

import Image from 'next/image'
import profilePic from './me.png'

export default function Page() {
  return (
    

<img src="https://next.nodejs.cn/_next/image?url=/docs/light/responsive-image.png&w=3840&q=75"/>



```jsx
import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Responsive() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      

<img src="https://next.nodejs.cn/_next/image?url=/docs/light/fill-container.png&w=3840&q=75"/>



```jsx
import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Fill() {
  return (
    <div
      style={{
        display: 'grid',
        gridGap: '8px',
        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
      }}
    >
      <div style={{ position: 'relative', height: '400px' }}>
        

<img src="https://next.nodejs.cn/_next/image?url=/docs/light/background-image.png&w=3840&q=75"/>



```jsx
import Image from 'next/image'
import mountains from '../public/mountains.jpg'

export default function Background() {
  return (
    <Image
      alt="Mountains"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}

有关与各种样式一起使用的图片组件的示例，请参阅 图片组件演示。

¥For examples of the Image component used with the various styles, see the Image Component Demo.

其他属性​

¥Other Properties

查看 next/image 组件可用的所有属性。

¥View all properties available to the next/image component.

配置​

¥Configuration

next/image 组件和 Next.js 图片优化 API 可以在 next.config.js file 中配置。这些配置允许你 启用远程图片、定义自定义图片断点、改变缓存行为 等。

¥The next/image component and Next.js Image Optimization API can be configured in the next.config.js file. These configurations allow you to enable remote images, define custom image breakpoints, change caching behavior and more.

阅读完整的图片配置文档以获取更多信息。

¥Read the full image configuration documentation for more information.