Next.js图片优化 #

一、Image组件 #

1.1 基本用法 #

tsx

import Image from 'next/image'

export default function Hero() {
    return (
        <Image
            src="/hero.png"
            alt="Hero image"
            width={1200}
            height={600}
        />
    )
}

1.2 必需属性 #

属性	说明
src	图片路径
alt	替代文本
width	宽度（静态图片可省略）
height	高度（静态图片可省略）

1.3 远程图片 #

tsx

import Image from 'next/image'

export default function RemoteImage() {
    return (
        <Image
            src="https://example.com/image.jpg"
            alt="Remote image"
            width={800}
            height={600}
        />
    )
}

配置远程域名：

typescript

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'example.com',
                port: '',
                pathname: '/images/**',
            },
        ],
    },
}

export default nextConfig

二、自动优化 #

2.1 按需调整大小 #

tsx

<Image
    src="/hero.png"
    alt="Hero"
    width={800}
    height={600}
    sizes="(max-width: 768px) 100vw, 50vw"
/>

2.2 格式转换 #

Next.js 自动将图片转换为 WebP 或 AVIF 格式：

typescript

const nextConfig: NextConfig = {
    images: {
        formats: ['image/avif', 'image/webp'],
    },
}

2.3 图片配置 #

typescript

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
    images: {
        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
        formats: ['image/webp'],
        minimumCacheTTL: 60,
    },
}

export default nextConfig

三、懒加载 #

3.1 默认懒加载 #

tsx

<Image
    src="/image.png"
    alt="Lazy loaded"
    width={800}
    height={600}
/>

3.2 禁用懒加载 #

tsx

<Image
    src="/hero.png"
    alt="Above the fold"
    width={1200}
    height={600}
    loading="eager"
    priority
/>

3.3 懒加载阈值 #

tsx

<Image
    src="/image.png"
    alt="Image"
    width={800}
    height={600}
    loading="lazy"
/>

四、占位符 #

4.1 模糊占位符 #

tsx

import Image from 'next/image'

export default function BlurImage() {
    return (
        <Image
            src="/image.png"
            alt="Blur placeholder"
            width={800}
            height={600}
            placeholder="blur"
            blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..."
        />
    )
}

4.2 自动模糊占位符 #

对于本地图片，自动生成模糊占位符：

tsx

import Image from 'next/image'
import heroImage from './hero.png'

export default function Hero() {
    return (
        <Image
            src={heroImage}
            alt="Auto blur"
            placeholder="blur"
        />
    )
}

4.3 空占位符 #

tsx

<Image
    src="/image.png"
    alt="Empty placeholder"
    width={800}
    height={600}
    placeholder="empty"
/>

五、响应式图片 #

5.1 fill属性 #

tsx

<div className="relative w-full h-64">
    <Image
        src="/hero.png"
        alt="Fill container"
        fill
        className="object-cover"
    />
</div>

5.2 sizes属性 #

tsx

<Image
    src="/image.png"
    alt="Responsive"
    width={800}
    height={600}
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
/>

5.3 响应式示例 #

tsx

export default function ResponsiveGallery({ images }) {
    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {images.map((image) => (
                <div key={image.id} className="relative aspect-video">
                    <Image
                        src={image.url}
                        alt={image.alt}
                        fill
                        sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                        className="object-cover rounded-lg"
                    />
                </div>
            ))}
        </div>
    )
}

六、优先加载 #

6.1 priority属性 #

tsx

<Image
    src="/hero.png"
    alt="Priority image"
    width={1200}
    height={600}
    priority
/>

6.2 首屏图片 #

tsx

export default function Hero() {
    return (
        <section>
            <Image
                src="/hero-bg.png"
                alt="Hero background"
                fill
                priority
                className="object-cover"
            />
            <div className="relative z-10">
                <h1>欢迎</h1>
            </div>
        </section>
    )
}

七、样式处理 #

7.1 object-fit #

tsx

<Image
    src="/image.png"
    alt="Cover"
    fill
    className="object-cover"
/>

<Image
    src="/image.png"
    alt="Contain"
    fill
    className="object-contain"
/>

7.2 圆角 #

tsx

<Image
    src="/avatar.png"
    alt="Avatar"
    width={64}
    height={64}
    className="rounded-full"
/>

7.3 自定义样式 #

tsx

<Image
    src="/image.png"
    alt="Styled"
    width={800}
    height={600}
    className="shadow-lg hover:shadow-xl transition-shadow"
/>

八、最佳实践 #

8.1 首屏图片使用priority #

tsx

export default function Page() {
    return (
        <div>
            <Image src="/hero.png" alt="Hero" priority width={1200} height={600} />
            <Image src="/content.png" alt="Content" width={800} height={600} />
        </div>
    )
}

8.2 使用sizes优化 #

tsx

<Image
    src="/image.png"
    alt="Optimized"
    fill
    sizes="(max-width: 768px) 100vw, 50vw"
/>

8.3 使用blur占位符 #

tsx

<Image
    src={image}
    alt="With blur"
    placeholder="blur"
/>

九、总结 #

图片优化要点：

要点	说明
Image组件	next/image
自动优化	格式转换、压缩
懒加载	loading=“lazy”
占位符	placeholder=“blur”
响应式	fill + sizes
优先加载	priority

下一步，让我们学习字体优化！