JPEG·PNG·WebP, 사진과 스크린샷은 어떤 형식으로 저장할까?
블로그에 올릴 그림을 모두 PNG로 저장하면 사진 파일이 불필요하게 커질 수 있습니다. 반대로 글자가 많은 화면을 JPEG로 바꾸면 용량은 줄어도 작은 글자 주변이 지저분해질 수 있습니다. 정답은 확장자 하나가 아니라 사진인지, 글자인지, 투명 배경이 필요한지에 따라 달라집니다. 원본은 따로 두고 게시용 사본에서 비교하면 판단이 쉬워집니다.
그림의 가장 중요한 부분부터 고르기
MDN의 이미지 형식 안내에 따르면 JPEG는 손실 압축을 사용하고 PNG는 무손실 압축과 투명도를 지원합니다. WebP에는 손실·무손실 방식과 투명도 지원이 있습니다. 무손실은 인코딩된 픽셀을 보존한다는 뜻이지, 흐릿한 원본을 선명하게 복구한다는 뜻은 아닙니다.
| 게시할 내용 | 먼저 비교할 형식 | 확인할 부분 |
|---|---|---|
| 풍경·음식·사물 사진 | JPEG와 손실 WebP | 하늘의 띠, 그림자, 가는 무늬 |
| 메뉴 화면·작은 글자·도식 | PNG와 무손실 WebP | 글자 테두리와 선의 구분 |
| 배경 없는 로고·아이콘 | PNG 또는 WebP | 투명 가장자리와 배경색 |
같은 크기로 내보낸 뒤 비교하기
사진을 1,200픽셀 너비로 게시한다면 후보 파일도 모두 같은 너비로 만들고 비교합니다. 한쪽만 크기를 줄이면 형식의 차이와 픽셀 수의 차이를 섞어 판단하게 됩니다. 파일명에는 photo-jpeg, photo-webp처럼 후보를 구분할 이름을 붙입니다. 숫자로 된 품질 설정은 프로그램마다 의미가 달라서 ‘80’이라는 값만으로 두 형식의 화질이 같다고 볼 수 없습니다.
- 원본을 복제하고 게시할 픽셀 크기를 정합니다.
- 형식 두 가지로 내보내고 파일 용량을 기록합니다.
- 100% 확대에서 얼굴, 작은 글자, 경계, 어두운 영역을 봅니다.
- 실제 블로그 너비와 휴대전화에서도 확인합니다.
- 읽기 어렵거나 색이 바뀌면 용량이 더 작아도 제외합니다.
변환하면 무조건 작아진다는 오해
Google의 WebP FAQ는 변환한 파일이 원본보다 커지는 경우도 설명합니다. 이미 손실 압축된 사진을 무손실 형식으로 저장하면, 남아 있는 압축 흔적까지 보존하며 파일이 커질 수 있습니다. JPEG를 PNG로 바꾼다고 없어진 디테일이 돌아오는 것은 아닙니다. 가능하면 편집을 마친 원본에서 게시용 파일을 한 번 만들어 반복적인 손실 재저장을 줄이세요.
투명 배경과 업로드 경로를 마지막에 점검하기
투명 로고를 JPEG로 저장하면 투명도가 유지되지 않습니다. 밝은 배경에서 좋아 보인 가장자리가 어두운 테마에서 흰 테두리로 보일 수도 있으므로 밝고 어두운 배경에 모두 얹어 봅니다. 게시 시스템이 업로드 후 파일을 다시 변환할 수도 있습니다. 로컬 사본만 검사하지 말고 실제 게시 페이지의 이미지를 열어 글자와 투명도를 확인합니다.
예를 들어 안내 글에는 본문 스크린샷은 PNG나 무손실 WebP, 분위기를 보여주는 사진은 JPEG나 손실 WebP로 섞어 사용할 수 있습니다. 한 형식으로 통일하는 것보다 독자가 읽어야 할 정보가 살아 있는지가 중요합니다. 원본·게시용 사본·사용한 크기를 함께 관리하면 나중에 디자인을 바꿀 때도 다시 작업하기 쉽습니다.
함께 읽으면 좋은 글
본문의 이해를 돕기 위해 제작한 설명용 삽화입니다.