웹사이트 이미지 압축 방법

HTTP Archive의 2025 Web Almanac에 따르면 모바일에서 메인 페이지 용량의 중앙값은 2.56 MB였고, 그중 911 KB가 이미지였습니다. 데스크톱에서는 페이지에 담긴 이미지 용량의 중앙값이 1,058 KB였습니다. 방문자가 기다리는 것도 결국 이미지입니다. 페이지가 로드될 때 화면에서 가장 큰 요소, 즉 최대 콘텐츠 렌더링(LCP, Largest Contentful Paint)은 모바일 페이지의 76%에서 이미지였습니다.

이미지가 가벼우면 느린 연결에서도 더 빨리 뜨고, 방문자의 모바일 데이터를 덜 쓰며, 대역폭 비용도 줄어듭니다. LCP는 Google이 페이지 경험을 평가할 때 쓰는 지표인 Core Web Vitals 중 하나입니다. 그래서 무거운 이미지의 대가는 방문자를 몇 초 더 기다리게 하는 데서 끝나지 않을 수 있습니다.

표시되는 공간보다 훨씬 큰 이미지는 압축만으로는 해결되지 않습니다. 너비 4000픽셀의 카메라 사진을 너비 800픽셀의 열에 넣으면, 페이지가 쓸 수 있는 것보다 25배 많은 픽셀을 보내게 됩니다. web.dev는 데스크톱 크기의 이미지를 휴대폰에 보내면 필요한 것보다 2–4배 많은 데이터를 쓸 수 있다고 설명합니다.

• 전체 너비 배너: 대부분의 레이아웃에서는 너비 1600–2000픽셀 정도면 충분합니다.
• 본문 열 안의 이미지: 고밀도 화면에서도 선명하도록 열 너비의 약 두 배(예를 들어 700픽셀 열이라면 1400픽셀)가 좋습니다.
• 썸네일과 프로필 사진: 표시 크기의 두 배, 보통 200–400픽셀입니다.

이미지를 얼마나 효율적으로 저장할 수 있는지는 형식에 달려 있습니다. 간단히 말해 사진에는 JPG나 WebP가, 로고, 스크린샷, 투명도가 있는 이미지에는 PNG나 WebP가 맞습니다. JPG, PNG, WebP 비교에서 각 형식이 언제 유리한지 설명합니다.

현재 사용 중인 브라우저의 약 97%가 WebP를 표시할 수 있고, WebP는 눈에 띄게 작은 경우가 많습니다. 시험해 보려면 JPG를 WebP로나 PNG를 WebP로 도구로 변환한 뒤 결과를 원본과 비교하세요. 변환한 파일이 항상 더 작지는 않으며, 단순한 그래픽은 특히 그렇습니다.

압축은 눈으로는 알아차리기 어려운 데이터를 덜어 냅니다. Bitinz 이미지 압축 도구에 JPG, PNG, WebP 파일을 한꺼번에 끌어다 놓고 세 가지 단계 중 하나를 고르면 됩니다.

• 빠름: 속도 우선. 많은 이미지를 한꺼번에 처리할 때 좋습니다.
• 균형: 기본값이며, 대부분의 웹사이트 이미지에 잘 맞습니다.
• 최대: 조금 더 걸리지만 파일이 더 작아집니다. 배너나 배경처럼 모든 페이지에 나오는 이미지라면 그만한 가치가 있습니다.

형식을 유지하면 Bitinz는 업로드한 파일보다 큰 파일을 돌려주지 않습니다. 결과를 원래 크기로 원본과 비교해 보세요. 작은 글씨나 부드러운 그러데이션이 있는 이미지는 특히 꼼꼼히 보고, 마음에 드는 것만 다운로드하세요.

잘 압축한 이미지라도 잘못된 시점에, 또는 잘못된 크기로 로드되면 페이지가 느려질 수 있습니다. 대부분은 HTML 속성 몇 가지로 해결됩니다:

• 모든 이미지에 width와 height를 지정하세요. 브라우저가 공간을 미리 확보하므로 로드되는 동안 레이아웃이 밀리지 않습니다.
• 페이지 아래쪽 이미지에는 loading="lazy"를 추가하세요. 방문자가 근처까지 스크롤했을 때만 로드됩니다.
• 페이지 맨 위의 주요 이미지는 절대 지연 로딩하지 마세요. web.dev는 대신 그 이미지에 fetchpriority="high"를 쓰되, 한두 장 이하에만 쓰라고 권장합니다.
• srcset과 sizes로 같은 이미지를 몇 가지 너비로 제공하면, 휴대폰은 큰 화면보다 작은 파일을 내려받습니다.
• 이미지에 긴 캐시 기간을 설정하고, CDN이 있다면 CDN으로 제공하세요. 다시 찾은 방문자가 이미지를 또 내려받지 않아도 됩니다.

PageSpeed Insights나 Chrome의 Lighthouse 패널로 페이지를 검사하세요. Lighthouse 13부터는 이미지 관련 검사가 “Improve image delivery”라는 하나의 인사이트로 묶였습니다. 더 압축할 수 있거나, 최신 형식으로 제공할 수 있거나, 더 작게 만들 수 있는 이미지가 여기에 표시됩니다. 절약량이 4 KiB에 못 미치는 이미지는 표시되지 않으므로, 목록이 짧다면 좋은 신호입니다.

그다음 휴대폰으로 직접 페이지를 살펴보세요. 압축 문제는 선명한 가장자리, 이미지 속 글자, 피부색에서 가장 먼저 드러납니다.

콘텐츠 관리 시스템이나 온라인 쇼핑몰처럼 사이트에 매일 이미지가 추가된다면, 손으로 하나씩 압축하지 말고 업로드나 게시 단계에서 압축하세요. Bitinz 개발자 API는 HTTP로 이미지를 받아 압축된 파일의 링크를 돌려주므로 스크립트나 빌드 파이프라인에서 실행할 수 있습니다. 모든 계정에 무료 월간 할당량이 있습니다.

1. 01각 이미지를 표시 크기의 약 두 배로 조정하세요.
2. 02사진에는 JPG나 WebP를, 그래픽과 투명도가 필요한 이미지에는 PNG나 WebP를 쓰세요.
3. 03균형 단계로 압축하고, 가장 큰 이미지에는 최대 단계도 시도해 보세요.
4. 04원본을 바꾸기 전에 결과를 원본과 비교하세요.
5. 05width와 height를 지정하고, 첫 화면 아래의 이미지는 지연 로딩하되 주요 이미지는 절대 지연 로딩하지 마세요.
6. 06PageSpeed Insights로 페이지를 다시 확인하세요.

내 웹사이트가 아닌 다른 곳에 이미지를 올리나요? 플랫폼마다 규칙이 다르니 이메일과 온라인 쇼핑몰의 이미지 크기 요구 사항을 참고하세요.