Digital Web magazine 에서 [ Creative Use of PNG Transparency in Web Design ] 이란 내용이 있어 요약합니다.
웹 디자인시에 이미지의 형식은 GIF, JPEG, PNG를 사용하고 있습니다.
색상표현은 약하지만 압축률이 좋고(이미지 용량이 작고) 투명 처리가 가능하기 때문에 GIF 형식을 많이 사용하고 있으며, 사진 형태는 색상표현이 높은 JPEG을 사용하고 있습니다.
그러나 PNG 형식은 우수함을 갖췄음에도 GIF, JPEG에 비하여 사용율이 떨어졌는데, 최근 IE7에서 PNG를 완벽하게 지원하고 PNG를 사용한 여러가지 흥미로운 방법이 소개되면서 주목받고 있다.
01. [이름] Portable Network Graphic (PNG)의 약자이며, "ping" 이라고 발음.
02. [무손실 압축] 압축시 Quality를 떨어뜨리지 않는 무손실 이미지 형식 (a losslessly compressed bitmap image format)
03. [무료사용] 특허가 있는 GIF 형식을 대체하기 위한 목적(무료사용)으로 개발 (GIF/LZW 특허는 현재 종료됨)
04. [표준] ISO (ISO IEC 15948:2003)과 W3C에 표준으로 등록
05. [GIF보다 강점]
01) 압축률이 높다.
02) 지원하는 컬러수가 많다. (GIF 256-color, PNG true-color(48 bits))
03) Alpha-Channel Transparency 지원 (GIF는 Binary Transparency만 지원)
* Alpha-Channel Transparency [자료]
부분적으로 투명(transparency) 처리를 하기 위해 background와 image를 결합하는 과정을 alpha composition이라 하고 색상정보를 갖는 RGB 채널외에 투명/반투명 처리를 위해 마련된 channel을 알파채널(alpha-channel)이라 함.
* Binary Transparency [자료]
어떤 픽셀(pixel)은 완전히 투명하고 또 어떤 픽셀은 완전히 불투명하게 나타나는 것을 말함.
부분적으로 투명(transparency) 처리를 하기 위해 background와 image를 결합하는 과정을 alpha composition이라 하고 색상정보를 갖는 RGB 채널외에 투명/반투명 처리를 위해 마련된 channel을 알파채널(alpha-channel)이라 함.
* Binary Transparency [자료]
어떤 픽셀(pixel)은 완전히 투명하고 또 어떤 픽셀은 완전히 불투명하게 나타나는 것을 말함.
06. [GIF보다 약점]
01) Animation을 지원하지 않음 (Multiple-image Network Graphics (MNG)에서 관련표준안이 있지만 브라우저에 반영이 아직 안됨)
* 10 Free to Download GIF Animators
* PNG보다 GIF가 사용빈도가 높은 이유
- Internet Explorer에서 투명한 PNG 처리를 지원하지 않는다는 오해가 있었음.
- Animation 지원 여부 (animation 기능은 Flash 등으로 옮아가 GIF-animation의 이득이 없게 됨)
- Internet Explorer에서 투명한 PNG 처리를 지원하지 않는다는 오해가 있었음.
- Animation 지원 여부 (animation 기능은 Flash 등으로 옮아가 GIF-animation의 이득이 없게 됨)
07. [JPEG 비교]
01) JPEG은 손실압축으로 사진이미지 형태를 editing 하기에 최적
02) 사진이미지는 JPEG이 효과적, 그 외 이미지 형태는 PNG가 효과적
08. [활용 예]
01) HTML 반투명 Overlay : 겹침이미지 형태로 자막등 용도로 활용
02) Watermark : 겹침이미지 형태로 워터마크를 표시
03) Mask : 겹침이미지로 Viewing 영역만 투명처리
04) Color-Changing Icon : 투명처리 아이콘 제작후 background-color를 변환시켜 작업
- APNG - the animated PNG
- Unit PNG Fix (IE6에서의 투명한 PNG 적용을 위한 js)
- IE PNG Fix
- Understand How Color Works in Photoshop
- png 파일 IE6에서도 투명영역사용하자!
- PNG8 - The Clear Winner
- Getting Creative With Transprency in Web Design
- Alpha Transparency in PNG-8 Images Without Using Fireworks
- Unit PNG Fix (IE6에서의 투명한 PNG 적용을 위한 js)
- IE PNG Fix
- Understand How Color Works in Photoshop
- png 파일 IE6에서도 투명영역사용하자!
- PNG8 - The Clear Winner
- Getting Creative With Transprency in Web Design
- Alpha Transparency in PNG-8 Images Without Using Fireworks
'웹표준' 카테고리의 다른 글
| CSS Techniques (Tips, Hacks) (0) | 2008/02/27 |
|---|---|
| 웹접근성 (Web Content Accessibility Guidelines) (0) | 2008/02/27 |
| 투명처리 가능하고 압축률 우수한 PNG 쓰세요.. (0) | 2008/02/26 |
| CSS 토픽 (Topics) (0) | 2008/02/25 |
| 브라우저 (Browser) (0) | 2008/02/25 |
| CSS 프린트 (0) | 2008/02/25 |
Prev
Rss Feed