Vercel에서 이미지 최적화(Image Optimization) 완벽 가이드

Introduction

이미지는 웹 페이지의 로딩 속도에 큰 영향을 미칩니다. Vercel의 Image 컴포넌트를 사용하면 이미지를 자동으로 최적화하고 반응형으로 제공할 수 있습니다.

Environment

npm list next
# next@14.1.0

npm list @vercel/og
# @vercel/og@0.5.0

# 이미지 도메인 설정
vercel env ls

Problem

이미지로 인해 페이지 로딩 속도가 느려졌습니다:

# 성능 분석 결과
Largest Contentful Paint (LCP): 4.2s
Total Blocking Time (TBT): 800ms
Cumulative Layout Shift (CLS): 0.15

# 이미지 관련 문제
- 원본 이미지 그대로 전송
- 반응형 이미지 미지원
- Lazy loading 미적용

Solution

1. Next.js Image 컴포넌트 사용

// pages/index.js
import Image from 'next/image';

export default function Home() {
    return (
        

            {/* 기본 이미지 최적화 */}
            

            {/* 반응형 이미지 */}
            
        
    );
}

2. next.config.js 이미지 설정

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        formats: ['image/avif', 'image/webp'],
        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048],
        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
        remotePatterns: [
            {
                protocol: 'https',
                hostname: '**.example.com',
            },
        ],
    },
};

module.exports = nextConfig;

3. 블러 플레이스홀더

import Image from 'next/image';
import { blurDataURL } from './utils';

export default function OptimizedImage() {
    return (
        
    );
}

4. 이미지 프리로딩

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
    return (
        
            
                {/* 중요 이미지 프리로딩 */}
                
            
            
                

                
            
        
    );
}

5. 커스텀 이미지 로더

// next.config.js
const nextConfig = {
    images: {
        loader: 'custom',
        loaderFile: './lib/image-loader.js',
    },
};

module.exports = nextConfig;

// lib/image-loader.js
export default function imageLoader({ src, width, quality }) {
    return `${src}?w=${width}&q=${quality || 75}`;
}

6. 이미지 에러 처리

import Image from 'next/image';
import { useState } from 'react';

export default function SafeImage({ src, alt, ...props }) {
    const [error, setError] = useState(false);

    if (error) {
        return (
            

                Image not available
            
        );
    }

    return (
         setError(true)}
            {...props}
        />
    );
}

Lessons Learned

1. Image 컴포넌트 활용: Next.js의 Image 컴포넌트를 사용하여 자동 최적화를 받으세요
2. sizes 속성 설정: 반응형 이미지의 sizes 속성을 올바르게 설정하세요
3. priority 이미지: LCP에 영향을 미치는 이미지에는 priority 속성을 추가하세요
4. Blurred placeholder: 이미지 로딩 전 블러 플레이스홀더를 표시하세요
5. 포맷 최적화: AVIF와 Webp 포맷을 지원하여 이미지 크기를 줄이세요

This blog does not accept any external sponsorships, affiliate marketing, or ad revenue.