[React] 이미지 최적화 방법

해피몬·2024년 6월 14일

왜 이미지 최적화가 중요한가? 🤔

이미지 최적화는 웹사이트의 성능과 사용자 경험을 향상시키는 중요한 작업임. 이미지 파일이 크면 로딩 시간이 길어져 사용자 이탈을 초래할 수 있으며, 모바일 환경에서는 특히 데이터 소모가 커짐. 최적화된 이미지는 로딩 속도를 높이고, 데이터 사용을 줄이며, SEO(검색엔진 최적화) 성과에도 긍정적인 영향을 줌.

이미지 최적화의 목표 🎯

이미지 최적화의 핵심 목표는 화질을 최대한 유지하면서도 파일 크기를 줄이는 것임. 이는 웹 페이지의 로딩 시간을 단축하고, 사용자 경험을 개선하며, SEO 성과에도 유리하게 작용함. 최적화된 이미지는 모바일 사용자에게도 빠르고 원활한 경험을 제공함으로써 이탈률을 줄이는 데 기여함.

이미지 최적화 방법 🛠️

적절한 이미지 포맷 선택하기

이미지 포맷에 따라 용량, 화질, 그리고 최적화 가능성이 달라짐. 사용 목적에 맞는 포맷을 선택하는 것이 중요함.

JPEG: 복잡한 이미지(예: 사진)에 적합. 압축률이 높아 파일 크기를 크게 줄일 수 있지만, 약간의 화질 손실이 있을 수 있음.
PNG: 투명도가 필요하거나 로고 및 아이콘처럼 정밀한 그래픽에 적합. 무손실 압축을 제공하지만 JPEG보다 파일 크기가 클 수 있음.
WebP: Google에서 개발한 고효율 포맷으로, JPEG와 PNG에 비해 훨씬 작은 파일 크기와 높은 화질을 제공함. 대부분의 최신 브라우저에서 지원되므로 추천됨.
SVG: 크기와 관계없이 선명한 벡터 형식으로, 로고, 아이콘, 간단한 일러스트레이션에 적합. 코드 기반으로 크기 조정이 쉬워 매우 가벼움.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="반응형 이미지 예제">
</picture>

위 코드는 picture 요소와 srcset을 사용하여 WebP 포맷을 지원하는 브라우저에서는 WebP 이미지를, 그렇지 않은 경우에는 JPEG 이미지를 로드하도록 설정함.

이미지 크기 조정하기

이미지 크기를 필요에 맞게 조정하여 불필요한 용량을 줄이는 것이 중요함. 웹사이트에 필요한 크기만큼 이미지를 제공하여 최적화된 로딩 경험을 제공할 수 있음.

반응형 이미지: srcset과 sizes 속성을 사용해 화면 크기에 따라 적절한 이미지가 로드되도록 함.
미디어 쿼리와 함께 사용: CSS 미디어 쿼리를 사용하여 다양한 화면 크기에 맞춰 이미지를 조정하면, 더 나은 사용자 경험을 제공할 수 있음.

<img src="image-400.jpg" 
     srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" 
     sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px" 
     alt="화면 크기에 맞는 이미지">

400w 이미지: 모바일 환경에서 작은 이미지를 로드해 데이터 소모를 줄임.
800w 이미지: 태블릿이나 중간 크기 화면에서 로드해, 선명도를 유지하면서 최적화된 파일 크기를 제공함.
1200w 이미지: 큰 화면에서 고해상도 이미지를 제공하여 선명한 이미지를 보여줌.

이미지 압축하기

이미지 압축은 파일 크기를 줄이면서도 화질을 유지할 수 있는 핵심적인 최적화 기법임. 손실 압축과 무손실 압축의 두 가지 방식이 있음.

손실 압축: JPEG와 WebP 포맷에서 자주 사용하는 방법으로, 이미지 데이터를 일부 삭제하여 크기를 줄임. 화질이 약간 손실될 수 있지만, 파일 크기가 크게 줄어듦.
무손실 압축: 데이터 손실 없이 이미지 크기를 줄임. PNG와 SVG 이미지에 주로 사용됨.

지연 로딩(Lazy Loading) 적용

지연 로딩은 페이지가 로드될 때 모든 이미지를 한꺼번에 로드하지 않고, 화면에 나타날 때만 이미지를 로드하는 방식임. 특히 스크롤로 페이지를 탐색할 때 유용함.

<img src="image.jpg" alt="Lazy Load 예제" loading="lazy">

loading="lazy": HTML 속성으로 손쉽게 지연 로딩을 활성화할 수 있음. 스크롤할 때 화면에 들어오는 이미지가 로드되므로 초기 로딩 속도가 개선됨.
성능 최적화: 페이지 초기 로딩에 필요한 이미지만 로드하므로 불필요한 리소스 사용을 줄여 성능이 향상됨.

이미지 최적화를 위한 자동화 도구 📦

이미지 최적화 작업을 자동으로 수행해주는 빌드 도구와 프레임워크를 활용하면 일관되게 이미지를 관리할 수 있음.

Webpack + Image Minimizer Plugin: 웹팩의 이미지 최적화 플러그인을 사용하여 빌드 시 자동으로 이미지를 압축하고 최적화함.
Gulp + gulp-imagemin: Gulp와 이미지 최적화 플러그인을 사용해 빌드 과정에서 이미지를 자동으로 최적화할 수 있음.
Next.js / Gatsby: 이미지를 최적화하는 기능이 내장되어 있어 프로젝트 내에서 쉽게 이미지 최적화를 수행할 수 있음.