png 파일 IE6 에서도 투명영역사용하자!!

Posted at 2007/08/09 07:41 // in 웹디자인™ // by 블루비
문제점 : 반투명효과는 사용할수 없게 됩니다.
(gif 이미지와 똑같아지는군요 ㅠ, 디자인전공이 아닌지라 그것까진 생각 못했넹..ㅋㅋ)

투명영역이 있는 png 파일을 IE6 브라우져에서 보면 투명영역이 회색으로 나타나게 됩니다.
이것은 이미지의 color 모드때문에 그런것인데 아래의 샘플을 잘 보세요..(IE6 브라우져에서 확인하세요)
이문제를 해결하기위해 파일 저장시 color mode indexed 로 변경 후 저장하면 해결 할 수 있습니다.

gif

gif 이미지 IE,FF 브라우져에서 투명영역처리가 잘 적용된다.

png

png(Color Mode Indexed) 이미지 IE,FF 브라우져에서 투명영역처리가 잘 적용된다.

png

png(Color Mode RGB) 이미지 IE6 브라우져에서 투명영역이 회색으로 보인다.


자. 그럼 IE6 브라우져에서도 png 파일의 투명영역이 적용되기 위해 png 파일 저장 방법을 알아보자.

1. 포토샵에서 png 파일 저장시 color mode 는 indexed color를 선택하고

사용자 삽입 이미지
2. Indexed Color 옵션창에서 Transparency 부분에 체크를 해야한다.
사용자 삽입 이미지

3. 이제 저장만 하면 IE6 에서도 PNG 파일의 투명영역을 사용할 수 있습니다.

덧.. 파일의 용량이 gif 보다는 커지므로 옵션을 적절히 설정하여 저장하세요

이 방법 외에도 IE style filter 효과를 주어 사용하는 경우도 있는데 그 방법은 브라우져의 리소스를 잡아먹어 비추(비추천)합니다.
2007/08/09 07:41 2007/08/09 07:41

http://blueb.net/blog/trackback/912

  1. 투명처리 가능하고 압축률 우수한 PNG 쓰세요.. from 녹차 프린스 2008/12/09 15:38 [삭제]
  1. 푸땡

    2007/08/08 14:04 [수정/삭제] [답글]

    맙소사~맥북이라 아직 테스트는 못해봤는데 핵을 사용안하고 png를 사용할 수 있는 방법을 찾아내시다니 훌륭합니다~~
    항상 좋은 정보 정말 감사합니다. 복받으실거에요 ^_________^

  2. 일모리

    2007/08/09 06:04 [수정/삭제] [답글]

    좋은 방법이군요 ^^ 헌데 빈공간 투명은 가능 하지만 그림자 부분 처리나 반투명등의 효과가 적용되지 않으므로 gif와 다를점은 없는것 아닌지요

    • 블루비

      2007/08/09 07:38 [수정/삭제]

      png 이미지 장점은 반투명 효과인데 indexed color를 사용하용함으로써 gif와 별반다를게 없어지다니 위의 팁은 쓸모없어지게 되는군요.. ㅎㅎ 일모리님의 칼같은 지적 감사합니다..
      그래서 좀더 알아봤는데 포토샵의 경우 png-8,png-24(bit) 로 저장이 가능한데 png-8(bit) 역시 컬러 지원의 한개가 있어서 그런지 반투명 효과가 안되더군요..... IE6에서는 IE용 필터를 사용하는 수 밖에 없을거같네요 ㅠ.ㅠ

댓글을 남겨주세요.

[로그인][오픈아이디란?]