이미지 처리하는 방법(확장자)
- 퍼블리셔/css
- 2011. 2. 21. 06:00
이미지를 처리하는 기법으로는 여러가지 방법이 있는데 하나 하나 짚어보겠습니다.
우선 저장할때 처리하는 방법을 먼지 짚어보겠습니다.
이미지는 용량문제로 .gif 파일을 주로 이용합니다.
이미지 파일을 크기를 떠나서 선명도가 좋기로는 아래와 같습니다.
.gif < .jpg < .png
하지만 선명도가 좋으면 좋을수록 용량이 커지는 단점이 있지요. 그래서 .gif 파일을 많이 이용합니다.
또 한가지 투명한 PNG 파일은 ie6 에서 배경이 회색으로 보인다는 단점이 있습니다.
이또한 해결하는 방법으로는 자바스크립트를 이용하곤 합니다.
마찬가지로 투명한 PNG 파일이 ie6 에서 배경이 회색으로 보이는것을 방지하기위해 자바스크립트를 포함하면 그만큼 무거워지는것은 당연한 일이지요.
참고링크
IE6 에서 투명배경을 위한 자바스크립트 - iepngfix , DD_belatedPNG
그래서 제작자가 PNG 파일을 피하는 이유도 있습니다.
즉 스킨제작자가 이미지 확장자에 대하여 고민하고 , 먼저 방향을 잡아야 합니다. 몇가지 방법이 있는데요. 어떤 방법이 있는지 우선 살펴보겠습니다.
- 가벼운것이 최고다. => gif 사용.
- 최고의 선명도가 좋다. ie6 때문에 png 파일을 포기할수 없다 => png 사용.
여기서 또 한가지 짚어봐야 할 점이 바로 png-8 입니다.
대부분 PNG 파일하면 PNG-24 를 뜻합니다.
하지만 PNG-8 은 그만큼 투명배경색을 지원하고 품질도 좋습니다. 또한 .gif 파일과 비교하여도 용량의 차이가 거의 없다는 점입니다.
그리고 PNG-8 16 COLOR, PNG-8 32 COLOR, PNG-8 64 COLOR, PNG-8 256 COLOR 에 따라 파일의 용량이 차이가 납니다.
이미지 확장자별 파일용량과 어디에 어떤 확장자의 이미지파일을 사용해야 할지 알려주는 좋은 글이 있어 소개합니다.
참고로 저의 경우 Cross Browsing(상호 호환성) 환경을 위해서는 배경에는 gif 파일을 사용하고 나머지 이미지(버튼, 로고, 기타....) 의 이미지는 PNG-24 가 좋은듯 합니다.
물론 PNG-24 는 투명배경을 지원하고 품질이 우수하지만 , IE 6 에서는 회색배경으로 보여지는 단점이 있습니다.
품질은 최고이지만 용량이 커서 로딩이 느려지는 단점이 있습니다.
이러한 단점이 있는데도 PNG-24를 사용하는데는 품질의 우수성과 단점을 해결하는 방법을 사용하는 겁니다.
- IE 6 회색배경 => 배경색을 입혀서 처리, 자바스크립트 사용안함
- 용량의 부담 => IR(Image Replacement) , Image Sprite 으로 해결
이미지 파일에 대한 확장자를 결정했으면 이미지를 어떻게 처리하는지는 기법에 대해서 이야기하고 실용적으로 처리하는 방법 즉 배경색을 입혀서 처리하는 방법에 대해서 이야기 해보겠습니다.