PNG, JPG, WebP 비교

한 줄 요약

사진에는 JPG, 선명한 가장자리나 글자나 투명도가 있는 것에는 PNG, 용도가 웹 페이지이고 그것을 여는 환경을 통제할 수 있다면 WebP를 쓰세요. 다른 건 다 잊어도 이 규칙은 압도적으로 대부분의 경우 맞습니다.

JPG가 아직도 어디에나 있는 이유

JPG는 1992년에 특정한 통찰을 바탕으로 설계되었습니다. 사람의 눈은 색보다 밝기에 훨씬 민감하고, 복잡한 영역의 세부는 거의 알아채지 못한다는 것입니다. JPG는 가장 덜 아쉬울 정보를 버리기 때문에, 사진을 10분의 1 크기로 줄여도 똑같아 보일 수 있습니다.

그 똑같은 방식 때문에 JPG는 다른 모든 것에는 약합니다. 흰 바탕의 선명한 검은 글자는 이 형식이 가장 못 다루는 경계에 놓여 있어서, JPG로 저장한 스크린샷은 모든 글자 주위에 지저분한 후광이 생깁니다. 압축이 고장 난 것이 아니라, 설계된 대로 설계되지 않은 콘텐츠에 작동하고 있는 것입니다.

PNG가 존재하는 이유

PNG는 무손실입니다. 넣은 모든 픽셀이 몇 번을 열고 다시 저장해도 비트 단위로 그대로 나옵니다. 또한 진짜 알파 채널이 있어서 이미지의 일부를 배경색으로 채우는 대신 실제로 투명하게 만들 수 있습니다.

대가는 크기입니다. PNG는 패턴과 반복을 찾아 압축하므로 단색, 로고, 도표, 스크린샷에는 훌륭하게 작동하지만, 모든 픽셀이 이웃과 조금씩 다른 사진에는 잘 작동하지 않습니다. PNG로 저장한 사진은 눈에 보이는 이득 없이 JPG의 5배 크기가 되기 쉽습니다.

WebP가 실제로 앞서는 곳

WebP는 두 가지 역할을 모두 합니다. 같은 시각적 품질에서 일반적으로 JPG보다 나은 손실 모드가 있고, 투명도를 지원하며 일반적으로 PNG보다 나은 무손실 모드가 있습니다. PNG 대비 일반적인 절감 폭은 30%에서 70% 사이입니다.

문제는 브라우저가 아닙니다. 현재의 모든 브라우저는 WebP를 읽습니다. 그 밖의 모든 것이 문제입니다. 오래된 데스크톱 소프트웨어, 일부 프린터, 일부 기업 문서 시스템, 그리고 파일을 아예 열지 못하는 수많은 도구들입니다. 웹에 게시한다면 WebP를 쓰세요. 어떤 환경에서 열지 모르는 사람에게 파일을 보낸다면 쓰지 마세요.

거의 모두가 빠지는 함정

JPG를 PNG로 변환해도 품질이 복원되지 않습니다. 그 시점부터 파일이 무손실이 되어 추가 손상을 막을 뿐이며, 원본 JPG가 버린 세부 정보는 영구히 사라졌고 PNG는 모든 압축 흔적까지 충실히 보존합니다. 결국 똑같은 결함을 담은 훨씬 큰 파일이 됩니다.

여기서 얻을 유용한 교훈이 있습니다. 이미지를 반복해서 편집할 거라면 PNG로 작업하고 맨 마지막에 한 번만 JPG로 내보내세요. 손실 형식으로 중간 저장을 할 때마다 손상이 누적됩니다.

투명도는 어떻게 되는가

투명도를 지원하는 것은 PNG, WebP, GIF, ICO뿐입니다. 이 중 어느 것을 JPG나 BMP로 변환하면 그 영역은 무언가로 채워져야 합니다. 형식에 "아무것도 없음"을 기록할 곳이 없기 때문입니다. 무엇을 고르는지는 도구마다 다르며, 놀랄 만큼 많은 도구가 검은색을 골라 로고를 망칩니다. 이 사이트는 의도적으로 흰색으로 채우며, 대부분의 사람이 기대하는 것이 거의 항상 이쪽입니다.

실제로 적용해 보려면 더 가벼운 웹 이미지를 위해 PNG를 WebP로 변환하거나, 무손실 사본이 필요할 때 JPG를 PNG로 변환하거나, 형식을 바꾸지 않고 이미지를 압축하세요.