글자가 중요한 이미지라면 PNG부터 비교하세요
공지 이미지나 화면 캡처를 저장했는데 작은 글자 주변이 지저분해 보일 때가 있습니다. 원본 크기는 그대로인데, 저장 형식을 바꾼 뒤 생기는 차이입니다. 이때는 크기를 키우기 전에 PNG와 JPG를 비교해 보세요.
글자·표·단색 도형이 중심이라면 PNG를 먼저 선택하세요. 사진이 중심이라면 JPG를 후보로 두고 용량과 세부 표현을 비교하세요. 다만 어느 쪽이 더 작은지는 이미지 내용과 저장 설정에 따라 달라집니다. PNG가 항상 크거나 JPG가 항상 유리한 것은 아닙니다. 형식별 특성은 MDN의 이미지 형식 안내에서 확인할 수 있습니다.
아래에서는 직접 만든 안내 카드1개를 같은 크기로 저장했습니다. 다른 사이트의 이미지를 가져오거나 서로 다른 원본을 비교하지 않았습니다.
같은 안내 카드를 3가지 방식으로 저장했습니다
시험 원본은 흰 배경 위에 한글, 숫자, 가는 선, 단색 막대를 배치한 1200×800픽셀 이미지입니다. 픽셀은 이미지를 이루는 작은 점입니다. 실제 서비스의 화면 캡처나 사진이 아닌 비교용 카드입니다.
| 저장 방식 | 이미지 크기 | 실제 파일 크기 |
|---|---|---|
| PNG | 1200×800픽셀 | 40,662바이트 |
| JPG, 품질90 | 1200×800픽셀 | 57,334바이트 |
| JPG, 품질45 | 1200×800픽셀 | 30,450바이트 |
이 카드에서는 PNG가 품질90의 JPG보다 작았습니다. 품질45의 JPG는 PNG보다 작아졌지만, 아래 확대 이미지에서 글자 주변의 차이도 보입니다. 용량 숫자만 보고 선택하면 글자 가독성을 놓칠 수 있습니다.
품질90은 ‘원본 화질을 90% 보존한다’는 뜻이 아닙니다. 여기서는 이미지 처리 도구 sharp의 저장 옵션값입니다. 다른 앱에서 같은 숫자를 골라도 같은 결과가 나오지는 않습니다. sharp의 JPG 저장 옵션
글자의 테두리와 빈 공간을 보세요
작은 화면에서는 확대 비교 이미지를 따로 열어 확대해 보세요. 검은 글자의 획 바깥과 파란 글자 주변의 흰 공간을 비교하면 차이를 찾기 쉽습니다. 품질45에서는 글자 주변에 원본에 없던 얼룩과 색 번짐이 더 뚜렷합니다. 품질90에서도 원본과 완전히 같지는 않습니다.
PNG는 이 실험에서 저장한 픽셀을 그대로 보존했습니다. 반면 일반적인 JPG 저장은 용량을 줄이면서 일부 정보를 버립니다. 특히 글자와 배경이 맞닿는 경계에서 차이를 알아보기 쉽습니다. 이 비교는 글자가 많은 카드1개의 결과입니다. 풍경 사진이나 인물 사진에서도 같은 용량 순서가 나온다는 뜻은 아닙니다.
내 이미지에는 이렇게 적용하세요
- 편집 원본을 남기세요. 캡처 직후 파일이나 디자인 도구의 원본에서 시작하세요.
- 같은 가로·세로 크기로 PNG와 JPG를 저장하세요. 크기까지 함께 바꾸면 형식 때문에 생긴 차이를 구분하기 어렵습니다.
- 사용할 크기에서 가장 작은 글자를 읽어보세요. 제목보다 날짜, 연락처, 표의 작은 숫자가 판단에 도움이 됩니다.
- 파일 크기를 확인하세요. 제출 제한을 통과한다면 몇 KB를 더 줄이는 것보다 읽기 쉬운 쪽을 고르세요.
- 게시하거나 전송한 결과도 다시 여세요. 전달 과정에서 이미지가 다시 압축됐다면 저장 직후와 다르게 보일 수 있습니다.
배경이 투명해야 하는 로고라면 PNG를 선택할 이유가 하나 더 있습니다. PNG는 투명도를 저장할 수 있지만 JPG는 그렇지 않습니다. 이 경우에는 파일 크기만으로 형식을 정하지 마세요. MDN의 PNG·JPEG 특성 설명
이미 흐려진 JPG를 PNG로 바꾸면 복구될까요?
파일 형식을 PNG로 바꿔도 이미 사라진 글자 정보가 돌아오지는 않습니다. 흐려진 상태를 PNG로 저장할 뿐입니다. 원본 캡처가 있다면 그 파일로 돌아가세요. 문서에서 만든 이미지라면 문서를 다시 내보내는 편이 낫습니다.
PNG인데도 글자가 작고 흐리다면 이미지 크기 문제를 확인하세요. 가로400픽셀짜리를 가로1200픽셀로 늘려도 원본에 없던 세부 정보가 복원되지는 않습니다. 저장 형식과 이미지 크기는 따로 판단해야 합니다.
예제 파일과 실험 조건
2026년10월4일에 sharp 0.35.4로 생성했습니다. 한글 글꼴은 SUIT입니다. PNG는 압축 단계9로 저장했고, 두 JPG는 같은 PNG에서 각각 한 번씩 변환했습니다. JPG의 색상 저장 방식은 기본값인 4:2:0으로 맞췄습니다. 크기 변경과 반복 JPG 재저장은 하지 않았습니다.
PNG를 다시 저장한 뒤 픽셀값이 원본과 같은지도 확인했습니다. 확대 비교는 가장 가까운 픽셀을 반복해 보여주는 방식으로 만들었습니다. 파일 생성 방법은 저장소의 scripts/generate_blog_file_examples.js에 남겼습니다. 측정값은 이 예제에만 해당하며, 앱이나 원본이 달라지면 결과도 달라집니다.
함께 읽어보세요
가짜 좌표를 넣은 JPEG에서 GPS 정보를 읽고 복사본에서 지웠습니다. 원본을 보존하면서 사진에 남은 위치 정보를 확인하는 순서를 안내합니다.
위쪽을 가리키는 그림으로 회전 정보가 있는 파일과 없는 파일을 비교했습니다. 사진의 부가 정보를 지우기 전에 방향부터 맞춰야 하는 이유를 설명합니다.
같은 도형을 투명 PNG와 배경색을 넣은 JPG로 저장했습니다. 흰 사각형이 생기는 이유와 PNG로 다시 저장해도 투명해지지 않는 이유를 비교합니다.
이미지 크기와 JPG 품질을 따로 바꿔 파일4개의 용량을 측정했습니다. 작은 글자를 지키면서 용량을 줄이는 순서를 설명합니다.