투명배경 지원하는 그래픽 파일 포맷 : GIF와 PNG

배경 투명 지원하는 그래픽 파일 포맷

배경이나 이미지의 일부분을 투명하게 저장할 수 있는 그래픽 파일 포맷 중 많이 사용되는 두가지는 GIF와 PNG입니다. 각각 일부분 투명처리 외에 다른 기능을 포함하고 있어서 절대적으로 어떤 포맷이 더 좋다고 말씀드릴 수는 없는데, 투명처리만을 놓고 본다는 PNG방식을 추천합니다. 

 

---

GIF 파일포맷

• 이미지의 일부분을 투명하게 해주는 기능이 있습니다. GIF 파일 포맷에서의 투명은 GIF 파일 포맷이 처리할 수 있는 최대 256색 중 하나를 투명색에 할애하는 방식입니다. 아래 참고 이미지에서처럼 1번 이미지에서 배경을 투명하게 처리해주면, 2번, 3번 이미지에서 보여지는 것처럼 다양한 배경 위에 이미지를 올릴 수 있습니다. 

 

1번 이미지의 배경을 투명하게 처리, 2번 단색 배경위에 위치, 3번 패턴 배경위에 위치 시겼을 경우 예시

 

• 낮은 해상도의 이미지가 나타났다가 점차로 선명해지는 인터레이스 기능이 있습니다. 예전 인터넷 속도가 많이 느리던 시기에는 이미지가 완전히 다운로드 되고 나서야 이미지를 확인할 수 있다는 것은 큰 문제였습니다. 이에, 다운로드 된 만큼의 데이터를 가지고 이미지의 대략적인 형태를 가늠할 수 있게 해주는 기능으로 유용하게 사용되었습니다. 그러나, 요즘 인터넷 속도가 워낙 빠르다보니 인터레이스 기능 설정을 해도, 아래 예시처럼 변화하는 현상을 확인하기 어렵습니다. 아래 예시는 설명을 위하여 재현된 이미지입니다. 

 

인터레이스 기능 설명용으로 포토샵 필터를 활용하여 재현된 이미지임

 

• 색상 수를 줄여서 이미지 용량을 줄여줄 수 있습니다. 색상 수를 줄여서 이미지 용량을 조절한다는 것은 잘 생각해보면, 어떤 이미지가 적합한지 알 수 있습니다. 하늘을 생각해볼 경우, 흐린 파랑부터 짙은 파랑까지 다양한 파랑 계열의 색이 포함된 사진의 경우 색의 수를 제한한다면, 아래 예시처럼 색과 색 사이에 구분선이 생겨 보이게 됩니다. 반면 아이들의 일러스트 그림색에 나오는 하늘을 생각해보면 단색으로 처리된 경우를 많이 볼 수 있었습니다. 이러첨, GIF 파일포맷은 사진보다는 일러스트, 캐릭터, 로고 등 색상 수가 적은 이미지 용량을 줄이는 데 유용합니다. 최대 256색까지 저장이 가능합니다. 

 

 

 

• 여러 개의 그림을 순차적으로 나타낼 수 있는 애니메이션 기능이 있습니다. 아래의 3개의 사진을 연속해서 보여주는 한개의 파일로 만들 수 있습니다. 

 

3개의 이미지

1개의 GIF파일로 합쳐진 상태

 

GIF 이미지의 단점으로 256색까지가 지원할 수 있는 최대 수입니다. 그렇기 때문에, 이미지에 사용되는 색상 수가 적은 캐릭터, 일러스트에서는 적합하나, 색상표현수가 많은 사진에서는 망점처럼 보이거나, 다양한 색 변화 표현이 어렵습니다. 

아래 그림의 예시를 보면, 포토샵에서 GIF로 저장하는 [웹용으로 저장] 메뉴로 비교한 것입니다. 화면의 왼쪽은 원본, 오른쪽은 GIF 설정에 따라 어떻게 보이는지 미리 확인하는 창입니다. GIF의 색상수를 최대치인 256색으로 했을때의 용량, 그리고 색상수를 8로 설정했을때의 이미지 와 용량을 비교해 보시기 바랍니다. 

 

 

GIF 파일 포맷에서 아쉬웠던 색상수, 그리고 투명배경 지정이 1가지 색만 가능하다는 점을 보완한 파일포맷이 PNG입니다. 그럼에도 불구하고, PNG 포맷에는 애니메이션 기능이 빠져있기 때문에, 아직도 웹용으로 GIF 파일은 널리 사용되고 있습니다. 

---

PNG 파일포맷

• PNG는 Portable Network Graphics의 약어로 W3C(World Wide Web Consortium)에서 제정한 파일 포맷입니다. 
• 256색을 지원하는 GIF와 달리 트루컬러 또는 8비트의 인덱스칼라, 그레이스케일 저장이 가능합니다. 
• GIF의 단색 투명층과 달리 8비트 알파 채널을 이용한 부드러운 투명층을 지원하여  무엇보다도 단계적으로 투명하게 저장하는 것이 가능합니다.
•  PNG 포맷에서는 아래 사진에서와 같이 그라데이션과 같은 투명이 적용되나, GIF 옵션1의 경우 망점처럼 처리되거나, GIF 옵션2와 같이 지정색 투명이 되는 것을 참고하시기 바랍니다.  

 

 

 

[추가] 투명이미지를 직접 만들어보시려면 살펴보세요.    https://lucia.tistory.com/68

[포토샵] 투명이미지 만들어보기 : 사진&일러스트 PNG편