블로그에 사진을 올릴 때 JPG, PNG, WebP 중 어떤 형식을 선택해야 할까요?
검색해 보면 '사진은 JPG, 글자가 들어간 이미지는 PNG, 웹사이트에는 WebP가 좋다'는 설명이 많습니다. 하지만 실제로 같은 이미지를 세 형식으로 저장하면 파일 크기가 얼마나 달라질까요? 용량이 작아지는 만큼 화질도 나빠질까요?
이번에는 설명만 정리하지 않고 실제 사진 1장과 직접 제작한 문서형 이미지 1장을 이용해 비교 실험을 진행했습니다.
두 이미지 모두 해상도를 640×427픽셀로 맞춘 뒤 JPG, PNG, WebP로 저장했습니다. 파일 크기를 직접 확인하고, 원본과의 화질 유사도까지 측정했습니다.
이번 실험에서 확인한 세 가지
① 실제 사진은 PNG 296.0KB, JPG 59.3KB, WebP 27.8KB로 저장됐습니다.
② 글자와 도형이 있는 이미지는 오히려 PNG가 JPG보다 작았습니다.
③ WebP는 손실 압축과 무손실 압축을 모두 지원하며, 사용한 방식에 따라 용량과 화질이 크게 달라졌습니다.
1. JPG·PNG·WebP의 차이를 먼저 이해해 보자
이미지 파일의 용량은 단순히 확장자만으로 결정되지 않습니다. 파일 형식마다 이미지 정보를 저장하는 방법이 다르기 때문입니다.
JPG는 사진을 작게 저장하는 데 익숙한 형식
JPG 또는 JPEG는 손실 압축 방식을 사용합니다. 사람의 눈에 상대적으로 덜 두드러지는 이미지 정보를 일부 줄여 파일 크기를 낮춥니다.
풍경, 인물, 음식처럼 색상이 자연스럽게 이어지는 사진에 적합합니다. 그러나 글씨나 직선의 경계 부분에는 압축 흔적이 나타날 수 있습니다.
PNG는 원본 픽셀을 보존하는 무손실 형식
PNG는 일반적으로 무손실 압축을 사용합니다. 원본 이미지의 픽셀 정보를 그대로 복원할 수 있다는 뜻입니다.
그래서 작은 글씨, 도형, 화면 캡처, 투명 배경이 필요한 이미지에서 활용하기 좋습니다. 다만 복잡한 사진에서는 파일이 커질 수 있습니다.
WebP는 손실과 무손실을 모두 지원한다
WebP는 Google이 개발한 웹용 이미지 형식입니다. JPG처럼 손실 압축을 할 수도 있고, PNG처럼 원본 픽셀을 보존하는 무손실 압축도 가능합니다.
투명 배경도 지원합니다. 따라서 WebP는 JPG 또는 PNG 하나와 동일한 성격의 형식이라기보다, 여러 압축 방식 중 하나를 선택할 수 있는 형식에 가깝습니다.
| 항목 | JPG | PNG | WebP |
|---|---|---|---|
| 압축 방식 | 손실 | 무손실 | 손실·무손실 |
| 투명 배경 | 미지원 | 지원 | 지원 |
| 주요 활용 | 사진 | 도형·화면 캡처 | 웹 이미지 전반 |
여기까지는 형식의 일반적인 특징입니다. 이제 동일한 이미지를 실제로 저장했을 때 어떤 차이가 나타나는지 확인해 보겠습니다.
2. 실험 조건｜같은 이미지를 세 가지 형식으로 저장했다
비교 실험에서는 이미지의 내용과 해상도를 고정했습니다.
첫 번째 이미지는 로켓 발사대 사진입니다. 이미지 처리 라이브러리인 scikit-image에서 제공하는 SpaceX 공개 사진을 사용했습니다. 이 이미지는 다양한 색조와 빛, 어두운 하늘, 가느다란 구조물이 있어 사진 압축에 따른 변화를 비교하기 좋습니다.
두 번째 이미지는 직접 제작한 문서형 그래픽입니다. 흰색 배경, 남색 제목, 한글 문장, 색상별 사각형을 배치해 글씨와 도형의 가장자리가 어떻게 달라지는지 확인하도록 만들었습니다.
실험 환경
- 실험일: 2026년 10월 8일
- 이미지 크기: 각각 640×427픽셀
- 이미지 색상: RGB
- 이미지 처리 도구: Python Pillow 12.3.0
- PNG: 무손실 저장, 최적화 옵션 사용
- JPG: 품질 85, 최적화 사용, 색상 서브샘플링 미적용
- WebP: 손실 압축, 품질 85, 압축 방식 최적화 설정(method 6)
- 추가 시험: WebP 무손실 압축
중요한 조건이 하나 있습니다. JPG의 품질 85와 WebP의 품질 85는 서로 완전히 동일한 화질을 뜻하지 않습니다. 압축 알고리즘과 품질 설정 방식이 다르기 때문입니다.
따라서 이번 실험은 특정 저장 조건에서 파일 크기와 화질이 어떻게 달라지는지 보여주는 사례이지, 모든 사진에서 WebP가 동일한 비율로 작아진다는 증명은 아닙니다.
3. 실제 사진 비교｜PNG 296KB가 WebP 27.8KB로 줄었다
먼저 로켓 발사대 사진을 같은 해상도로 저장한 결과입니다.
| 형식 | 실제 파일 크기 | 원본 대비 SSIM |
|---|---|---|
| PNG | 296.0KB | 1.0000 |
| JPG | 59.3KB | 0.9560 |
| WebP | 27.8KB | 0.9378 |
※ 파일 크기는 1,024바이트 단위로 환산해 소수점 첫째 자리까지 표시했습니다. 엄밀한 단위는 KiB입니다.
이 사진에서는 WebP가 가장 작은 파일로 저장됐습니다. JPG 59.3KB와 비교해 약 53.1% 작은 크기입니다.
그런데 용량만 보고 WebP가 무조건 우수하다고 결론내리면 안 됩니다.
이번에는 SSIM이라는 이미지 유사도 지표도 측정했습니다. SSIM은 비교 이미지가 기준 이미지와 구조적으로 얼마나 비슷한지 수치로 나타낸 것으로, 1에 가까울수록 유사도가 높습니다.
사진에서는 JPG의 SSIM이 0.9560, WebP가 0.9378이었습니다. WebP가 더 작은 파일을 만들었지만 원본과의 구조적 유사도는 JPG 쪽이 높게 나타난 것입니다.
실험 해석
같은 품질 설정값으로 저장했더라도 두 형식의 실제 화질은 같지 않았습니다. 따라서 'WebP가 JPG보다 53% 작다'는 결과는 이번 파일의 저장 조건에서만 해석해야 합니다. SSIM 역시 사람이 느끼는 화질의 모든 차이를 설명하지는 않습니다.
4. 문서형 이미지는 달랐다｜PNG가 JPG보다 작았다
이번에는 한글 문장과 도형이 들어간 이미지로 동일한 실험을 진행했습니다.
사진과 달리 문서형 이미지는 넓은 단색 배경과 명확한 경계가 많습니다. 압축 알고리즘에 따라 다른 결과가 나올 수 있습니다.
| 형식 | 실제 파일 크기 | 원본 대비 SSIM |
|---|---|---|
| PNG | 22.0KB | 1.0000 |
| JPG | 33.7KB | 0.9881 |
| WebP | 13.3KB | 0.9917 |
이번에는 흥미로운 결과가 나왔습니다.
PNG는 22.0KB였지만 JPG는 33.7KB로 오히려 커졌습니다. 이 저장 조건에서는 JPG가 PNG보다 약 53.2% 컸습니다.
그리고 WebP는 13.3KB로 가장 작았습니다. 원본과의 SSIM도 JPG보다 높았습니다.
PNG가 작은 이유는 넓은 단색 영역과 반복되는 색상 패턴을 무손실 방식으로 효율적으로 저장할 수 있기 때문입니다.
반대로 JPG는 사진을 압축하도록 설계된 방식이므로 글씨처럼 날카로운 경계가 많은 이미지에서 반드시 유리하지는 않습니다.
압축을 강하게 하면 글자 주변에 번짐이나 미세한 색상 흔적이 생길 수 있습니다. 그래서 블로그의 표, 도표, 문서 캡처를 무조건 JPG로 바꾸는 것은 좋은 방법이 아닙니다.
5. 추가 실험｜원본을 그대로 보존하면서 더 작게 저장할 수 있을까?
지금까지 WebP는 손실 압축 방식으로 저장했습니다. 그렇다면 원본 픽셀을 그대로 유지하는 무손실 WebP를 선택하면 어떻게 될까요?
같은 이미지 두 장을 무손실 WebP로 추가 변환했습니다.
| 이미지 | PNG 무손실 | WebP 무손실 |
|---|---|---|
| 로켓 사진 | 296.0KB | 241.5KB |
| 문서형 이미지 | 22.0KB | 9.4KB |
무손실 WebP로 저장한 파일을 다시 열어 원본 RGB 픽셀과 비교한 결과, 두 이미지 모두 픽셀값이 완전히 동일했습니다.
특히 문서형 이미지는 PNG 22.0KB에서 무손실 WebP 9.4KB로 줄었습니다. 원본의 글자와 도형 정보를 잃지 않고도 파일 크기를 줄일 수 있었다는 뜻입니다.
이번 실험에서 얻은 가장 실용적인 발견
글씨가 선명해야 하는 이미지를 반드시 PNG로 저장할 필요는 없습니다. 사용하는 편집기와 웹사이트가 무손실 WebP를 지원한다면 더 작은 파일을 만들 가능성이 있습니다.
6. 그래서 블로그 사진은 어떤 형식으로 저장해야 할까?
이번 실험과 각 형식의 특성을 종합하면 이미지의 용도에 따라 선택하는 것이 합리적입니다.
| 사용 목적 | 우선 고려할 형식 | 선택 이유 |
|---|---|---|
| 풍경·음식·인물 사진 | WebP 또는 JPG | 손실 압축을 활용한 용량 절감 |
| 문서·표·글씨 이미지 | PNG 또는 무손실 WebP | 선명한 경계와 원본 픽셀 보존 |
| 투명 배경 로고 | PNG·WebP | 투명도 지원 |
| 블로그 썸네일 | WebP·JPG·PNG 비교 | 사진과 큰 글씨가 섞인 경우가 많음 |
썸네일처럼 사진 위에 큰 글씨가 들어간 이미지는 특히 주의해야 합니다. 사진 부분은 손실 압축에 적합하지만, 글자 가장자리는 압축 흔적에 민감할 수 있기 때문입니다.
파일 크기만 비교하지 말고 글씨 부분을 확대해서 선명도를 확인하는 과정이 필요합니다.
7. 사진 용량을 실제로 줄이는 순서
확장자를 변경하는 것만이 이미지 최적화의 전부는 아닙니다. 실제 블로그에서는 해상도 조절이 먼저 필요한 경우도 많습니다.
첫 번째｜필요 이상의 해상도를 줄이기
예를 들어 원본 사진이 4,000×3,000픽셀인데 블로그 본문에서는 가로 1,000픽셀 정도로만 표시된다면, 원본 전체 해상도가 반드시 필요한 것은 아닙니다.
이미지의 실제 표시 크기와 확대 필요성을 고려해 적절한 해상도로 줄여보세요. 다만 고해상도 화면에서의 선명도도 고려해야 하므로 표시 너비만큼 무조건 줄이는 것은 피하는 편이 좋습니다.
두 번째｜이미지 내용에 맞는 형식 선택
사진은 JPG와 WebP를, 표와 문서는 PNG와 무손실 WebP를 비교해 보세요.
무료 웹 이미지 변환 도구인 Squoosh 등을 이용하면 이미지를 불러와 여러 형식과 압축 설정을 직접 비교할 수 있습니다.
단, 민감한 개인정보가 포함된 이미지라면 사용하려는 도구의 파일 처리 방식을 확인하고, 가능하면 기기 안에서 처리하는 것이 좋습니다.
세 번째｜저장한 이미지의 화질을 다시 확인하기
용량이 크게 줄었다면 실제 이미지를 열어보세요. 사진에서는 머리카락, 나뭇잎, 어두운 부분의 질감을 확인하고, 문서나 썸네일에서는 작은 글씨의 가장자리를 확인하면 좋습니다.
압축률을 높일수록 파일이 작아질 수 있지만, 화질 저하가 눈에 띄기 시작하는 지점도 달라집니다. 따라서 모든 사진에 적용되는 하나의 최적 품질값은 없습니다.
네 번째｜블로그에 올린 뒤 실제 표시 상태 확인하기
업로드한 파일의 용량과 방문자에게 실제로 전송되는 이미지의 용량은 다를 수 있습니다. 티스토리 같은 블로그 플랫폼은 별도 크기의 썸네일이나 변환된 이미지를 제공할 수 있기 때문입니다.
따라서 최적화한 파일을 업로드한 뒤 모바일과 PC에서 실제 화질을 확인하는 것이 좋습니다. 이미지가 흐릿하게 보인다면 압축률뿐 아니라 크기 조절이나 확대 표시 방식도 확인해야 합니다.
8. 파일 크기가 작으면 블로그 속도도 반드시 빨라질까?
이미지 파일의 크기가 작아지면 전송해야 할 데이터양을 줄이는 데 도움이 됩니다. 그러나 파일 크기가 줄어든 비율만큼 실제 페이지 로딩 시간이 그대로 줄어드는 것은 아닙니다.
페이지 속도에는 서버 응답, 이미지 표시 크기, 네트워크 상태, 캐시, 스크립트 등 다양한 요인이 함께 영향을 줍니다.
또한 이번 실험은 640×427픽셀 이미지 두 장을 대상으로 했습니다. 수백만 픽셀의 스마트폰 사진이나 매우 복잡한 일러스트에서는 다른 결과가 나올 수 있습니다.
따라서 이미지 최적화의 목적은 무조건 가장 작은 파일을 만드는 것이 아니라 방문자가 보기에 충분히 선명하면서 불필요하게 큰 파일을 사용하지 않는 것입니다.
결론｜사진은 WebP를 시험하고, 글씨 이미지는 무손실 압축도 비교하자
이번 직접 비교 실험에서는 두 이미지 모두 WebP 손실 압축이 가장 작은 파일을 만들었습니다.
하지만 이것만으로 WebP가 언제나 최고라고 단정할 수는 없습니다.
로켓 사진에서는 WebP가 JPG보다 훨씬 작았지만 SSIM은 더 낮았습니다. 반면 문서형 이미지에서는 WebP가 더 작으면서 JPG보다 높은 SSIM을 기록했습니다.
또 무손실 WebP는 문서형 이미지의 픽셀을 그대로 보존하면서 PNG보다 더 작은 결과를 만들었습니다.
이번 실험의 최종 판단
일반 사진은 JPG와 손실 WebP를 비교하고,
글씨·표·그래픽은 PNG와 무손실 WebP도 시험하며,
블로그 썸네일은 용량뿐 아니라 글자 선명도까지 확인하는 것이 합리적입니다.
이미지의 내용, 해상도, 압축 설정에 따라 결과가 달라지므로 자신이 실제 사용하는 이미지 몇 장으로 비교해 보는 방법이 가장 확실합니다.
실험 자료 및 참고 출처
실험 자료 확인일: 2026년 10월 8일
1. 원본 사진: scikit-image의 rocket 예제
SpaceX가 공개한 Falcon 9 로켓 사진입니다. scikit-image 공식 문서는 해당 사진이 퍼블릭 도메인으로 공개됐다고 명시합니다.
scikit-image 공식 이미지 자료 확인
2. Google for Developers — WebP 이미지 형식
WebP의 손실·무손실 압축, 투명도 및 이미지 최적화 원리를 설명하는 공식 문서입니다.
Google WebP 공식 문서 확인
3. MDN — 이미지 파일 형식 가이드
JPG, PNG, WebP 등 주요 이미지 형식의 특징과 사용 목적을 비교한 기술 문서입니다.
MDN 이미지 형식 가이드 확인
실험 결과는 위의 공개 사진과 직접 제작한 그래픽을 지정된 압축 조건으로 저장한 측정값입니다. 특정 이미지 파일 두 장의 결과이며 모든 이미지에서 동일한 용량 절감 비율이 나타난다는 뜻은 아닙니다.