웹 이미지 파일 크기와 형식 실전 가이드

모든 이미지는 네트워크, 디코딩, 메모리, 렌더링 자원을 사용합니다. 유용한 예산은 페이지별로 이미지 역할, 사용자, 캐시, 뷰포트, 품질 요구 사항을 반영합니다. 아래 범위는 시험할 출발점이지 보편적인 통과 기준이 아닙니다.

용도별 출발 예산

이 범위는 절제된 웹 전송 예산의 예입니다. JPEG, WebP, AVIF 결과는 더 크거나 작을 수 있으므로 원본, 인코더, 표시 크기, 현장 성능, 시각 검토에 따라 조정하세요.

출발 범위를 내 예산으로 바꾸는 방법

HTTP Archive 페이지 무게 보고서는 현재 분포를 제공하지만 세계 중앙값이 내 사용자를 뜻하지는 않습니다. Google이 공개한 “좋음” LCP 기준은 방문의 75번째 백분위에서 2.5초입니다. 현장 데이터와 워터폴을 이용해 서버 응답, 자원 발견, 전송, 디코딩, 렌더링 지연에 시간을 나누세요.

페이지 수준 전송 예산에서 시작해 사용자 가치가 큰 이미지에 더 많이 배분하세요. 레이아웃, 이미지 수, 사용자, 품질 요구가 바뀌면 표의 범위를 다시 검토하세요.

형식은 주요 변수 중 하나

같은 원본도 인코더와 품질 목표에 따라 크기가 크게 달라집니다. 이 표는 비교할 동작을 보여 줄 뿐 1200픽셀 사진의 보편적 벤치마크가 아닙니다.

일부 비교에서 WebP나 AVIF가 JPEG 출력보다 나을 수 있지만 모든 원본과 인코더에 적용되는 고정 비율은 없습니다. 두 현대 형식 모두 투명도를 지원합니다. WebP와 AVIF 가이드를 참고하세요.

JPG에서 WebP, 표시된 입력 형식용 AVIF 변환, 또는 도구에 나온 형식용 일괄 변환으로 후보를 만들 수 있습니다.

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

픽셀 수, 이미지 내용, 비트 깊이, 메타데이터, 형식, 인코더, 설정이 크기에 영향을 줍니다. 불필요한 치수를 줄이면 인코더가 표현할 데이터가 훨씬 적어지는 경우가 많습니다.

4000 × 3000 이미지는 12 MP이고 1200 × 900은 1.08 MP로 픽셀이 91% 적습니다. 채널 수와 정밀도가 같다면 인코더에 전달되는 비압축 래스터가 크게 줄지만 최종 바이트 절감량은 내용과 설정에도 달려 있습니다.

반응형 경험칙: 가능한 표시 너비와 밀도에 가까운 후보를 제공하세요. 콘텐츠 영역이 720 CSS픽셀이면 1440px 후보가 2× 화면에 맞을 수 있지만 확대, 자르기, 레이아웃 변경, 더 높은 밀도에 따라 선택이 달라집니다. srcset과 sizes로 옵션을 설명하세요.

Vizua 이미지 크기 조절로 레이아웃에 필요한 후보를 만든 뒤 알맞은 JPEG 또는 PNG 압축을 시험하세요. 이미 최적화된 원본은 작아지지 않을 수 있습니다.

압축 품질: 최적점 찾기

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

예시 작업 흐름: 4000 × 3000 마스터로 시작하고 전송 세트 밖에 보관합니다.

1. 영역과 대상 밀도에 맞을 때 1200 × 900 같은 후보로 크기를 조절하세요
2. 선택한 출발 품질로 WebP 후보를 내보내고 실제 파일을 확인하세요
3. 스택이 지원하면 AVIF 후보를 내보내고 크기, 외관, 인코딩 비용을 비교하세요

용도를 만족하는 가장 작은 후보를 고르세요. 최종 절감량과 보이는 차이는 예시 치수만이 아니라 실제 원본과 출력에서 결정됩니다.

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

특수한 경우

이커머스 상품 페이지

상품 사진은 쇼핑몰이 지원하는 확대에서도 유용해야 합니다. 보호된 마스터에서 반응형 후보를 만들고 세부 사항을 시험하며 목록, 기본 보기, 확대에 별도 예산을 정하세요. 마켓플레이스 업로드 요건은 쇼핑몰 전송과 다를 수 있습니다.

사진 포트폴리오

포트폴리오는 반응형 미리보기를 제공하고 적절할 때 의도적인 고해상도 보기를 제공할 수 있습니다. 레이아웃과 예상 화면에서 치수와 바이트 예산을 정한 뒤 질감, 그라데이션, 색상 프로필을 검토하세요.

소셜 공유 (Open Graph)

Open Graph 이미지 권장 사항과 허용 형식은 플랫폼마다 다르고 바뀔 수 있습니다. 1200 × 630 JPEG나 PNG가 일반적인 출발점이지만 현재 목적지 지침과 미리보기를 확인하세요. 크롤러는 페이지 지연 로딩과 별개로 파일을 가져갑니다.

페이지 전체 이미지 예산

성능 목표에서 페이지 예산을 만드세요. 시험할 수 있는 초기 배분 예시는 다음과 같습니다.

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

이 예시는 속도를 보장하지 않습니다. 갤러리와 상품 목록은 적합한 화면 밖 이미지를 미룰 수 있지만 지연 자원도 요청될 때 데이터를 쓰고 스크롤에 영향을 줄 수 있습니다. 대표 기기와 네트워크에서 초기 및 상호작용 성능을 측정하세요.

자주 묻는 질문