블로그 글에 이미지를 올리려는데 JPG로 저장할지, PNG로 저장할지 고민해본 적 있으신가요? 포맷 하나 잘못 선택하면 파일 크기가 불필요하게 커지거나, 반대로 화질이 뭉개질 수 있습니다. 각 포맷의 특성을 알아두면 상황에 맞는 최적의 선택을 할 수 있어요.
이미지 포맷이 중요한 이유
웹사이트 성능에서 이미지가 차지하는 비중은 생각보다 큽니다. 평균적으로 웹 페이지 용량의 50% 이상을 이미지가 차지하거든요. 포맷을 제대로 선택하면 같은 화질에서 파일 크기를 절반 이하로 줄일 수 있고, 이는 곧 페이지 로딩 속도 향상으로 이어집니다.
또한 투명도 지원 여부, 애니메이션 가능 여부, 색상 범위 등 포맷마다 지원하는 기능이 다릅니다. 용도에 맞지 않는 포맷을 쓰면 원하는 결과를 얻을 수 없어요.
JPG (JPEG) - 사진의 표준
JPG는 1992년에 만들어진 가장 보편적인 이미지 포맷입니다. 디지털 카메라, 스마트폰 사진의 기본 저장 형식이기도 하죠.
손실 압축 방식: JPG의 핵심은 손실 압축입니다. 사람의 눈이 인지하기 어려운 데이터를 제거해서 파일 크기를 크게 줄여요. 압축률을 높일수록 파일은 작아지지만 화질이 떨어집니다.
1,600만 색상 지원: 24비트 컬러로 약 1,670만 가지 색상을 표현할 수 있어서 사진처럼 색상이 풍부한 이미지에 적합합니다.
투명도 미지원: JPG는 투명 배경을 지원하지 않습니다. 투명한 부분이 필요하면 PNG나 WebP를 써야 해요.
적합한 용도: 풍경 사진, 인물 사진, 제품 사진 등 색상 변화가 풍부하고 세밀한 디테일이 필요한 이미지에 가장 좋습니다.
PNG - 선명함과 투명도의 왕
PNG는 GIF의 한계를 극복하기 위해 1996년에 개발되었습니다. 비손실 압축을 사용한다는 점이 JPG와의 가장 큰 차이점이에요.
비손실 압축: 원본 데이터를 하나도 잃지 않고 압축합니다. 아무리 저장을 반복해도 화질 저하가 없어요. 대신 같은 이미지를 JPG로 저장할 때보다 파일 크기가 큽니다.
투명도(알파 채널) 지원: PNG의 가장 큰 장점입니다. 배경이 투명한 로고나 아이콘을 만들 수 있어요. 0%(완전 투명)부터 100%(불투명)까지 256단계의 투명도를 지원합니다.
선명한 경계선: 텍스트나 도형처럼 경계가 뚜렷한 이미지에서 JPG보다 훨씬 깔끔하게 표현됩니다. JPG는 이런 이미지에서 경계 부분에 노이즈가 생기거든요.
적합한 용도: 로고, 아이콘, 스크린샷, 텍스트가 포함된 이미지, 투명 배경이 필요한 그래픽.
WebP - 차세대 올라운더
Google이 2010년에 개발한 비교적 새로운 포맷입니다. JPG와 PNG의 장점을 합쳐놓은 것처럼 보이는데, 실제로도 그에 가깝습니다.
손실/비손실 모두 지원: 사진처럼 손실 압축이 필요한 경우와, 로고처럼 비손실 압축이 필요한 경우 모두 WebP 하나로 대응할 수 있습니다.
뛰어난 압축률: 같은 화질에서 JPG 대비 25~34% 더 작은 파일 크기를 제공합니다. 비손실 모드에서도 PNG보다 26% 정도 작아요. 웹 성능 최적화에 큰 도움이 됩니다.
투명도와 애니메이션: PNG처럼 투명도를 지원하면서, GIF처럼 애니메이션도 가능합니다. 그러면서 파일 크기는 둘 다보다 작아요.
브라우저 지원: 예전에는 호환성이 문제였지만, 현재는 Chrome, Firefox, Safari, Edge 등 주요 브라우저가 모두 지원합니다. 다만 아주 오래된 브라우저에서는 표시되지 않을 수 있어요.
GIF - 움직이는 이미지의 원조
1987년에 만들어진 GIF는 요즘 주로 짧은 애니메이션이나 밈(meme)에 사용됩니다.
256색 제한: 최대 256가지 색상만 사용할 수 있어서 사진에는 적합하지 않습니다. 하지만 간단한 그래픽이나 아이콘에는 충분해요.
애니메이션 지원: GIF의 최대 장점이자 아직까지 살아있는 이유입니다. 별도 플레이어 없이 브라우저에서 바로 재생되죠.
대안: 요즘은 짧은 동영상에 GIF 대신 WebP 애니메이션이나 MP4를 쓰는 추세입니다. 같은 내용을 훨씬 작은 용량으로 전달할 수 있거든요.
SVG - 크기가 변해도 선명한 벡터
위의 포맷들이 픽셀(점) 기반인 반면, SVG는 수학적 공식으로 이미지를 표현하는 벡터 포맷입니다.
무한 확대 가능: 아무리 크게 확대해도 깨지지 않습니다. 해상도에 독립적이라 반응형 웹에 완벽해요.
파일 크기 극소: 단순한 도형이나 로고는 SVG로 만들면 몇 KB에 불과합니다.
CSS/JS로 조작 가능: HTML 문서에 직접 삽입하면 색상이나 크기를 코드로 동적 변경할 수 있어요.
적합한 용도: 로고, 아이콘, 차트, 일러스트레이션, UI 요소.
상황별 최적 포맷 추천
웹사이트 사진: WebP를 1순위로, 호환성이 걱정되면 JPG를 사용하세요. 압축 품질 80% 정도면 눈으로 차이를 느끼기 어렵습니다.
SNS 업로드: 대부분의 플랫폼이 JPG를 권장합니다. 업로드 시 자체 압축이 적용되므로 원본은 최대한 고품질로 올리는 게 좋아요.
로고/아이콘: SVG가 최선입니다. 불가능하다면 PNG를 사용하세요.
투명 배경 이미지: WebP 또는 PNG. 파일 크기가 중요하면 WebP를 선택하세요.
프린트/인쇄: 최고 품질의 PNG 또는 TIFF를 사용하세요. 손실 압축 포맷은 인쇄 시 품질 저하가 눈에 띌 수 있습니다.
이메일 첨부: JPG가 가장 무난합니다. 모든 이메일 클라이언트에서 호환되고 파일 크기도 적당해요.
포맷 변환 시 주의할 점
JPG를 PNG로 변환한다고 화질이 좋아지지는 않습니다. 이미 손실된 데이터는 복구할 수 없어요. 반대로 PNG를 JPG로 변환하면 파일 크기는 줄지만 투명도 정보가 사라집니다.
가능하면 원본 파일을 보관해두고, 용도에 맞게 그때그때 변환하는 게 가장 좋은 방법입니다. 이미지 포맷 변환이 필요할 때는 아래 도구들을 활용해 보세요.
자주 묻는 질문
WebP를 모든 브라우저에서 지원하나요?
현재 주요 브라우저는 모두 지원한다. 크롬·파이어폭스·엣지는 오래전부터 지원했고, 가장 늦었던 사파리도 2020년 14 버전(macOS Big Sur, iOS 14)부터 지원한다. 실무에서 걸리는 쪽은 오히려 브라우저가 아니라 오래된 이미지 편집 도구나 일부 업로드 폼이다. <picture> 요소로 WebP를 먼저 두고 JPG를 fallback으로 지정하면 안전하다.
AVIF는 WebP보다 나은가요?
압축률만 놓고 보면 그렇다. 같은 화질에서 WebP보다 대략 20~30% 더 작고, 특히 사진 계열에서 차이가 두드러진다. HDR과 12비트 색심도도 지원한다. 다만 인코딩 속도가 느려 이미지를 대량으로 변환할 때 체감되고, 사파리는 16 버전부터 지원한다. 트래픽 비용이 중요하면 AVIF, 호환성과 빌드 속도가 중요하면 WebP가 무난한 선택이다.
투명도가 필요할 때는 어떤 형식?
PNG가 기본이지만 파일이 크다. 사진에 투명 배경이 필요한 경우라면 WebP가 알파 채널을 지원하면서 PNG보다 훨씬 작다. 로고나 아이콘처럼 도형 위주의 이미지는 SVG가 정답이다. 해상도에 관계없이 선명하고 CSS로 색을 바꿀 수도 있다. GIF도 투명도를 지원하기는 하지만 1비트라 반투명 표현이 안 되고 가장자리가 계단처럼 깨진다.
인쇄용 이미지에는 어떤 형식?
인쇄는 300dpi가 기준이라 웹용 72dpi 이미지를 그대로 넘기면 흐릿하게 나온다. 사진은 손실 없는 TIFF가 표준이고, 인쇄소 입고용으로는 이미지를 PDF에 담아 전달하는 경우가 많다. 인쇄는 CMYK 색공간을 쓰는데 WebP와 PNG는 RGB만 지원하므로 인쇄 원고로는 적합하지 않다. 최종 납품 전에 인쇄소가 요구하는 형식과 색공간을 확인하는 것이 확실하다.