1) IE 7에서는 바뀐다지만, 현재까지는 PNG 24의 알파채널을 IE에서는 제대로 못써왔다. PNG의 알파채널이 먹지않기 때문에, CSS를 이용한 디자인에서 레이어간의 부드러운 이미지 중첩이 어려웠었다.

2) IE에서는 이 문제의 해결을 위해서는 필터를 사용해야 하나, 이럴 경우 접근성의 문제가 있다.

3) 어차피 이미지는 접근성 면에서 그다지 좋다고 할 수는 없다.

세가지 문제를 해결한 IR기법에 대한 소개.

demo : http://eouia0.cafe24.com/temp/ajax_or_dhtml/accessibility/ir.html

위 데모는, FF로 볼 경우에는 정상적으로 보이지만, IE에서는 두번째 이미지가 알파채널이 제대로 적용이 안되어 이상하게 보일 것이다.
첫번째 이미지가 새로운 IR 기법이 적용된 예이다.

자세한 내용은 소스를 보시고…

이번에는 javascript, image, CSS를 disable시키고 같은 페이지를 확인해보면, 첫번째 이미지 자리에 “PNG”라는 문자열이 나옴을 알 수 있다.
image를 disable시킨 경우에는 alt텍스트로 대체되었고,
javascript를 disable시킨 경우에는 IR되기 전의 원본 텍스트가 표시된다.
웹브라우저 외에 다른 디바이스나 프로그램에서 읽어들여도 내용이 통하게 되는 방법이다.

덤으로 바로 앞글에서 소개한 pageOnload 객체를 이용한 javascript binding기법의 샘플도 겸한다.

추가(20061018)
백그라운드로 PNG를 사용할 때에 적용되게 함.(샘플에서 3번째 “PNG”이미지)