이미지 압축 원리 쉽게 이해하기 — JPEG, PNG, WebP 알고리즘 비교

1920x1080 해상도 이미지를 압축 없이 저장하면 약 6MB가 돼요. 각 픽셀이 빨강, 초록, 파랑 3가지 색상 정보를 8비트씩 가지고 있거든요. 1920 x 1080 x 3바이트 = 약 6.2MB예요. 4K 이미지라면 24MB, 8K라면 100MB에 가까워요. 이런 용량을 그대로 웹에서 전송하면 로딩이 끔찍하게 느려지겠죠? 다행히 이미지에는 압축할 수 있는 여지가 많아요. 사람의 눈이 감지하지 못하는 정보를 제거하거나, 반복되는 패턴을 효율적으로 저장하면 용량을 90% 이상 줄일 수 있어요.

JPEG는 1992년에 만들어진 손실 압축 포맷이에요. 30년이 넘었지만 여전히 웹에서 가장 많이 사용돼요. JPEG의 핵심은 DCT(이산 코사인 변환)라는 수학 연산이에요. 이미지를 8x8 픽셀 블록으로 나누고, 각 블록의 색상 변화를 주파수로 변환해요. 사람의 눈은 고주파(미세한 변화)를 잘 감지하지 못하기 때문에 고주파 정보를 제거해도 차이를 못 느껴요. 또한 사람의 눈은 밝기 변화에는 민감하지만 색상 변화에는 둔해요. JPEG는 이 특성을 이용해서 색상 정보(크로마)를 밝기 정보(루마)보다 더 많이 압축해요. 이렇게 두 단계를 거치면 원본의 10~20% 크기로 줄어들면서도 눈으로 구분하기 어려운 품질을 유지할 수 있어요. 단점은 투명 배경을 지원하지 않고, 텍스트나 선 같은 날카로운 경계에서 블록 노이즈가 생길 수 있다는 거예요.

PNG는 무손실 압축 포맷이에요. 압축을 풀면 원본과 1비트도 다르지 않은 완벽한 복원이 가능해요. PNG는 Deflate라는 알고리즘을 사용해요. 이미지에서 반복되는 색상 패턴을 찾아서 짧은 코드로 대체하는 방식이에요. 예를 들어 파란 하늘 배경이 넓게 펼쳐진 이미지라면, 같은 파란색 픽셀이 수천 번 반복되겠죠? 이런 반복을 한 번만 기록하고 반복 횟수를 저장하면 용량이 크게 줄어요. 그래서 색상이 단순한 로고, 아이콘, 차트에서 PNG 압축률이 높아요. 반면 풍경 사진처럼 색상이 복잡하면 압축률이 낮아서 JPEG보다 파일이 훨씬 커져요. PNG의 가장 큰 장점은 투명 배경(알파 채널)을 지원한다는 거예요. 웹에서 로고나 아이콘을 배경 위에 겹쳐 표시할 때 필수적이에요.

WebP는 구글이 2010년에 개발한 차세대 포맷이에요. JPEG의 손실 압축과 PNG의 무손실 압축을 모두 지원해요. 손실 모드에서는 VP8 비디오 코덱의 키프레임 압축 기술을 활용해요. JPEG보다 25~34% 더 작은 파일을 같은 화질로 만들 수 있어요. 무손실 모드에서는 PNG보다 26% 더 작은 파일을 만들어요. 투명 배경도 지원하기 때문에 PNG를 완전히 대체할 수 있어요. 2026년 기준 모든 주요 브라우저(Chrome, Firefox, Safari, Edge)가 WebP를 지원해요. 새로 만드는 웹사이트라면 WebP를 기본 포맷으로 사용하는 걸 추천해요. 유일한 단점은 일부 오래된 이미지 편집 도구에서 WebP를 열지 못하는 경우가 있다는 거예요. 하지만 Photoshop, GIMP 등 주요 도구는 모두 지원해요. 이미지 압축을 직접 해보고 싶다면 [이미지 압축 방법 가이드](/blog/how-to-compress-images)를 참고하세요. 웹사이트 이미지 최적화 실전 팁은 [웹 이미지 최적화 가이드](/blog/web-image-optimization-guide)에서 확인할 수 있어요.