이미지 형식 고르기 JPEG PNG WebP AVIF 비교
JPEG, PNG, WebP, AVIF의 손실 방식과 투명도 지원, 사진과 스크린샷에 맞는 형식, 리사이즈를 먼저 해야 하는 이유, 브라우저 Canvas 변환에서 메타데이터가 빠지는 점을 정리합니다.
같은 사진을 네 가지 형식으로 저장해 보면 파일 크기가 크게 달라집니다. 어떤 형식은 화질이 눈에 띄게 깨지고, 어떤 형식은 투명한 부분이 흰색으로 바뀝니다. 형식 선택은 파일 크기만의 문제가 아니라 화질, 투명도, 호환성, 개인정보가 함께 얽힌 결정입니다.
이 글은 웹과 문서에서 자주 쓰는 네 형식, JPEG, PNG, WebP, AVIF를 기준으로 무엇을 어떻게 고르는지 정리합니다. 마지막에는 브라우저에서 이미지를 변환하거나 크기를 바꿀 때 생기는 차이를 다룹니다. 실제로 변환해 보려면 이미지 형식 변환기와 이미지 크기 변경 도구를 쓸 수 있습니다.
손실과 무손실의 차이
손실 압축은 사람이 잘 느끼지 못하는 정보를 버려서 파일을 줄입니다. 무손실 압축은 원본의 픽셀 값을 그대로 복원할 수 있게 저장합니다. 같은 무손실이라도 파일 크기는 이미지 내용에 따라 크게 달라집니다.
JPEG는 손실 압축입니다. 품질 값을 낮출수록 파일은 작아지지만, 경계선 주변에 얼룩 같은 깨짐이 생깁니다. 이 깨짐은 글자나 선이 많은 그림에서 특히 눈에 띕니다.
PNG는 무손실입니다. 색 수가 적고 면이 단순한 그림, 로고, 스크린샷에 잘 맞습니다. 반대로 사진처럼 색 변화가 많은 이미지는 PNG로 저장하면 파일이 커지는 경우가 많습니다.
WebP와 AVIF는 손실과 무손실 모드를 모두 가집니다. 같은 용량에서 JPEG보다 화질이 나은 경우가 많지만, 어느 정도 차이가 나는지는 이미지마다 다르므로 실제 파일로 비교하는 것이 확실합니다. 이 글에서는 특정 용량 감소율을 약속하지 않겠습니다.
투명도 지원
투명도가 필요한지부터 확인하세요. 투명 영역이 있는 로고나 아이콘은 PNG나 WebP처럼 알파 채널을 지원하는 형식이어야 합니다. JPEG는 알파 채널을 저장하지 않습니다.
이 도구에서 JPEG로 변환하면 투명 영역은 흰색으로 채워집니다. 도구 안내에도 이 내용이 적혀 있습니다. 검은 배경 위에 올릴 로고를 JPEG로 저장했다가 흰 테두리가 남는 실수가 자주 생기는 이유입니다.
투명도가 필요 없고 사진이라면 JPEG나 WebP가 보통 더 작습니다. 투명도가 필요하면 PNG나 WebP를 고르고, 파일 크기가 중요하면 WebP를 먼저 시험해 보세요.
사진과 스크린샷은 다르게 다룹니다
사진은 색의 그라데이션이 많고 질감이 불규칙합니다. 이런 이미지는 손실 압축을 써도 깨짐이 덜 눈에 띄는 편입니다. JPEG나 WebP의 손실 모드가 보통 좋은 선택입니다.
스크린샷은 다릅니다. 글자, 얇은 선, 단색 버튼이 많습니다. 손실 압축을 적용하면 글자 가장자리에 얼룩이 생기고, 이 얼룩은 사진보다 훨씬 거슬립니다. 이런 이미지는 PNG나 무손실 WebP가 낫습니다.
한 장의 문서에 사진과 스크린샷이 섞여 있다면, 같은 형식으로 통일하기보다 이미지별로 나눠 저장하는 편이 결과가 좋습니다.
리사이즈를 먼저 해야 하는 이유
화면에 1,000px 폭으로 보일 이미지를 4,000px 원본 그대로 올리면 대부분의 용량이 쓸데없는 픽셀에 들어갑니다. 형식을 바꾸는 것보다 크기를 줄이는 것이 효과가 큽니다. 형식 변환은 같은 픽셀을 다른 방식으로 저장하는 일이고, 리사이즈는 저장할 픽셀 수 자체를 줄이는 일입니다.
순서도 중요합니다. 큰 이미지를 먼저 손실 형식으로 압축한 뒤 줄이면 압축 깨짐이 축소되면서 흐려질 수 있습니다. 반대로 줄인 뒤 압축하면 최종 품질을 더 쉽게 맞출 수 있습니다. 보통 리사이즈를 먼저 하고, 마지막에 형식과 품질을 정하는 순서가 안전합니다.
이 도구의 리사이즈 모드는 결과를 항상 PNG로 저장합니다. 사진을 리사이즈만 했는데 파일이 커졌다면 이 때문일 수 있습니다. 용량을 줄이려면 리사이즈 후 변환 모드에서 WebP나 JPEG를 선택하세요.
가로 폭만 정하고 세로를 비율에 맞춰 계산하는 옵션도 있습니다. 예를 들어 1200×800 이미지의 가로를 600으로 줄이면 세로는 Math.round(600 × 800 / 1200), 즉 400이 됩니다.
도구에는 입력과 출력 제한이 있습니다. 입력 파일은 PNG, JPEG, WebP만 받으며 10MiB 이하여야 합니다. 전체 픽셀 수는 1,600만 이하여야 합니다. 가로와 세로가 각각 4,000px인 이미지는 정확히 1,600만 픽셀이라 통과하지만, 5,000×4,000 이미지는 2,000만 픽셀이라 거부됩니다. AVIF는 입력으로도 출력으로도 지원하지 않습니다.
브라우저 Canvas 변환에서 빠지는 것
브라우저에서 이미지를 변환하는 가장 흔한 방법은 Canvas에 그린 뒤 다시 인코딩하는 것입니다. 이 방식은 편리하지만, 원본 파일의 부가 정보를 그대로 옮기지 않습니다.
첫째, EXIF 메타데이터가 결과물에 들어가지 않습니다. 촬영 기기, 촬영 시각, 위치 정보 같은 값이 Canvas를 거치면서 사라집니다. 개인정보 측면에서는 장점이지만, 사진 정리 도구에서는 원본 날짜 정보를 잃는다는 뜻입니다.
둘째, 색 프로파일은 결과물에서 원본과 같다고 가정하면 안 됩니다. 원본이 특정 색 공간을 지정했다면, 다시 인코딩한 결과에서 색이 조금 달라 보일 수 있습니다. 색이 중요한 이미지는 원본과 결과를 나란히 열어 비교하세요.
셋째, 방향 정보도 확인이 필요합니다. 휴대폰 사진은 회전 정보를 메타데이터로 들고 있는 경우가 많습니다. 출력 파일을 열었을 때 방향이 맞는지 직접 보는 것이 가장 확실합니다.
넷째, 브라우저마다 지원 형식이 다릅니다. 이 도구는 Canvas가 요청한 형식으로 실제 인코딩하지 못하면 결과를 만들지 않고 지원하지 않는다는 오류를 표시합니다. 요청과 다른 형식이 조용히 저장되지 않으므로, 오류가 나면 다른 형식을 고르세요.
형식 선택 예제
웹 페이지에서 사진을 보여 준다면 브라우저가 지원하는 형식을 순서대로 제시하는 방식이 일반적입니다.
<picture>
<source type="image/avif" srcset="photo.avif">
<source type="image/webp" srcset="photo.webp">
<img src="photo.jpg" alt="바닷가 풍경" width="1200" height="800">
</picture>
브라우저는 위에서부터 읽고 지원하는 첫 번째 형식을 씁니다. 마지막 img의 JPEG는 모든 환경에서 보이는 대체 수단입니다. width와 height를 함께 적으면 이미지가 로드되기 전에도 레이아웃 자리가 잡힙니다.
흔한 실수
첫째, 사진을 PNG로 저장하는 실수입니다. 화질은 좋지만 파일이 커지기 쉽습니다. 사진은 손실 형식으로 충분한 경우가 많습니다.
둘째, 스크린샷을 낮은 품질의 JPEG로 저장하는 실수입니다. 글자 주변이 번져서 문서가 읽히지 않는 수준이 될 수 있습니다.
셋째, 리사이즈 없이 원본을 올리는 실수입니다. 화면에 작게 보이는 이미지도 원본 픽셀 전체를 내려받아야 합니다.
넷째, 투명 로고를 JPEG로 저장하는 실수입니다. 투명 영역이 흰색으로 채워져 어두운 배경에서 흰 테두리가 보입니다.
다섯째, 리사이즈 결과를 PNG 그대로 쓰는 실수입니다. 사진은 PNG 결과가 커지므로 리사이즈 후 변환 단계를 한 번 더 거치세요.
여섯째, 변환 후 원본을 지웠다가 메타데이터를 잃는 실수입니다. 날짜나 방향 정보가 필요하다면 원본을 보관하고 결과와 따로 관리하세요.
점검 목록
- 투명도가 필요한 이미지인지 먼저 확인하고, 필요하면 PNG나 WebP를 선택합니다.
- 사진은 손실 형식, 스크린샷과 글자가 많은 이미지는 무손실 형식을 기본으로 고릅니다.
- 화면에 표시될 크기에 맞춰 먼저 리사이즈하고, 그다음 형식과 품질을 정합니다.
- 리사이즈 결과는 PNG이므로 용량이 중요하면 변환 단계를 추가합니다.
- JPEG로 저장할 때 투명 영역이 흰색으로 바뀌는 점을 고려합니다.
- 변환 결과의 방향과 색을 원본과 나란히 열어 확인합니다.
- 원본 날짜나 위치 정보가 필요한지 판단하고, 필요하면 원본을 따로 보관합니다.
- AVIF가 필요하다면 이 도구가 아니라 해당 형식을 지원하는 다른 도구를 사용해야 합니다.