Abstract:
PNG(Portable Network Graphics)는 GIF에 대한 Unisys/Compuserve의 Royalty부여를 계기로 만들어진 비손실압축을 이용한 Graphic Format이다.
현재 Web에 사용되고 있는 주요 Graphic Format은 GIF와 JPG로 대변되고 있으며, 이는 각각 비손실압축과 손실압축을 사용한 format이다.
PNG는 이중 GIF를 대신할 수 있다고 여겨지며, 그 특징은 GIF와 같은 8bit palette 지원, 16bit-per-channel truecolor지원, GIF에 비교하여 10~30%의 압축효율향상, gamma correction 지원, patent-free - 즉 관련된 특허가 없음을 주된 특징으로 한다.
이러한 특징으로 인해 PNG는 W3C Recommendation으로 채택되었으며, HTTP 1.1, CSS1 과 함께 Web의 성능향상을 위한 한가지 방안으로 이야기되고 있다.
여기서는 PNG의 이러한 특징과 함께 GIF, JPG와의 비교를 통해 PNG의 미래를 이야기한다.
Keywords:
PNG, GIF, JPG
1. 개요
PNG은 Portable Network Graphics의 준말로 "ping"으로 발음한다. PNG은 GIF format 의 후계자로 디자인된 그래픽 포맷으로 Internet Media Type은 image/png이다. 혹자는 PNG을 PNG's Not GIF.의 약자라고 말하기도 한다. 1995년 1월 Unisys와 CompuServe가 GIF format이 사용하는 LZW 압축기법에 대한 Unisys의 특허권을 이유로 GIF format을 사용하는 프로그램들에 대해 특허료를 지불해야 한다고 공표한 이후로, GIF를 대신할 새로운 format의 개발을 더욱 촉진하게 되었다. PNG은 이러한 개발의 결과이다. [PNG] 한편 1995년 1월이후 많은 Web Browser들은 GIF뿐만 아니라, JPG를 기본적으로 지원하는 방향으로 개발되게 되었고, 이에 따라 많은 Web Site들이 GIF뿐만 아니라, JPG를 사용하여 그들의 Site를 개발하게 되었다.
2. PNG의 특징
PNG의 특징은 다음으로 요약해 볼 수 있다.
모호하지 않은 발음
다중 CRC사용으로 미리 볼 필요 없이 파일의 무결성을 확인할 수 있음
파일이 깨졌는지 손쉽게 알 수 있는 magic signature사용
GIF보다 10% ~ 30 % 향상된 압축효율
특허와 상관없는 완전한 비손실 압축
2차원 인터레이싱 기법
1-, 2-, 4-, 8-bit 팔레트 지원
1-, 2-, 4-, 8-, 16-bit Greyscale 지원
8-, 16-bit-per-channel truecolor 지원
8-, 16-bit 모드에서의 완벽한 alpha blending
플랫폼에 무관한 밝기 조절을 위한 gamma correction
Y2K (2000년 문제) 지원
소스코드와 참고자료의 완전한 공개
....
PNG는 앞에서 말한 바와 같이 GIF를 대신하여 무료로 사용할 수 있는 그래픽 포맷을 만들기 위한 개발의 산물로 나온 것이기 때문에, 그 소스코드를 특허권과는 무관하게 사용할 수 있다는 장점 외에도 다른 그래픽 포맷들과 비교하여 우수한 점들을 가지고 있다. PNG의 특징을 몇 가지로 나누어 다른 포맷들과 비교하여 보면 다음과 같다. [PNG2]
Web에서의 사용
PNG는 GIF보다 다음의 세 가지 측면에서 장점을 지니고 있다. 먼저 alpha channel을 이용하여 variable transparency를 지원하며, gamma correction을 이용하여 플랫폼에 무관하게 이미지의 밝기를 조절할 수 있고, 2차원 인터레이싱 기법을 이용하여 점진 적인 이미지를 보여줄 수 있다. 또한 GIF보다 약 10% ~ 30%의 압축효율향상을 꾀할 수 있다. 다만, 최근에 유행하고 있는 Animation GIF - GIF의 multiple-image 지원을 이용한 - 와 같은 기능은 제공하고 있지 않다.
Web에서의 사용에 있어서 Animation을 지원하지 않는 점은 PNG의 약점으로 여겨지며, PNG의 장점은 single-image의 처리에 있어서 GIF보다 기능적으로 우수함에 있다고 할 수 있다.
이미지 에디팅
PNG는 이미지 에디팅에 있어서 몇 가지 장점을 지니고 있다. 먼저 완전한 비손실 압축 과 16-bit-per-channel truecolor(이것은 즉 48-bit truecolor를 의미한다.), 16-bit greyscale을 지원하기 때문에, 저장하고 불러오고 다시 저장하는 등의 과정을 거치며 표준 JPEG과는 달리 화질이 떨어지거나 하는 일이 생기지 않는다. 그리고 TIFF와 달리 지원하는 특징을 선택할 여지가 없기 때문에 서로 다른 어플리케이션에서도 완벽하게 데이터를 읽을 수 있다.
그러나 JPEG은 손실압축기법을 사용하기 때문에 고화질에서도 PNG와 같은 비손실압축을 사용하는 포맷들보다 파일크기가 훨씬 줄어드는 장점을 가지고 있다. 이러한 것은 압축기법의 차이에서 오는 것이기 때문에 PNG만의 문제는 아니다.
압축
PNG의 압축은 이미지정보를 전혀 잃지 않는다는 점과 특허료를 내지 않아도 된다는 점을 고려할때 가장 좋다고 할 수 있지만, PNG를 구현한 모든 것들이 이런 것은 아니다.
PNG는 truecolor, greyscale, palette("8bit")의 세 가지 이미지형태를 지원한다. truecolor pixel은 세개의 sample로 나타내진다. 먼저 red( zero = black, max = red) 가 나오고, 그 다음으로는 green ( zero = black, max = green), 다음으로는 blue ( zero = black, max = blue)가 나온다. bit depth는 각각의 sample의 size로 정해지게 된다. greyscale pixel은 zero = black, bit depth의 최대 값이 white로 정의된 grayscale level의 sample 하나로 나타내진다. palette pixel은 indexed-color pixel 이라고 하며, 제공된 palette의 index 값을 하나의 sample로 나타낸다. bit depth는 palette상의 색상들의 최대 값으로 지정된다.[PNGSPEC]
JPEG의 경우는 이중 앞의 두 가지만, GIF는 palette만 (greyscale은 gray palette를 사용한다.) 사용한다. PNG가 세 가지 이미지형태를 지원하기 때문에 PNG를 구현하는데 있어서 8bit palette를 사용한 이미지를 24bit truecolor로 저장하게 한다던가 하면 그 크기가 커질 것은 불을 보듯 뻔하다. 그리고 PNG 이미지를 저장하는데 있어서 너무 많은 palette 정보들을 포함하게 되는 경우에도 압축효율이 떨어지는 경우가 생기게 된다. 이런 경우는 조그마한 GIF 이미지들을 PNG로 변환하는 경우에 많이 볼 수 있다. 그밖에도 압축필터를 제대로 사용하지 못하는 경우나, low-level 압축엔진의 사용에 문제가 있는 경우에도 압축효율이 떨어지게 된다.
압축 필터
압축필터는 이미지데이터들을 변환하는 방법으로 압축효율을 더 높여주기 위해 사용 한다. 이미지의 각 수평라인마다 다섯 가지의 필터타입중의 하나를 지정하여 그것에 따라 압축을 하게 된다. 필터타입에는 다음의 다섯 가지가 있다. [FILTER]
Type Name
0 None
1 Sub
2 Up
3 Average
4 Paeth
압축을 하는 encoder에서는 데이터를 압축하는데 있어 scanline-by-scanline방식으로 압축을 하게 된다. 각각의 scanline은 filter type이 선행되어 읽혀져 그 scanline에 대해 어떤 filter 알고리즘을 적용할 것인지에 대해 지정한다.
Filter Type 0은 scanline을 변경하지 않게 한다.
Filter Type 1은 각각의 바이트와 먼저 픽셀에서의 연관된 바이트값의 차이를 전송한다. 수식으로는
Sub(x) = Raw(x) - Raw(x-bpp)
로 표현한다. 여기서 x는 0에서 scanline의 나타내는 바이트수 - 1 가지이다. Raw(x)는 scanline의 바이트 위치에서의 실 바이트 값을 나타낸다. bpp는 완전한 픽셀에 대한 바이트 수로 정의되며, 소수점이하는 올림 한다. 예를 들어 bit depth가 16이고 color type 2인 경우에는 sample이 3개이고, 각각의 sample이 2byte를 차지하므로 bpp는 6이 되며, bit depth가 2이고, color type 0인 경우는 올림 하여 bpp가 1이 된다. bit depth가 16이고 color type 4인 경우에는 two-byte grayscale sample과 two-byte alpha sample이 되므로 bpp는 4가 된다.
Color type은 IHDR Image header에 나타나게 되는데 이미지데이터의 번역방법을 알려준다. 값은 1, 2, 4의 합으로 나타내며 1은 palette가 사용됨을, 2는 color가 사용됨을, 4는 alpha channel이 사용됨을 의미한다. 현재 의미를 가지는 값은 0, 2, 3, 4, 6이다. Bit depth또한 IHDR Image header에 나타나며 Color Type과의 조합을 통해 사용된다. 현재 의미를 가지는 조합은 다음과 같다. [CHUNKS]
Color Allowed Interpretation
Type Bit Depths
0 1,2,4,8,16 Each pixel is a grayscale sample.
2 8,16 Each pixel is an R,G,B triple.
3 1,2,4,8 Each pixel is a palette index;
a PLTE chunk must appear.
4 8,16 Each pixel is a grayscale sample,
followed by an alpha sample.
6 8,16 Each pixel is an R,G,B triple,
followed by an alpha sample.
Filter Type 2는 현재 픽셀의 위에 있는 픽셀을 사용한다는 점을 제외하고는 Type 1과 같다. 수식으로는
Up(x) = Raw(x) - Prior(x)
로 표현된다. Prior(x)는 먼저 번의 scanline의 filter되지 않은 바이트값을 나타낸다.
Filter Type 3는 픽셀의 값을 예측하기 위해 왼쪽과 위쪽의 이웃하는 두 픽셀의 평균값을 사용한다. 수식으로는
Average(x) = Raw(x) - floor((Raw(x-bpp)+Prior(x))/2)
로 표현된다.
Filter Type 4는 왼쪽, 위쪽, 왼쪽의 위 픽셀을 이용한 간단한 선형함수를 계산하고, 이 것을 예측 값으로 사용하는 기법으로 Alan W. Paeth가 개발하였다. 수식으로는
Paeth(x) = Raw(x) - PaethPredictor(Raw(x-bpp), Prior(x), Prior(x-bpp))
로 표현된다. pseudo code로 PaethPredictor 함수는
function PaethPredictor (a, b, c)
begin
; a = left, b = above, c = upper left
p := a + b - c ; initial estimate
pa := abs(p - a) ; distances to a, b, c
pb := abs(p - b)
pc := abs(p - c)
; return nearest of a,b,c,
; breaking ties in order a,b,c.
if pa <= pb AND pa <= pc then return a
else if pb <= pc then return b
else return c
end
로 나타낼 수 있다. 이에 대한 자세한 것은 참고자료의 [PAETH]를 참고하시길.
Alpha Channel
Alpha Channel은 mask channel이라고도 하며, 이미지에 가변투명성(variable transparency)을 부여하는 한가지 방법이다. GIF의 경우는 이진투명성(binary transparency)이라 하여, 특정 pixel이 전체적으로 투명하거나 불투명할 수밖에 없지만(fully transparent or fully opaque), PNG의 경우는 254 level의 부분적으로 투명한 정도로 나눌 수 있다.
그리고, PNG의 세 가지 image type인 truecolor, greyscale, palette 모두 alpha 정보를 가질 수 있다. 그러나 보통은 truecolor 이미지에서 주로 쓰인다. PNG에서는 각각 의 pixel을 3바이트로(RGB) 저장하는 대신에 4바이트로(RGBA) 저장한다. 이와 같은 가변투명성은 어떤 배경과도 잘 어울리는 "특수 효과"를 만들 수 있게 해준다.
이런 특징은 픽셀들의 컬러를 부드럽게 변화시킴으로써 사각형의 픽셀들의 격자에 부드러운 곡선의 환각을 주는 anti-aliasing이라는 기법을 이용하여 어떤 배경과도 잘 어울리는 둥글고 구부러진 이미지를 만들 수 있게 한다.
이에 관한 좀더 자세한 설명은 Chris Lilley의 WWW4 논문에서 찾아볼 수 있다. [LILLEY] ?
그림 1. severly aliases image
그림 1은 PostScript파일에서 one sample per pixel로 변환한 이미지이다. 이 이미지는 심한 spatial aliasing을 보여준다.
그림 2. anti-aliased image to a white background color
그림 2는 같은 postScript파일에서 16 samples per pixel로 렌더링한 이미지이다. aliasing이 많이 줄어들었음을 알 수 있다. 글자와 컬러블록부분의 외곽부분을 보면 배경과 그림의 색상이 서로 섞여 있음을 알 수 있다.
그림 3. Halo effect caused by anti-aliased edges.
그림 3은 그림2와 같지만 배경색상이 다른 경우이다. 그림2는 백색의 배경과 anti-alias된 그림이기 때문에 그림 3은 halo-effect (halo는 햇무리, 달무리를 말한다.)가 발생한 것이다.
Gamma Correction
Gamma Correction은 컴퓨터와 모니터들이 색상 값을 해독하는데 있어서의 차이를 부정하는 기능을 말한다. Macintosh에서 만들어진 Image를 PC에서 보는 경우 너무 어둡게 보인다던가, 반대로 PC에서 만들어진 Image를 Macintosh에서 보는 경우 너무 밝게 보이거나 한다. Gamma Correction은 이런 문제점을 부분적으로나마 해결할 수 있게 한다.
Gamma Correction외에도 chromaticity 값을 이용하는 방법, color managemnet system 을 이용하는 방법 등이 있으나 일반적으로는 gamma correction으로도 만족할만한 결과를 얻을 수 있다.
Interlacing
PNG 이미지도 GIF와 마찬가지로 점진적인 표시가 가능하다. 이 기능은 이미지를 다운로드하면서 보는 경우에 "fade in"되는 듯한 효과를 준다. 보통 이 기능을 사용하게 되면 파일사이즈는 약간 증가하게 되나, 사용자에게 있어서는 훨씬 빠르게 보는 듯한 효과도 주게 된다.
interlaced method 0는 pixel들이 왼쪽에서 오른쪽으로 순차적으로 저장되고, scanline또한 위에서 아래로 순차적으로 저장된다. 즉 interlacing을 하지 않는다.
interlaced method 1은 그 개발자인 Adam M. Costello의 이름을 따 Adam7으로도 불리는데, 이미지를 지나는 7개의 다른 경로로 이루어진다. 각각의 경로는 이미지상의 pixel들의 부분집합을 전송한다. 각각의 pixel들이 전송되는 경로는 8x8 패턴이 전체 이미지 상에 맨 위의 왼쪽 끝부터 연속적으로 복사되는 방식으로 정의된다.
1 6 4 6 2 6 4 6
7 7 7 7 7 7 7 7
5 6 5 6 5 6 5 6
7 7 7 7 7 7 7 7
3 6 4 6 3 6 4 6
7 7 7 7 7 7 7 7
5 6 5 6 5 6 5 6
7 7 7 7 7 7 7 7
각각의 경로에서 선택된 pixel들이 scanline에서 왼쪽에서 오른쪽으로 전송되며, 선택된 scanline들은 위에서 아래로 순차적으로 전송되게 된다. 예를 들어 pass 2는 scanline 0, 8, 16의 4, 12, 20 pixel들을 포함하며, pass 7은 scanline 1, 3, 5 전부를 포함한다.
File Intergrity Check
PNG에서는 파일이 전송되면서 파일이 깨지는 경우에 대비하여 세 가지의 파일체크 방식을 도입하고 있다.
그 첫 번째는 magic signature로, PNG 이미지의 앞부분에 8 byte길이로 제공된다. 이것은 CR/LF와 LF를 포함하여 만들어지며, FTP사용시 binary file을 text mode (ftp에서는 ASCII mode)로 전송하는 경우 CR/LF가 LF로 변경되거나하는 등의 경우에 유용하게 사용될 수 있다.
두 번째는 32bit cyclic redundancy check(CRC-32)이다. PNG 이미지는 논리데이터조각 (logical data chunks)들로 나누어지는데, 이런 조각들은 그에 따른 CRC값들을 함께 가지고 있다. 따라서 이런 조각들에 저장된 데이터값중 한 비트라도 바뀌면 CRC값과 달라지기 때문에 데이터에 손상이 왔는지를 확인할 수 있다.
세 번째는 Adler-32 checksum으로 CRC값이 필터 되고 압축된 데이터에 적용되듯이, 이 것은 압축되지 않은 데이터에 적용된다.
3. PNG 관련 응용프로그램들
PNG관련 FTP 사이트로는 ftp://swrinde.nde.swri.edu/pub/png/와 그 미러사이트인 ftp://ftp.uu.net/graphics/png/src/를 들 수 있다. [CODE]
여기에서는 PNG reference library 와 zlib library(PNG에서 사용하는 compression library)와 각종 converter들, 그리고 PNG Tester program을 구할 수 있다. PNG 관련 library code외에 사용자 응용프로그램들로 PNG를 지원하는 것들에 관해 조금 알아보면 다음과 같다. 아래에는 필자가 주로 사용하거나 관심을 두는 것들만 예시하였다.[APPS]
Web Browser
W3C의 Amaya와 Arena는 PNG를 지원.
MS IE의 경우는 3.0버전에서는 지원하지 않고, 4.0 preview1에서도 아직은 지원되지 않고 있다.
Netscape Navigator의 경우에는 3.0버전에서는 지원하지 않고 다만 PNG를 지원하는 플러그인 들이 다수 발표되어있다. 새로이 발표된 4.0b3에서도 아직 지원되지 않고 있다.
Image Viewer
ACDSee32는 version 1.0b3이후부터 지원.
Ghostscript는 version 3.51 이후부터 지원.
XV는 version 3.10a이상에 PNG patch를 하면 됨.
Image Editor
CorelDRAW는 version 7.0이상에서 지원.
GIMP는 version 0.54이후부터 지원.
Paint Shop Pro는 version 3.01이후부터 지원.
Photoshop은 version 4.0이후부터 지원하며, 3.0에서는 플러그인을 추가하면 됨.
Visio는 version 4.1이후부터 지원.
XPaint는 version 2.3.1-png이후부터 지원.
다만 위에 예시한 응용프로그램들이 PNG Spec상의 모든 기능을 제공하는 것은 아니라는 점을 주의해야할 듯 하다.
그리고 한가지 생각해 봐야할 것은 Office97의 Component들인 Word, Excel, Powerpoint, OfficeArt, MS Photo Editor에서 PNG를 모두 지원하고 있다는 점이다. 실제로 삽입메뉴의 그림/그림파일에서 가능한 파일포맷을 보면 PNG를 지원하고 있다. Word의 Help에서 사용가능한 그래픽 포맷에서 PNG항목을 보면 다음과 같다.
Portable Network Graphics(PNG) 필터 Portable Network Graphics 필터(Png32.flt)는 Portable Network Graphics Tenth Specification(버전 1.0)에 따르는 파일을 지원합니다. .png 파일을 Word 문서에 Microsoft Clip Gallery 개체나 Photo Editor 개체로 삽입하려면, 이 필터가 설치되어 있어야 합니다. 그러나 .png 파일을 Word 문서에 직접 삽입하려면 Portable Network Graphics 필터가 필요하지 않습니다. GIF 파일을 Word로 가져오려면 이 필터가 설치되어 있어야 합니다.
4. 결론
위에서 살펴본 PNG의 많은 장점들에도 불구하고 현재 WWW에서 주로 사용되고 있는 그래픽 포맷은 GIF와 JPG이다. GIF의 경우에는 Interlacing과 animation때문에 아직도 주류를 이루고 있으며, JPG는 truecolor를 저장하는데 있어서 file size가 매우 작아 진다는 장점으로 인해 고화질이 요구되는 곳에서 많이 사용되고 있다.
PNG가 W3C Recommendation으로 채택되고, W3C의 Browser들이 PNG support를 기본적으로 지원하고 있고, Microsoft와 Netscape이 그들의 Browser에 PNG support를 약속하고 있기 때문에 PNG의 미래가 그렇게 어둡지만은 않다고 생각된다.
하지만, PNG가 기존의 그래픽 포맷들 사이에서 그 지지기반을 빠르게 확산할 수 있을지 에 대해서는 아직은 물음표를 찍을 수밖에 없을 것 같다.
References
[PNG]
PNG (Portable Network Graphics) Home Page
URL:http://www.wco.com/~png/
[W3C]
Portable Network Graphics
URL:http://www.w3.org/pub/WWW/Graphics/PNG/Overview.html
[PNG2]
PNG Features
URL:http://www.wco.com/~png/pngintro.html
[PNGSPEC]
PNG (Portable Network Graphics) Specification Version 1.0
URL:http://www.w3.org/pub/WWW/TR/REC-png.html
[FILTER]
PNG Specification: Filter Algorithms
URL:http://www.w3.org/pub/WWW/TR/PNG-Filters.html
[CHUNKS]
PNG Specification: Chunk Specifications
URL:http://www.w3.org/pub/WWW/TR/PNG-Chunks.html
[PAETH]
Paeth, A.W., "Image File Compression Made Easy", in Graphics Gems II, James Arvo, editor. Academic Press, San Diego, 1991. ISBN 0-12-064480-0.
[LILLEY]
WWW4: Not Just Decoration: Quality Graphics for the Web, Anti-aliasing and Transparency
URL:http://www.w3.org/pub/Conferences/WWW4/Papers/53/gq-trans.html
[CODE]
PNG Group Reference Code
URL:http://www.wco.com/~png/pngcode.html
[APPS]
PNG-supporting Applications
URL:http://www.wco.com/~png/pngapps.html
Posted by 홍반장
