PNG그래픽파일 이란?

PNG파일은 비손실 압축 알고리즘을 적용한 그래픽 파일 포맷의 하나이다. 과거 유니시스라는 회사가 GIF를 만들었는데 이 LZW 압축 알고리즘에 대하여 소프트웨어 특허를 내 그에 대항하기 위해 만들어졌다. PNG는 국제 표준(ISO/IEC 15948:2003)과 W3C 표준으로 2003년 11월 10일 발표되었다. 이 버전은 1.2판과 약간의 차이만이 있다. PNG는 GIF보다 훨씬 압축률이 높으며, 단색 투명층(8이 지원)이 아닌 8비트 알파 채널을 이용한 투명층을 지원한다. 그러나 에니메이션 GIF는 지원하지 않는다. PNG파일이 크다고 알려져있는 잘못된 사례, PNG파일은 오히려 GIF보다 높은 압축률, JPEG보다 화질이 좋다.

 

 

 

PNG의 비교 분석 실험

gif도 투명이 되는데? png24의 투명과 gif,png8의 투명의 차이점이 궁금 하신분은 아래의 msdn 자료를 참조하면 금방 알 수 있다.
http://samples.msdn.microsoft.com/workshop/samples/author/filter/AlphaImageLoader.htm

 

 

PNG8과 GIF256의 불투명한 그래픽 파일

하얀색의 배경에 Rasterize하였다.

png8이 더욱 용량이 적음을 알 수 있다.

 

Png8

ibutton_rasterize.png

1.69KB / 4.00KB

 

Gif256

ibutton_rasterize.gif

2.49KB / 4.00KB

 

 

단색 투명층을 알파 채널(알파8비트 알파 채널 비적용) 그래픽 파일

알파가 256레벨이 적용되지 않는 투명한 png8포맷과 gif256을 비교하였다.

버튼의 드롭샤도우 경계를 보면 흰색이 매트됨이 알수있다.

Png8

ibutton_transparents.png

1.95KB / 4.00KB

 

Gif256

ibutton_transparents.gif

2.48KB/4.00KB

 

 

투명한(알파8비트 알파 채널 적용됨) png와 불투명한 그래픽파일

투명한 쪽이 용량이 더 높음을 알수있다.

 

ibutton_transparents24.png

1.51KB / 4.00KB

ibutton_rasterize24.png

1.36KB / 4.00KB

 

 

64 디더와 128디더

낮을수록 화질과 용량이 낮다.

 

ibutton_rasterize_compact64.gif

1.46KB / 4.00KB

 

ibutton_rasterize_compact128.gif

1.92KB/4.00KB

 

 

 

 

 

 

 

 

 

PNG24와 JPG의 비교 분석

역시 압축률은 JPEG이 최고다.

jpg 80
24.7kb / 25.9kb / 28.0kb

역시 용량면에서는 jpg80옵션을 따라올수가 없다. 정확하게 말하면 jpeg이지만...
""
jpg100
24.7kb / 36kb / 40.0KB
""
jpg 모든 옵션을 주고 100으로 했을경우
28.6kb / 41.3kb / 44.0kb
""
png24 투명도를 주지 않았을 경우
93.7kb / 97.7kb / 100kb

쓸게 못되는 png24의 큰용량..
""
png24 matt를 사용한경우
93.9kb / 97.6kb / 100kb
matt는 save for web 옵션시 배경색을 특정색으로 채울수 있는 기능을 말한다.
""
png24 투명도 옵션을 주었을 경우
108kb / 111kb / 112kb

용량은 크지만 미려한 투명도를 줄수 있어 좋다. 단, ie6브라우저에서 버그가 있다, 해결책은 아래를 참고하길 바란다.
""


위의 표가 못믿겠다.. 하시는 분은 이미지파일들을 psd포함하여 업로드 하겠으니 직접 save for web 해보시라.