웹에서 주료 사용되는 JPG, GIF, PNG 이미지 포맷에 대한 이야기

웹에서 널리 사용되는 JPG, GIF, PNG 이미지 포맷

이미지 포맷에는 수많은 종류가 있지만 웹에서 주로 사용되는 것은 JPG(JPEG), GIF, PNG 세 가지 입니다. 그렇다면 이 세 가지 이미지 포맷은 어떻게 다르고 각각의 포맷은 어떠한 특성이 있을까요? 일단 세 가지 이미지 포맷의 주요한 특성을 간략하게 정리하면 다음과 같습니다.

JPG : 손실 압축 방식. 원본에 손상을 가해 이미지의 용량을 줄이는 방식. 트루 컬러(24비트) 색상 지원. 압축율을 높이거나 새로 저장할 수록 이미지의 품질이 점점 떨어지는 단점이 있다.(계단 현상 심화) 사진과 같이 다양한 색상과 명도를 가진 이미지의 용량을 줄이는데에 가장 높은 효율을 보여주기에 주로 사진을 저장하는 용도로 사용된다.(사진에 특화되어 있다.) 실제로 웹에서 가장 널리 사용되는 이미지 포맷이라고 할 수 있다.

GIF : 비손실 압축 방식. 이미지 포맷 자체는 비손실 압축이지만, 하나의 이미지에 저장 가능한 색상이 256 색으로 제한되는 탓에 트루 컬러(24비트)와 같은 256 이상의 색을 가진 이미지를 GIF 포맷으로 저장하게 되면 어쩔 수 없이 손실이 발생하게 된다. 단색 투명층을 통해 투명 이미지를 지원한다.(투명이거나 아니거나) 또한 움직이는 그림 즉, 애니메이션을 지원하기 때문에 이 방면으로도 널리 사용되고 있다. JPG 이미지 포맷과 함께 웹에서 널리 사용되는 이미지 포맷이다.

PNG : 비손실 압축 방식. 비손실이면서 트루 컬러(24비트)를 지원하기 때문에 원본을 손상없이 그대로 저장할 수 있다. 또한 GIF 의 단색 투명층이 아닌 8 비트 알파 채널을 통한 투명층을 지원하기 때문에 이미지에 농도를 조절하여 투명 효과를 정밀하게 줄 수 있다. 단순한 패턴을 가진 이미지에는 굉장히 높은 압축 효율을 보여주지만, 사진과 같은 다양한 색상과 명도를 가진 이미지에서는 압축 효율이 좋지 못한 특성을 가지고 있다. 비교적 단순한 패턴을 가지고 투명 효과가 중요한 아이콘과 같은 이미지에서 널리 사용되며, 손상이 발생하지 않기 때문에 이미지의 품질을 중요시 하는 경우에는 사진을 저장할 때에도 많이 사용되고 있다.

JPG 이미지 포맷

일단 가장 먼저 JPG 포맷은 손실 압축이라고 하였습니다. 이는 쉽게 원본 이미지에서 사람의 눈이 정확하게 구분하기 힘든 부분에 대한 정보를 제거하거나, 또는 그러한 영역을 하나로 합쳐 이미지의 크기를 줄이는 방식이라고 생각하시면 됩니다.

예를 들어 위의 빨간 박스는 미묘하게 다른 세 가지의 다른 빨간색으로 구성되어 있습니다. 여러분은 이것을 바로 파악하실 수 있나요? 사람의 눈은 이처럼 미묘한 색상의 차이는 쉽게 구별해내지 못합니다. 어차피 잘 구별도 못하는 거 이러한 부분을 하나의 색으로 합쳐버린다면 어떨까요? 그렇게 처리를 해도 사람의 눈은 무슨 변화가 일어났는지 그 차이를 쉽사리 파악하지 못하고, 대신 세 가지 색상 정보를 하나로 합쳤으니 그만큼 용량은 줄어 들게 되는 것이죠. JPG 포맷의 원리를 매우 간단하게 이야기하면 이와 같습니다.


JPG 포맷에서 이야기하는 저장 품질(압축률)이란 바로 이러한 작업을 어느 정도의 선까지 할 것이냐를 결정하는 것이라고 보시면 됩니다. 품질을 높이면(압축률을 낮추면) 이를 보다 정교하게 작업하고, 품질을 낮추면(압축률을 높이면) 보다 많은 정보를 버리는 식으로 작업하는 것이죠. 그래서 이러한 이유로 JPG 의 저장 품질을 너무 낮추거나, 저장 작업을 반복하여 손실이 점점 누적되면, 이미지가 뭉개지거나 깍두기 현상이 발생하게 되는 겁니다.

JPG 포맷에선 이처럼 저장 품질이 낮아질 수록(손실이 누적될 수록) 이미지가 손상되는 것을 쉽게 확인할 수 있다.

참고로 색이나 명암의 구성이 복잡하고 경계가 불분명한 사진같은 이미지에서는 손실 압축으로 인해 이미지에 손상이 발생해도 어느 정도까지는 이러한 차이를 구별하기가 쉽지 않습니다. 하지만 그림이나 텍스트와 같이 색의 구성이 단순하고, 선의 경계가 명확한 이미지에서는 보다 쉽게 이미지의 손상을 감지할 수 있습니다. 그래서 JPG 포맷은 선의 구별이 뚜렷하지 않고 다양한 색상과 명암으로 구성된 사진에 좀 더 특화된 이미지 포맷이라고 보시면 됩니다.

사진 같은 이미지에선 품질에 따른 차이를 쉽게 느끼기가 어렵다.

아무튼 이미지를 JPG 포맷으로 저장하게 되면 어떠한 품질이든 원본에서 손상이 가해진다는 것이고, 이렇게 한 번 손상된 정보는 복구할 수 없습니다. 또한 JPG -> JPG 로 새로 저장할 때마다 반복하여 손상 압축이 이루어지는 것이기 때문에, 그에 맞춰 이미지의 품질은 점차 떨어지게 됩니다. [단순 파일 복사가 아닌 이미지 편집 프로그램에서 JPG 포맷의 이미지를 불러와서 다시 JPG 포맷으로 새로 저장할 때를 의미합니다.]


보통의 인터넷 커뮤니티는 JPG 파일을 업로드하면 파일을 올린 그대로 저장하는 곳도 있지만, 대부분의 경우 자동으로 약 80%~90% 정도의 품질로 새로 저장하도록 셋팅이 되어 있는 것이 일반적입니다. [서버의 용량과 트래픽을 위해서] 즉, 보통 인터넷 커뮤니티에 JPG 파일을 올리면 많은 곳이 원본보다 미묘하게 품질을 떨어트려서 저장하는 것이죠. 그렇게 미묘하게 품질이 떨어진 사진을 누군가가 가져가서 다시 다른 커뮤니티에 올리면? 또 거기에서도 미묘하게 품질이 떨어진 채 저장되는 겁니다. 이게 계속 반복되면? 즉, 이미지가 이 커뮤니티에서 저 커뮤니티로 한 몇 년간 떠돌다보면 이러한 품질 손상이 누적되고, 결국 나중엔 글자 등을 알아보기가 힘들 정도로 이미지가 손상되는 겁니다. 왜 이미지들이 커뮤니티를 떠돌수록 점점 손상되는지 아시겠죠?


마지막으로 JPG 포맷은 앞으로 이야기할 다른 두 포맷과는 다르게 투명 효과를 지원하지 않습니다. 즉, 이미지를 서로 겹쳐서 표현하는 게 불가능하다는 것이죠. 그래서 버튼이나 아이콘 등의 이미지에서(다른 이미지 위에 겹쳐서 출력되는 이미지들에서) JPG 포맷은 거의 사용되지 않는 것입니다.


JPG 이미지 포맷에 대한 이야기는 이 정도면 될 듯 싶네요. 다음으로 GIF 이미지 포맷에 대해서 이야기해보도록 하겠습니다.

GIF 이미지 포맷

일단 GIF 포맷은 비손실 압축입니다. 하지만 24비트(16,777,216 색상) 색상을 지원하고 이를 그대로 표현해주는 다른 두 이미지 포맷과는 다르게, 하나의 이미지에서 오직 256 색만을 저장하여 표현합니다, 이 때문에 256 색 이상의 색상 정보를 가진 이미지들은 GIF 포맷으로 저장하면 실질적으로 이미지에 손상이 발생하게 됩니다.

하나의 이미지에 256 색이라는 한계가 있기 때문에 이보다 많은 색상 정보를 가진 이미지들을 GIF 로 저장하게 되면 많은 색상 정보를 버리게 되고 이는 이미지 품질의 저하로 이어진다.

근데 여기에서 한 가지 아셔야 할 것이 GIF 에 저장되는 256 색은 애초에 정해진 것이 아니라, 해당 이미지를 저장할 때 어떠한 색상들을 포함시킬지가 결정된다는 겁니다. 즉, 원래 GIF 포맷은 256 색보다 많은 24비트의 색상 정보를 표현할 수 있지만, 그 중에서 해당 이미지에서 가장 많이 사용된 256 가지의 색상을 추린 후, 해당 색상만을 가지고 이미지를 재구성하고, 최종적으로 비손실 방식으로 압축하여 저장하는 것이죠. 이러한 과정을 거쳐 이미지의 용량을 줄이는 겁니다.


그래서 만약에 원본 이미지가 원래 256 색 이하로 구성되어 있다면, 해당 이미지를 GIF 포맷으로 저장하여도 전혀 손상되지 않는 것이고, 그보다 많은 색상으로 이루어졌지만 거의 비슷한 계열의 색상으로만 구성된 이미지라면 손상의 정도가 그만큼 감소하는 것이죠. 그래서 GIF 포맷은 색상과 명암의 구성이 단순한 아이콘이나 만화와 같은 이미지에 강한 모습을 보이는 겁니다.

하지만 만약에 이미지가 총 천연색의 무지개빛 칼라를 가졌거나, 명암의 단계가 굉장히 많은 그레이스케일 형태의 이미지(흔히 보는 흑백 이미지)라면, 이를 GIF 포맷으로 저장하면 그 만큼 손상이 심해지게 됩니다.

비슷한 색상의 집합으로 이루어진 이미지는 GIF 포맷으로 저장하여도 손상의 정도가 그렇게 심하지 않다.

하지만 총 천연색 풀 칼라의 다채로운 색상이나 명암으로 이루어진 이미지는 GIF 에게는 쥐약이다.

이것이 바로 어떠한 이미지는 GIF 포맷으로 저장하면 나름 깔끔하게 보이는데, 어떤 이미지는 이상하게 계단 현상이 심하고 더럽게(?) 보이는 이유입니다. 사진에 포함된 색이 많고, 그 스펙트럼이 넓어질 수록, 명암의 단계가 깊어질 수록 GIF 포맷은 포함시킬 수 있는 색상 개수의 한계로 품질이 떨어지는 특성을 가지고 있습니다.


GIF 이미지의 또 다른 특징이라면 JPG 와는 다르게 투명 효과를 지원한다는 겁니다. 즉, GIF 이미지의 배경을 투명하게 처리하면 해당 이미지 아래의 다른 이미지들이 그대로 보인다는 것이죠. 이러한 투명 효과의 지원으로 어떠한 배경 위에서 이미지를 보다 깔끔하게 출력하는 것이 가능합니다. 그래서 GIF 포맷은 웹에서 보통 다른 배경 이미지들 위에서 출력되는 버튼이나 아이콘 등에서 널리 사용되고 있습니다. 하지만 지원되는 투명 효과가 단색 투명층인지라(투명하거나 아니거나), 8비트 채널의 세세한 농도로 투명 효과를 줄 수 있는 PNG 에 비해서는 제약이 많습니다.


지금까지 GIF 포맷의 특성에 대해서 이야기를 해봤습니다. 그런데 이것 외에 GIF 포맷의 가장 큰 특징은 애니메이션 기능을 지원한다는 것입니다. 흔히 애니메이션 GIF 또는 움직이는 그림이라고 불리우는 그것을 이야기하는 겁니다.

나는 이 이미지가 괜히 좋더라.

이러한 움직이는 GIF 이미지는 하나의 GIF 이미지 파일 안에 여러 개의 GIF 이미지를 모두 저장한 후 이를 순차적으로 보여주어 애니메이션 효과를 내는 것입니다. 즉, 애니메이션 GIF 에는 포함된 프레임의 개수 만큼 개별적인 GIF 이미지가 모두 포함되어 있는 것이라고 생각하시면 됩니다. 이제 그것을 하나의 GIF 로 담은 것이죠. 그리고 해당 이미지들에는 각각 다음 이미지로 넘어갈 시간이 저장되어 있어서 그 시간이 지나면 다음 이미지로 넘어가는 형식입니다. 그래서 이러한 애니메이션 GIF 의 용량은 총 재생 시간이 아닌 포함된 총 프레임의 수에 따라 결정됩니다.

GIF 이미지 포맷에 대해서는 이정도면 될 듯 하네요. 다음으로 PNG 포맷에 대해서 이야기해보도록 하겠습니다.

PNG 이미지 포맷

PNG 이미지 포맷은 비손실 압축 방식이며, 24비트 색상 + 8비트 알파 채널 도합 32비트 색상 정보를 모두 지원합니다. 즉, 비손실 압축에 모든 컬러를 지원하기 때문에 PNG 포맷으로 이미지를 저장하게 되면 앞서의 두 포맷과는 다르게 이미지에 전혀 어떠한 손상도 일어나지 않습니다. 그래서 PNG 포맷은 이미지에 손상이 발생하면 안 되거나, 이미지를 원본 그대로 저장하는 용도로 주로 사용됩니다.

이처럼 이미지에 손실이 없기 때문에 원본이 되는 첫 이미지를 저장할 때는 PNG 포맷으로 저장하는 것이 좋습니다. 그래서 캡쳐 프로그램 등에서는 PNG 포맷이 기본 저장 포맷인 경우가 많습니다. 일단 PNG 로 저장해놓고 나중에 적절히 편집하여 JPG 나 GIF 로 따로 저장하는 방식으로 작업을 하는 것이죠.


이야기한 것과 같이 PNG 포맷은 8비트 알파 채널을 지원하기 때문에 보다 정교한 농도의 강약이 있는 투명 효과를 낼 수 있고, 이러한 특성으로 GIF 와 함께 버튼이나 아이콘 등의 이미지에서 널리 사용되고 있습니다. 일례로 지금 보고 계시는 캐플 블로그의 상단 메뉴와 사이드 바의 배경 판넬이 투명 효과를 적용한 PNG 이미지입니다. 자세히 보시면 그 뒤로 블로그 전체의 배경 이미지가 투명하게 보이는 것을 확인하실 수 있으실 겁니다.

투명 처리되어 있는 캐플 블로그의 사이드바 판넬 모습. PNG 포맷은 이와 같이 단순 투명이 아닌 농도를 가진 투명 효과를 낼 수 있다.

잠시 다른 이야기를 해보자면 PNG 포맷과 동일하게 이미지에 어떠한 손실도 발생하지 않는 이미지 포맷이 바로 BMP 포맷입니다. BMP 포맷 또한 24비트 컬러 + 8비트 알파 채널을 지원하지만, 대신 PNG 와 다르게 이미지를 압축하지 않고 원래의 데이터 그대로 둔 형태이죠. 즉, 도트 하나 하나의 정보를 원본 그대로 가지고 있는 게 바로 BMP 포맷입니다. 어찌보자면 래스터 이미지(비트맵, 점으로 구성된 이미지, JPG, GIF, PNG, BMP 모두 래스터 이미지) 포맷들 중에 BMP 포맷을 가장 순수한 형태의 원본이라고 볼 수 있습니다. 이는 달리 말하자면 BMP 포맷 이미지의 용량이 원래 해당 이미지가 가져야할 용량이고, 이를 줄이기 위해 JPG, GIF, PNG 와 같은 압축 기술이 사용되고 있다고도 볼 수 있습니다.

그래서 BMP 를 원본으로 놓고 보았을 때, 이제 여기에서 JPG 는 이미지에 손실을 가하는 방향으로 용량을 줄이는 것이고, GIF 는 색상 수를 줄이고 추가로 압축하는 방향으로 용량을 줄이는 것이고, PNG 는 순수하게 데이터만 압축하는 방식으로(ZIP 이나 RAR 압축과 같이 원본 데이터에 손실없이 압축) 용량을 줄이는 것입니다.


PNG 포맷의 특성에 대해서 이야기하기 위해선 BMP 포맷의 이미지를 기준으로 다른 포맷들과 함께 비교하여 이야기하는 것이 좋아 보입니다. 먼저 첫 번째 이미지를 보도록 하겠습니다. 아래의 이미지는 618x393 해상도에 32비트 색상 정보를 가진 BMP 이미지와 이를 각각 PNG, JPG, GIF 포맷으로 저장한 이미지입니다. [이 때 JPG 의 품질은 고품질로 설정] 용량의 차이를 보시죠.

BMP	984KB
PNG	596KB
JPG	93KB
GIF	133KB

BMP 와 비교하자면 PNG 이미지는 아무런 손실 없이 어느 정도 용량을 줄이긴 했지만, 다른 JPG 나 GIF 와 비교하면 여전히 꽤나 큰 용량을 가지는 것을 알 수 있습니다. 즉, 이러한 사진 종류의 이미지에선 PNG 포맷의 효율이 그다지 좋지 못하다는 것을 알 수 있습니다. 역시나 이러한 사진형 이미지에는 JPG 가 가장 좋은 효율을 보여주죠. 즉, 이러한 사진 종류의 이미지를 PNG 이미지로 저장하는 것은 용량의 감소보다는 손상 없이 원본 그대로 이미지를 저장하는 목적이 강하다고 할 수 있습니다.


하지만 아래의 이미지를 보시죠. 마찬가지로 618x393 해상도에 32비트 색상 정보를 가진 BMP 이미지와 이를 각각 PNG, JPG, GIF 포맷으로 저장한 이미지입니다. [이 때 JPG 의 품질은 고품질로 설정] 마찬가지로 용량 차이를 보시죠.

BMP	984KB
PNG	45KB
JPG	136KB
GIF	26KB

동일한 해상도이기 때문에 아무런 압축도 없는 순수한 원본이라고 할 수 있는 BMP 포맷의 이미지는 앞서의 이미지와 용량의 차이가 전혀 없는 것을 확인할 수 있습니다. 하지만 PNG 이미지의 용량은 놀랄 만큼 줄어든 것을 확인할 수 있습니다. 앞서의 이미지와는 전혀 다른 모습이죠. 실제로 이러한 형태의 이미지에 강한 GIF 포맷에 필적하는 압축률을 보여줍니다. [때론 GIF 보다 더 좋은 압축율을 보여줄 때도 있습니다.] 이러한 이미지에선 오히려 JPG 포맷이 다른 두 포맷에 비해 용량이 많이 나가는 것을 확인할 수 있습니다.

PNG 이미지는 바로 이러한 형태의 이미지에 최적화되어 있다고 볼 수 있습니다. 즉, 색상과 명암의 구성이 단순하고, 경계의 구분이 확실한 이미지에서 굉장히 높은 압축률을 보여주는 것이죠. 그래서 이러한 이미지에서 PNG 포맷을 사용하면 용량을 충분하게 줄일 수 있는 것은 물론, 아무런 손상 없이 가장 깨끗한 이미지를 얻을 수 있는 것입니다.

윈도우의 특정 창이나 프로그램 창을 캡쳐한 이미지가 바로 이러한 형태를 띄는 경우가 많죠. 그래서 이러한 이미지가 주를 이루는 캐플 블로그에서는 글에서 PNG 포맷의 이미지가 가장 많이 사용되고 있으며, 소프트웨어 정보를 주로 다루는 다른 IT 블로거분들도 같은 이유로 PNG 이미지를 즐겨 사용합니다.

추가로 BMP 포맷은 왜 웹에서는 잘 사용되지 않는지 아시겠죠? 용량이 살벌하거든요. ^^; 아무튼 PNG 포맷에 대한 이야기도 이정도면 될 듯 합니다.

정리

이미지 포맷에는 이번 글에서 이야기한 JPG, GIF, PNG 포맷과 잠시 언급된 BMP 포맷외에도 TIFF, TGA, PCX, XPM 등 장비나 운영체제에 따라 굉장히 다양한 이미지 포맷이 있으며, 여기에 더해 점이 아닌 직선과 곡선으로 이루어진 백터 이미지로까지 그 영역을 넓히면 굉장히 많은 종류의 이미지 포맷이 있습니다.

이번 글에서는 그 중에서도 웹을 기준으로 하여, 웹에서 가장 널리 사용되는 JPG, GIF, PNG 이미지 포맷의 간단한 압축 원리와 함께, 사용 용도나 저장된 이미지의 특성을 기준으로 정리를 해보았습니다. 이러한 주로 사용되는 세 가지 이미지 포맷의 특성만 잘 파악하고 있어도, 적재적소에서 꼭 어울리는 이미지 포맷을 선택할 수 있으리라 생각합니다.

참고로 여기에서 정리한 것은 EXIF(촬영 정보) 메타 데이터 등은 배제한 것으로, 순수하게 비트맵 데이터만을 기준으로 이야기한 것입니다. 이에 따라 이미지에 어떠한 손상도 가해지지 않았다는 것은 순수하게 이미지 자체만을 놓고 이야기한 겁니다. 디카를 통해 촬영한 사진에서는 이미지는 물론 EXIF 메타 데이터도 중요하지만, 오늘 이야기한 글의 내용과는 좀 다른 분야라고도 할 수 있기 때문에 이는 배제하였습니다. 글이 꼬일 가능성이 크기 때문이죠. ^^;


아무튼, 이번 글이 어떻게 도움이 되었을지 모르겠네요. 왜 이곳저곳 여러 커뮤니티를 수없이 거쳐 간 이미지들은 최종적으로 화질구지가 되는 것인지, 캡쳐 프로그램들은 왜 PNG 나 BMP 를 기본 저장 포맷으로 설정되어 있는지, BMP 파일을 커뮤니티에 올리면 사람들이 왜 경악하는 것인지 등에 대한 이해가 되었길 빕니다. 이번 글은 여기까지 입니다. ^^

http://ko.wikipedia.org/wiki/래스터_그래픽스
http://ko.wikipedia.org/wiki/BMP_파일_포맷
http://ko.wikipedia.org/wiki/PNG
http://ko.wikipedia.org/wiki/GIF
http://ko.wikipedia.org/wiki/JPEG