웹 이미지 파일 크기와 포맷 최적화 가이드

웹사이트의 모든 이미지에는 파일 크기 예산이 있습니다. 예산을 넘기면 페이지가 느려지고, 예산 안에 들면 모든 것이 즉각적으로 느껴집니다. 이 가이드에서는 일반적인 모든 용도에 대한 구체적인 KB 목표치, 맞춤 픽셀 크기, 그리고 목표를 달성할 포맷을 제시합니다.

용도별 이미지 파일 크기 기준표

아래 목표치는 WebP 또는 AVIF 기준입니다. JPEG를 사용해야 한다면 각 수치에 25-30%를 더하세요.

이 수치의 근거

HTTP Archive의 2025년 데이터에 따르면, 모바일 웹 페이지의 중간값은 약 2.5MB이며 이미지만으로 약 1MB — 전체 페이지 무게의 약 40%를 차지합니다. Google의 LCP(Largest Contentful Paint) "양호" 기준은 2.5초입니다. 4G 연결(유효 처리량 약 1.5MB/s)에서 이 목표를 달성하려면 히어로 이미지가 1초 이내에 로드되어야 합니다 — 즉 200KB 이하.

위 표의 목표치는 임의적이지 않습니다. 실제 성능 예산에서 역산한 값입니다: 일반적인 페이지에서 이미지 전체 예산 400-600KB를 히어로, 콘텐츠, 썸네일 슬롯에 분배한 결과입니다.

포맷이 가장 큰 차이를 만든다

동일한 사진을 같은 시각적 품질로 저장해도 포맷에 따라 파일 크기가 크게 달라집니다:

JPEG에서 WebP로 전환하면 약 25-35% 절약됩니다. AVIF로 가면 JPEG 대비 약 50% 절약됩니다. 두 포맷 모두 투명도를 지원합니다. 지금 바로 변환해 보세요: JPG를 WebP로, AVIF로 변환, 또는 일괄 변환으로 여러 파일을 한 번에 처리할 수 있습니다.

픽셀 크기: 숨겨진 핵심 변수

파일 크기는 두 가지의 함수입니다: 픽셀 수와 압축률. 대부분의 사람이 압축에만 집중하고 픽셀 수를 무시하지만, 크기를 줄이는 것이 훨씬 큰 효과를 줍니다.

간단한 예: 4000 x 3000 사진은 1,200만 픽셀입니다. 이를 1200 x 900으로 리사이즈하면 108만 픽셀 — 원시 데이터 91% 감소. 압축하기도 전에 대부분의 무게를 제거한 셈입니다.

경험 법칙: 표시 영역보다 넓은 이미지를 제공하지 마세요. 블로그의 콘텐츠 영역이 720px이라면 1440px 이미지(레티나 2배)가 서빙할 최대치입니다. 그 이상은 낭비되는 대역폭입니다.

Vizua의 이미지 리사이즈 도구로 필요한 정확한 크기로 줄인 다음, JPEG 압축이나 PNG 압축으로 최종 절감을 달성하세요.

압축 품질: 최적점 찾기

이미지를 올바른 크기와 포맷으로 맞추었다면, 압축 품질이 마지막 조절 다이얼입니다. 세 가지 레버가 함께 작동하는 실전 시나리오:

시작점: 카메라 사진, 4000 x 3000, PNG로 저장 — 약 14MB.

1. 리사이즈 1200 x 900 (블로그 콘텐츠 너비, 레티나 2배): PNG 기준 약 3.5MB
2. WebP로 변환 품질 80: 약 130KB
3. AVIF로 변환 품질 65 (지원 환경의 경우): 약 90KB

원본 PNG 대비 99.3% 감소입니다. 결과 이미지는 일반 보기 크기에서 원본과 시각적으로 구분이 불가능합니다.

포맷별 자세한 품질 권장 사항은 화질 손실 없이 이미지 압축하는 방법 가이드를 참고하세요.

특수한 경우

이커머스 상품 페이지

상품 사진은 확대 시 선명해야 합니다. 메인 이미지는 800-1000px(레티나 1600-2000px)에 WebP로 제공하세요. 대부분의 상품 사진은 80-150KB로 잘 압축됩니다. 그리드의 썸네일은 300-400px 너비로 이미지당 약 20-50KB를 목표로 합니다.

사진 포트폴리오

품질이 최우선이지만 로딩 시간도 중요합니다. 미리보기 이미지는 1200-1600px에 WebP(품질 85)로 150-250KB를 목표로 하세요. 고해상도 원본은 별도의 "원본 크기 보기" 링크로 제공하는 것이 좋습니다.

소셜 공유 (Open Graph)

OG 이미지는 1200 x 630px이어야 합니다. Facebook과 Twitter는 JPEG와 PNG를 허용하며 일부 플랫폼은 이제 WebP도 지원합니다. 150KB 이하를 유지하세요. OG 이미지는 크롤러가 로드하는 것이지 브라우저의 지연 로딩 대상이 아니므로, 모든 KB가 중요합니다.

페이지 전체 이미지 예산

실용적인 기준: 페이지당 전체 이미지 용량을 500KB 이하로 목표하세요. 일반적으로 이렇게 분배됩니다:

• 히어로 이미지 1장: 약 150KB
• 콘텐츠 이미지 3-4장: 각 약 100KB, 합계 300-400KB
• 썸네일, 아바타, 아이콘: 합계 약 50KB

이 예산이면 4G에서도 페이지가 빠르게 로드되고 모바일 데이터 소모도 적습니다. 이미지가 더 필요하다면(갤러리, 이커머스 그리드) 지연 로딩(lazy loading)으로 초기 로드를 예산 안에 유지할 수 있습니다 — 첫 화면 위의 이미지만 초기 로딩 성능에 영향을 줍니다.

자주 묻는 질문