이미지 최적화 가이드

date

Jan 19, 2025

slug

web-image-optimization-best-practices

author

status

Public

품질과 속도를 유지하면서 웹에 최적화된 이미지를 표시하는 방법

웹페이지에서 이미지는 사용자 경험과 디자인의 핵심 요소입니다. 그러나 최적화되지 않은 이미지는 페이지 로딩 속도를 저하시켜 사용자 이탈률을 높일 수 있습니다. 이번에는 품질을 유지하면서 속도를 개선할 수 있는 이미지 최적화 기법을 자세히 소개해보고자 합니다.

1. 이미지 최적화란?

이미지 최적화는 고품질의 이미지를 제공하면서 가능한 한 작은 파일 크기로 유지하는 과정입니다. 이를 통해 다음과 같은 이점을 얻을 수 있습니다:

속도 향상: 페이지 로딩 시간이 빨라져 사용자 경험이 개선됩니다.

SEO 최적화: 검색 엔진에서 더 높은 순위에 노출될 가능성이 커집니다.

대역폭 절약: 사용자 데이터 소비를 줄여 모바일 환경에서도 원활한 사용을 보장합니다.

2. 이미지 형식 선택

적절한 이미지 형식을 선택하면 품질을 유지하면서 파일 크기를 줄일 수 있습니다. 대표적인 이미지 형식과 그 특징을 살펴보겠습니다.

JPEG: 사진과 복잡한 색상을 위한 손실 압축 이미지. 작은 파일 크기를 제공합니다.

PNG: 투명도가 필요할 때 유용한 무손실 압축 이미지.

WebP: JPEG와 PNG보다 약 25~35% 작은 파일 크기로 품질을 유지합니다.

AVIF: 최신 형식으로, WebP보다 더욱 뛰어난 압축 성능을 자랑합니다.

3. 반응형 이미지 설정

3.1 `<img>` 태그와 srcset 활용

HTML의 <img> 태그는 srcset과 sizes 속성을 사용하면 다양한 화면 크기와 해상도에 맞춰 최적화된 이미지를 제공합니다.


<img srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 50vw"
     src="image-large.jpg" alt="반응형 이미지 예제">

4. 이미지 압축 및 최적화 도구

4.1 압축 방법

손실 압축: 일부 데이터 손실을 허용하여 파일 크기를 줄입니다. (JPEG 권장)

무손실 압축: 품질을 유지하면서 크기를 줄입니다. (PNG 권장)

5. Lazy Loading

이미지를 사용자 뷰포트에 들어올 때만 로드하도록 설정하면 초기 로딩 속도를 크게 개선할 수 있습니다. HTML5의 loading 속성을 활용하면 쉽게 설정 가능합니다.


<img src="example.jpg" loading="lazy" alt="지연 로딩 예제">

6. 콘텐츠 전송 네트워크(CDN) 활용

CDN은 이미지 파일을 사용자와 가까운 서버에서 제공하여 로딩 시간을 단축합니다. 대표적인 서비스로 Cloudinary와 ImageKit이 있으며, 자동 최적화 기능도 제공합니다.

7. 이미지의 접근성 향상

7.1 대체 텍스트(Alt Text)

SEO와 접근성을 개선하려면 이미지를 설명하는 alt 속성을 추가해야 합니다.


<img src="example.jpg" alt="강아지가 공원에서 뛰어노는 모습">

7.2 ARIA 속성

장식용 이미지에는 role="presentation" 속성을 사용하여 스크린 리더에서 무시되도록 설정할 수 있습니다.


<img src="decorative.jpg" role="presentation">

8. 자동화된 이미지 최적화 도구

8.1 Next.js Image 컴포넌트

Next.js는 최신 이미지 최적화 기능을 제공합니다. 자동 크기 조정, 지연 로딩, 최신 형식 변환 등을 지원합니다.


import Image from 'next/image';

<Image
  src="/example.jpg"
  alt="최적화 이미지"
  width={500}
  height={500}
  priority
/>

8.2 Gatsby Image Plugin

Gatsby 플러그인을 사용하면 자동 이미지 크기 조정 및 최적화를 제공합니다.

8.3 Sharp

Sharp는 Node.js 기반의 고성능 이미지 처리 라이브러리로, 프레임워크와 독립적으로 사용할 수 있습니다.

9. 중요 이미지는 fetchpriority로 빠르게 로드하기

페이지 로드 시 가장 먼저 표시되어야 하는 중요한 이미지는 fetchpriority="high" 속성을 활용하여 우선적으로 로드할 수 있습니다.


<img src="import-image.jpg" fetchpriority="high" alt="중요한 이미지">

이를 통해 페이지의 Largest Contentful Paint(LCP) 성능을 향상시킬 수 있습니다.

10. Lazy Loading과 async decoding으로 성능 높이기

loading="lazy"를 사용하면 뷰포트에 보이지 않는 이미지를 스크롤 시 로드하도록 설정할 수 있습니다.


<img src="example.jpg" loading="lazy" alt="지연 로딩 예제">

또한, decoding="async" 속성을 추가하여 이미지 디코딩을 비동기적으로 처리해 렌더링 성능을 향상시킬 수 있습니다.


<img src="example.jpg" decoding="async" alt="비동기 디코딩 예제">

11. 핵심 최적화 팁 정리

적절한 형식 선택(WebP, AVIF 등 최신 형식 선호)

반응형 이미지 설정(srcset 및 sizes 활용)

압축 도구 활용(TinyPNG, ImageOptim 등)

Lazy Loading 적용(loading="lazy")

CDN 활용으로 성능 최적화

중요한 이미지는 fetchpriority 속성 활용

비동기 디코딩으로 렌더링 성능 최적화

접근성 향상(alt 텍스트 및 ARIA 속성 추가)