next/image로 이미지 비용 관리하기

이미지 형식·크기·레이아웃을 함께 다뤄

<Image>는 기본 <img> 위에 WebP·AVIF 변환, 반응형 크기, 지연 로딩, blur placeholder, 자리 예약을 더해. 이미지가 늦게 도착해도 공간이 이미 잡혀 있어 Cumulative Layout Shift를 줄여. Vercel에서는 최적화가 edge에서, 자체 호스팅에서는 sharp로 실행돼.

로컬과 원격 이미지의 크기 계약이 달라

파일을 로컬에서 import하면 빌드가 너비와 높이를 알아낼 수 있어. 원격 이미지는 레이아웃을 예약할 수 있도록 width와 height를 명시하고, 허용할 호스트를 images.remotePatterns에 등록해야 해.

Next.js 16에서는 `preload`를 써

첫 화면의 LCP 이미지처럼 미리 가져올 가치가 있는 자산은 예전 priority 대신 preload로 표시해. 기존 코드는 아직 작동하지만 폐기 예정 경고가 나와. 모든 이미지에 붙이면 네트워크 우선순위만 망가지니 핵심 이미지에 한정해.

크기를 모르면 `fill`과 `sizes`를 함께 써

fill은 위치가 잡힌 부모를 채우고 CSS의 object-fit으로 잘라내는 방식을 정해. 실제 표시 폭을 설명하는 sizes도 줘야 브라우저가 필요 이상 큰 파일을 고르지 않아.

각 이미지의 실제 표시 폭, 원본 크기, LCP 여부, 장식 여부를 점검해. 반응형 layout에는 정확한 sizes, 첫 화면 핵심 자산 하나에는 preload, 장식에는 빈 alt를 줘. 원격 호스트는 필요한 경로만 remotePatterns로 허용하고 production 응답의 형식·캐시 header도 확인해.

모든 이미지를 optimizer에 넣는 게 항상 싸지는 않아. 아주 작은 SVG, 이미 CDN에서 최적화된 자산, 권한이 필요한 원격 이미지는 다른 경로가 맞을 수 있어. Image 컴포넌트 사용 여부보다 전송 바이트와 layout 안정성, 접근성 결과를 측정해. 로컬·원격·크기를 모르는 이미지를 각각 느린 네트워크에서 불러 CLS와 전송 크기를 기록해. sizes를 틀리게 줬을 때 선택되는 원본 차이, preload를 여러 장에 남발했을 때 요청 우선순위, 자체 호스팅에서 sharp가 빠졌을 때 경고도 확인해.

Code

크기를 자동으로 아는 로컬 이미지·tsx

import Image from 'next/image';
import hero from '@/public/hero.jpg';

export function Hero() {
  return (
    <Image
      src={hero}
      alt="Hero"
      placeholder="blur"
      preload  // v16 — 'priority' 대체
    />
  );
}

크기를 명시한 원격 이미지·tsx

// next.config.ts
import type { NextConfig } from 'next';
const config: NextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'images.example.com', pathname: '/**' },
    ],
    formats: ['image/avif', 'image/webp'],
  },
};
export default config;

// 컴포넌트 안:
<Image src={user.avatarUrl} alt={user.name} width={48} height={48} className="rounded-full" />

반응형 배경을 위한 fill과 object-fit·tsx

<div className="relative h-64 w-full">
  <Image
    src="/background.jpg"
    alt=""
    fill
    sizes="100vw"
    className="object-cover"
  />
</div>

이미지 형식·크기·레이아웃을 함께 다뤄

로컬과 원격 이미지의 크기 계약이 달라

Next.js 16에서는 `preload`를 써

크기를 모르면 `fill`과 `sizes`를 함께 써

Code

External links

Exercise

Progress

댓글 0

이미지 형식·크기·레이아웃을 함께 다뤄

로컬과 원격 이미지의 크기 계약이 달라

Next.js 16에서는 preload를 써

크기를 모르면 fill과 sizes를 함께 써

Code

External links

Exercise

Progress

Next.js 16에서는 `preload`를 써

크기를 모르면 `fill`과 `sizes`를 함께 써