PNG vs JPG(JPEG)

세상에는 다양한 파일 형식이 있다.

그중 이미지 파일을 저장하는 대표적인 형식으로 PNG와 JPEG가 있는데, 오늘은 이거에 대해서 정리해보려고 한다.

 

PNG: Portable Network Graphics

PNG의 등장 배경은 초창기 인터넷 시절로 거슬러 올라간다. 그때에는 모든 그림 파일이 GIF 형식(지금 움짤에 쓰이는 그것과 동일)을 사용하고 있었다고 한다. 그 GIF에는 몇몇 단점이 있었고, 라이센스 관련 이런저런 이슈도 있어 새롭게 만들어진 형식이 PNG다. 256 색상만 지원하던 GIF와 달리, PNG는 오늘날 우리가 흔히 아는 RGBA 영역을 지원한다. 32-bit 트루 컬러라고도 표현하는데, 32-bit인 이유는 색상 코드 범위가 0x00000000 ~ 0xFFFFFFFF이기 때문이다. 특히 마지막 두 자리는 A(Alpha) 영역으로 투명도를 나타내는데, GIF에서는 특정한 색을 투명색으로 취급할 수 있었으나 PNG에서는 A영역을 이용해 반투명한 색까지 표현 가능해진 것이다.

 

출처: Wikipedia

 

이러한 PNG의 대표적인 특징은 무손실 압축 포맷이라는 건데, 원본 이미지의 손실 없이 압축이 가능하다는 것이다. 상식적으로 불가능해보이는 것이 가능한 이유는, 간단하게 말하자면 반복되는 부분을 문자 등으로 치환해 압축하는 방식을 사용하기 때문이다.

 

 

JPEG: Joint Photograph Experts Group

JPEG는 어쩌면 컴퓨터에서 사진을 보관하는데 가장 널리 쓰이는 파일 형식이다. 약자 그대로 JPEG라는 단체가 만들어서 JPEG라고 한다. JPG가 더 친숙한 사람들도 있을 텐데, 그 이유는 옛날에 Windows에서 파일 확장자를 3자리로 제한을 둬 JPEG를 JPG로 저장했기 때문이다. 사실 발음도 크게 차이가 없다. 제이-피-지 제이-이-피-지

 

출처: Wikipedia

 

JPEG는 사진을 압축하기 위한 목적으로 고안된 방식이며, 압축률이 꽤 뛰어난데 그 이유는 손실 압축 방식을 사용하기 때문이다. 압축 중간 양자화 과정에서 손실이 많이 일어나는데, 양자화는 간단히 말하면 사람 눈으로 구별하기 힘든 색의 차이는 하나로 통일시켜버리는 것이다. 또한 색의 표현 범위가 24-bit로, RGB 영역만을 지원하기 때문에 투명도를 지원하지 않는다. 어쩌면 당연한 것이, 카메라로 찍은 사진을 위한 파일 형식이기 때문에 투명색이 존재할 이유가 없다.

 

실제 위 고양이 사진에서 왼쪽으로 갈수록 압축률이 높은 대신 화질 손상이 많이 일어나는 것을 볼 수 있다.

 

 

PNG VS JPEG

웹에서는 JPEG가 파일 크기가 더 작기 때문에 확실히 유리한 고지에 있다고 볼 수 있고, 널리 쓰여왔다. 사진을 압축하는 과정에서 손실이 일어나는 JPEG는 자칫하면 이미지가 깨져보이기 쉽다고 생각할 수도 있는데, 꼭 그렇지만도 않다. 일반적인 사진을 PNG와 JPEG로 저장했을 때 사람이 그 차이를 느끼기는 쉽지 않다고 한다.

 

그러나 차이는 글자와 같은 가는 선이 포함된 이미지에서 발생한다. PNG는 이를 명확하게 표현해내지만, JPEG는 당연히 선명해야하는 부분임에도 압축 과정에서 비교적 덜 선명하게 바뀌게 된다. 또한 압축에 있어서도 항상 JPEG가 압승인 게 아니라, 반복되는 패턴이 들어간 이미지의 경우 PNG가 JPEG보다 용량이 작을 수 있다.

 

웹에서는 투명도의 지원 유무도 크다. 특히 아이콘과 같은 이미지 파일의 경우 배경이 투명해야하는데 JPEG로써는 불가능하다. PNG는 앞서 언급했다시피 투명뿐만 아니라 반투명도 표현할 수 있어 좀 더 다채로운 웹디자인을 가능케 해준다.

 

 

정리

	PNG	JPEG
압축 방식	무손실 압축	손실 압축
파일 크기	큼	작음
글자 선명도	선명	덜 선명
투명도	표현 가능	표현 불가능

JPEG와 PNG의 대결은 영원한 승자도, 영원한 패자도 없다. 사용자에게 빠른 로딩 속도를 제공하는 것은 중요하지만, 부드럽고 선명한 이미지를 제공하는 것도 똑같이 중요하기 때문이다. 따라서 둘의 차이를 이해하고 적재적소에 사용하는 것이 핵심인 것 같다.

 

예를 들면 실제 사진이 아닌 로고나 그림, 아이콘, 그래프 등에는 PNG를 사용하고, 실제 사진에는 JPEG를 사용하면 적당히 합의된 웹 페이지를 만들 수 있을 것이다. 물론 PNG도 크기가 작은 파일을 확대하면 깨지는 현상이 있기 때문에 크기가 큰 파일로 대체하는 무식한 방법도 있지만 복잡한 그림이나 스크린샷을 제외하고는 PNG 대신 SVG 파일을 만들어 사용하면 용량도 크게 줄이고 훨씬 부드러운 이미지를 제공할 수 있다!