이미지 스프라이트와 IR효과

이미지 스프라이트

• 이미지 스프라이트 기법이란 여러개의 이미지를 따로 두고 코딩하는게 아니라 하나의 png 파일에 모아서 코딩하는 방식입니다.
• 여러 이미지파일을 일일히 부르는것이 아니라, 한 이미지파일로 통합한 후 Background로 Position을 잡아주어 한 이 미지만 로드되게 함으로서 트래픽을 절약하고 HTTP 요청횟수를 줄여 빠른 웹 브라우징을 가능하게 해줍니다.
• 이미지 각각을 별도의 파일로 추가하는 대신, 이미지를 하나의 파일로 만들어서 포함하면 HTTP 요청 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적입니다.
• 이미지 수정이나 관리가 간편합니다.
• 웹 접근성을 준수하기 위해서 IR효과를 설정해야 합니다.

이미지 스프라이트의 예

IR 효과

• IR 기법은 이미지 대체 텍스트를 제공하기 위한 CSS 기법으로 다양한 CSS기법을 사용하여 이미지 대체 텍스트를 제공할 수 있습니다.

Phark Method

의미 있는 이미지의 대체 텍스트를 제공하는 경우 : 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 빼내어 보이지 않게 하는 방법

항목	장점	단점
스크린 리더가 읽어 줌	O
추가적인 태그 사용 안함	O
CSS on / image off시 텍스트 안보임		O

PWA IR

의미있는 이미지의 대체 텍스트로 이미지를 off시에도 대체 텍스트를 보여주고자 할 때 : 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index: -1;를 이용하여 화면에 안보이게 처리하는 방법

항목	장점	단점
스크린 리더가 읽어 줌	O
추가적인 태그 사용		O
CSS on / image off시 텍스트 보임	O
position 속성 사용 (성능 관련 이슈)		O