[17] 이미지 최적화를 어떻게 했나요?

hyeyoonS commented 2 months ago

📎 질문

이미지 최적화를 어떻게 했나요?

✏ 구술 답변 키워드

next/image 컴포넌트
sharp 라이브러리
avif 포맷
이미지 파일 타입 지정
svg 포맷 파일 사용

✏ 서술 답변

next/image 컴포넌트, sharp 라이브러리, avif 포맷, 이미지 파일 타입 지정, svg 포맷 사용 등의 방법으로 이미지를 최적화했다.
next/image 컴포넌트
next.js 서버를 거쳐서 이미지를 자동으로 최적화 해준다.
- 이미지 파일 크기 최적화
- 이미지 사이즈 최적화
- 이미지 파일 캐싱
- Cumulative Layout Shift (CLS) 방지
- 자동 Lazy Loading (필요 시 Pre-Loading 도 가능)
priority = {true} 옵션을 통해 우선적으로 해당 이미지를 preload하여 Largest Contentful Paint (LCP) 를 방지하고 최적화 할 수 있다.

`sharp` 라이브러리

디폴트로는 sqoosh를 사용한다.
sharp가 3배 이상 빠르기 때문에 프로덕션 배포 환경에서는 sharp를 쓰도록 권장하고 있다.

`avif` 포맷

기본 포맷은 webp이다.
webp 대비 avif가 최초 로드는 20% 느리지만, 이미지 사이즈가 20% 더 작기 때문에 캐싱을 통해 속도 이점을 가진다.
avif를 지원하지 않는 브라우저는 webp으로 알아서 최적화 해준다.

`next-env.d.ts` 를 통해 이미지 파일 타입 지정

TypeScript 프로젝트에서는 이미지 파일을 import 할 때 타입을 지정해주는 것이 좋다.


// next-env.d.ts
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

// Add custom image types if necessary declare module '*.jpg' { const content: string; export default content; }

declare module '*.png' { const content: string; export default content; }



### `svg` 포맷
- 아이콘, 서버 제공 이미지 등 가능한 많은 부분에 png, jpeg 포맷보다 이미지 용량이 적은 svg 포맷을 사용함으로서 이미지 로딩 속도를 개선 시킬 수 있다.

Nahyun-Kang commented 2 months ago

리스티웨이브팀의 경우 Next/Image 태그를 이용하여 자동 최적화를 진행했습니다.

Next/Image 사용 이점

Loader을 통해서 커스터마이징할 수 있다.
자동 Lazy Loading (pre Loading을 원하는 경우 취소도 가능)
자동 스켈레톤 UI(placeholder통해서) , 레이아웃 시프팅 방지도 가능합니다.
이미지 캐싱도 자동으로 해주고, expiration time 설정도 가능합니다.
next.config.js를 통해 지정된 곳에서만 이미지를 받아오며 악의적인 유저로부터 앱을 보호할 수 있다.

Jyophie commented 2 months ago

이미지 최적화를 하는 방법은 Next.js가 제공하는 기본 이미지 컴포넌트와 다양한 설정 옵션을 활용하는 것이다.

1. Next.js 이미지 컴포넌트 사용하기

Next.js는 이미지 최적화를 위해 next/image 컴포넌트를 제공함. 이 컴포넌트를 사용하면 이미지 크기 조정, 포맷 변환, lazy loading 등 다양한 최적화 기능을 자동으로 처리할 수 있다.

사용 예시

// pages/index.tsx
import Image from 'next/image';
import exampleImage from '../public/example.jpg';

const Home = () => (
  <div>
    <h1>Next.js Image Optimization</h1>
    <Image
      src={exampleImage}
      alt="Example Image"
      width={500}
      height={300}
    />
  </div>
);

export default Home;

위 코드에서 next/image 컴포넌트를 사용하여 이미지를 렌더링하고 있으며, 이미지의 크기와 alt 텍스트를 설정한다.

2. 이미지 파일 타입 지정하기

TypeScript 프로젝트에서는 이미지 파일을 import 할 때 타입을 지정해주는 것이 좋다. 이를 위해 next-env.d.ts 파일을 수정해준다.

// next-env.d.ts
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

// Add custom image types if necessary
declare module '*.jpg' {
  const content: string;
  export default content;
}

declare module '*.png' {
  const content: string;
  export default content;
}

3. next.config.js 설정

Next.js에서 이미지 최적화 설정을 추가할 수 있다. 예를 들어, 도메인 허용 및 이미지 로더 설정을 하는 방안.

// next.config.js
module.exports = {
  images: {
    domains: ['example.com'], // 외부 이미지 도메인 추가
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
};

4. 외부 이미지 사용

외부 이미지를 사용하는 경우, 이미지 도메인을 next.config.js 파일에 추가하여 허용해야 함.

import Image from 'next/image';

const Home = () => (
  <div>
    <h1>Next.js Image Optimization with External Images</h1>
    <Image
      src="https://example.com/example.jpg"
      alt="Example External Image"
      width={500}
      height={300}
    />
  </div>
);

export default Home;

위 코드에서 외부 이미지를 next/image 컴포넌트를 통해 사용하는 방법을 보여준다.

5. 이미지 최적화 전략

이미지 최적화를 극대화하기 위해 다음과 같은 전략을 고려할 수 있다.

적절한 포맷 사용: JPEG, PNG, WebP 등 상황에 맞는 이미지 포맷을 사용한다.
크기 조정: 사용하지 않는 큰 이미지를 피하고, 필요한 크기만큼만 이미지를 조정한다.
Lazy Loading: next/image는 기본적으로 lazy loading을 지원.
이미지 압축: 이미지 업로드 전에 압축 툴을 사용하여 이미지 크기를 줄인다.

결론

이미지 최적화를 구현하는 방법은 next/image 컴포넌트를 사용하는 것. 이를 통해 다양한 최적화 기능을 간편하게 사용할 수 있으며, 설정 파일을 통해 세부적인 조정도 가능하다.

hyeyoonS commented 2 months ago

최신 버전의 next.js를 사용하였기에, next.js에서 제공하는 <Image>컴포넌트를 사용했습니다.

컴포넌트의 특징

렌더링 시 자동으로 이미지 최적화
- 이미지가 렌더링될 때 자동으로 이미지의 해상도와 형식을 변환하여, 렌더링 시 이미지 최적화를 제공합니다.
레이아웃 시프팅 방지
- 이미지를 미리 로드하기 때문에 사용자가 페이지를 로드할 때 이미지 깜빡임 현상을 방지할 수 있습니다.
- 페이지 초기 로딩 시간을 개선하고 사용자가 페이지를 로드할 때의 안정성을 제공합니다.
레이지 로딩
- 뷰포트에 이미지가 필요한 순간에 이미지를 가져와 최적화 합니다.
- 페이지의 성능을 최적화하고 필요한 이미지를 동적으로 로드하여 사용자 경험을 개선합니다.

Eugene-A-01 commented 2 months ago

Q. 리스티웨이브에 적용한 이미지 최적화 방식

next/Image 컴포넌트를 이용
- 레이지로딩 : 스크린 안에 있는 이미지만 로드하는 레이지로딩을 자동으로 적용
- 이미지 사이즈 최적화 : 디바이스에 따라 적절한 사이즈로 이미지를 제공하고 작은용량의 webp 포맷으로 변환하여 사용
- 이미지 캐싱
포맷 최적화 아이콘, 서버제공 이미지들은 svg 포맷으로 제공 가능한 많은 부분에 png, jpeg 포맷보다 이미지 용량이 적은 svg 포맷 사용해서 이미지 로딩속도 개선시킴

wise-Ag commented 2 months ago

Image 컴포넌트 사용하기

Next에서 제공하는 next/Image를 사용하면 다음과 같은 이미지 최적화를 할 수 있습니다.

사이즈 최적화 : 장치별로 이미지 사이즈를 자동으로 조정합니다.
화면 안정화 : 이미지를 로딩할때 레이아웃이 이동하는 layout shift를 예방합니다.
빠른 페이지 로드 : 이미지가 뷰포트에 들어올 때 이미지를 로드합니다. 이미지를 미리 로드하지 않음으로써 빠른 속도를 제공합니다.

페이지의 요소 중 가장 큰 요소를 Largest Contentful Paint (LCP) element라고 합니다. 콘솔에 경고로 이미지가 LCP에 해당하는지 알 수 있습니다.

priority = {true} 옵션을 사용하면 우선적으로 해당 이미지를 preload하여 최적화할 수 있습니다.

QueenCards / ProjectAnalysis