웹 성능을 위한 이미지 최적화 방법

웹 성능을 위한 이미지 최적화 방법

일반적인 웹페이지에서 이미지는 전체 다운로드 바이트의 50~60%를 차지합니다. 최적화되지 않은 모든 이미지는 로딩 시간을 몇 초씩 늘리고, 이탈률을 높이며, 검색 엔진 순위를 떨어뜨립니다. Google의 Core Web Vitals, 특히 LCP(Largest Contentful Paint)는 이미지 로딩 성능을 직접 측정하므로, 이미지 최적화는 웹사이트에서 가장 큰 영향을 미칠 수 있는 개선 사항 중 하나입니다.

이 가이드는 압축 기본 사항부터 고급 전송 기술까지 완전한 이미지 최적화 전략을 다룹니다.

1. 게시 전에 모든 이미지 압축하기

카메라, 휴대폰, 디자인 도구에서 추출한 원본 이미지를 절대 그대로 업로드하지 마세요. 압축은 게시 작업 흐름의 첫 번째 단계여야 합니다.

핵심 원칙:

• 사진은 과감한 손실 압축을 견딜 수 있습니다. JPEG와 WebP의 경우 품질 80에서 시작하여, 파일 크기 목표에 맞춰 필요하면 낮추세요.
• 스크린샷, 로고, 그래픽은 무손실 압축이 유리합니다. PNG와 무손실 WebP는 손실 압축이 흐릿하게 만들 수 있는 선명한 가장자리와 텍스트를 보존합니다.
• AVIF는 가장 뛰어난 압축률을 제공하지만 인코딩 시간이 더 많이 필요합니다. 자주 다운로드되고 드물게 업데이트되는 이미지에 사용하세요.
• 불필요한 포맷 변환으로 인한 세대 손실을 피하기 위해 원본 포맷으로 압축하세요.

예상 절감 효과:

업로드 전에 이미지를 압축하는 일반적인 작업 흐름은 인지 가능한 품질 손실을 최소화하면서 총 이미지 용량을 40~80% 줄여줍니다.

2. 올바른 크기로 제공하기

4000픽셀 너비의 사진을 300픽셀 너비의 컨테이너 안에 제공하는 것은 웹에서 가장 흔한 성능 실수입니다. 브라우저는 4000픽셀 전체를 다운로드한 다음 축소하여 표시하므로 대역폭과 메모리를 낭비합니다.

여러 크기 변형 만들기:

• 320~480픽셀 너비: 모바일 화면용
• 768~1024픽셀 너비: 태블릿용
• 1200~1920픽셀 너비: 데스크톱 디스플레이용
• 2560픽셀 너비: 고밀도 레티나 디스플레이용 (2x)

가장 큰 변형 크기를 레이아웃에서 이미지가 표시될 최대 너비에 고DPI 화면용으로 2를 곱한 값에 맞추세요.

3. Srcset으로 반응형 이미지 사용하기

HTML의 srcset과 sizes 속성은 사용자의 뷰포트 너비와 기기 픽셀 비율에 따라 브라우저가 다운로드할 이미지 크기를 알려줍니다.

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w,
    photo-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Descriptive text for accessibility and SEO"
/>

이 단일 패턴만으로도 모바일 기기에서 이미지 대역폭을 눈에 보이는 품질 차이 없이 40~60%까지 줄일 수 있습니다.

4. LCP(Largest Contentful Paint) 최적화하기

LCP는 가장 큰 가시 요소(보통 히어로 이미지)가 렌더링되는 데 걸리는 시간을 측정합니다. Google은 LCP 2.5초 이하를 양호한 수준으로 간주합니다.

이미지의 LCP를 최적화하려면:

• 히어로 이미지를 사전 로드하여 브라우저가 일찍 발견하도록 합니다. 문서 헤드에 <link rel="preload" as="image" href="hero.webp">를 추가하세요.
• 히어로 이미지를 적극적으로 압축하세요. 보통 브라우저가 가장 먼저, 그리고 가장 크게 다운로드하는 자산이기 때문입니다.
• 히어로 이미지에 WebP나 AVIF를 제공하고 JPEG를 폴백으로 사용하세요.
• 히어로 이미지 크기를 올바르게 지정하세요. 1200픽셀 히어로 영역에 4000픽셀 이미지를 제공하지 마세요.
• 히어로 이미지나 스크롤 없이 볼 수 있는 모든 이미지에 지연 로딩을 적용하지 마세요. 지연 로딩은 다운로드를 지연시켜 LCP에 악영향을 줍니다.

5. 스크롤 아래쪽 이미지에 지연 로딩 활성화하기

초기 화면에 보이지 않는 이미지는 즉시 로드할 필요가 없습니다. loading="lazy" 속성은 이미지가 뷰포트에 가까워질 때까지 이미지 로딩을 연기하도록 브라우저에 지시합니다.

<img src="gallery-photo.jpg" loading="lazy" alt="Gallery image" />

지연 로딩은 이미지가 많은 페이지에서 초기 페이지 용량을 30~50% 줄여줍니다. 압축과 결합하면 그 영향은 획기적입니다.

6. 이미지 메타데이터 제거하기

EXIF 데이터(카메라 설정, GPS 좌표, 타임스탬프)는 모든 이미지에 불필요한 바이트를 추가합니다. 메타데이터를 제거하면 일반적으로 시각적 변화 없이 파일 크기를 5~15% 절약할 수 있습니다. 메타데이터 제거를 압축 작업 흐름의 표준 단계로 만드세요.

7. CDN(Content Delivery Network) 사용하기

CDN은 전 세계 서버에 이미지를 분산하여 사용자와 이미지 간의 물리적 거리를 줄여줍니다. 이는 이미지 요청의 TTFB(Time to First Byte)를 개선합니다.

일부 CDN은 다음과 같은 실시간 이미지 변환 기능도 제공합니다:

• 자동 포맷 협상(지원되는 경우 WebP나 AVIF 제공)
• 기기와 뷰포트에 따른 동적 크기 조정
• 실시간 압축 조정

전용 CDN을 사용할 수 없는 경우, 최소한 HTTP/2나 HTTP/3를 사용하여 단일 연결로 여러 이미지를 동시에 다운로드할 수 있도록 하세요.

8. 이미지 디코딩 성능 고려하기

대용량 이미지는 다운로드 시간뿐만 아니라 디코딩 시간도 많이 소요됩니다. 브라우저는 JPEG, PNG, WebP, AVIF 데이터를 렌더링하기 전에 압축을 풀어야 합니다. JPEG와 WebP는 대부분의 기기에서 빠르게 디코딩되지만, AVIF 디코딩은 계산 비용이 더 많이 듭니다. 이는 저사양 모바일 기기에서 고려해야 할 사항입니다.

중요하지 않은 이미지에는 decoding="async" 속성을 사용하여 브라우저가 다른 콘텐츠를 차단하지 않고 디코딩할 수 있도록 하세요:

<img src="photo.jpg" decoding="async" loading="lazy" alt="Description" />

최적화 작업 흐름 구축하기

엔드 투 엔드 이미지 최적화 파이프라인은 다음과 같습니다:

1. 품질에 적합한 도구를 사용하여 원본 포맷 그대로 이미지를 압축하세요.
2. 압축 과정에서 메타데이터를 제거하세요.
3. 필요한 표시 크기에 맞게 크기를 조정하고 여러 변형을 만드세요.
4. HTML 템플릿에 srcset과 sizes를 구현하세요.
5. 히어로 이미지는 사전 로드하고, 스크롤 아래쪽의 모든 이미지는 지연 로드하세요.
6. 글로벌 성능을 위해 CDN에서 제공하세요.
7. Lighthouse나 PageSpeed Insights를 사용하여 LCP와 총 이미지 용량을 측정하세요.
8. 성능 예산을 충족할 때까지 품질 설정을 반복 조정하세요.

무료 온라인 이미지 압축기로 지금 바로 이미지 최적화를 시작하세요. PNG, JPEG, WebP, AVIF 형식의 이미지를 업로드하고 프로덕션에 바로 사용할 수 있는 압축 버전을 다운로드하세요. 포맷 변환도, 품질 타협도 필요 없습니다.