> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/html/image-and-figure-and-caption/ir-sprates.md).
# IR 기법 / Sprites 기법
## HTML 이미지 요소를 사용하기
### 방법
HTML의 `` 요소를 사용해서 이미지를 삽입하는 방법이다.
### 대체 텍스트
`` 요소에는 `alt` 라는 대체 텍스트를 넣어 줄 수 있는 속성이 있다. 이를 사용해서 스크린 리더 사용자에게 이미지에 대한 정보를 제공해 줄 수 있다.
```markup
```
## IR 기법
[IR 기법](https://nuli.navercorp.com/community/article/1132804?email=true)이란? \
Image Replacement의 약자로 **"이미지 대체"** 기법이다. 브라우저에 이미지를 넣을 때 HTML의 ``가 아닌 CSS의 배경이미지로 이미지를 대체하는 경우가 있다. 하지만 CSS 배경이미지는 대체 텍스트 기능이 없다. 이때, 스크린 리더 사용자를 위해서 대체 텍스트를 제공하는 방법을 IR 기법이라고 한다.
### 방법 & 데체 텍스트
IR 기법에는 한 가지 방법만 있는 것은 아니다. `overflow: hidden`, `z-index`, `aria-label` 등 여러가지 사용 방법이 있다.
#### overflow: hidden을 사용하기
`overflow: hidden`과 CSS의 여러 속성들을 사용하여 대체 텍스트를 감춘다.
{% embed url="" %}
```markup
```
#### z-index 활용하기
`position`의 `z-index`의 음수값을 활용하여 이미지 뒤로 대체 텍스트를 감춘다.
{% embed url="" %}
```markup
```
#### aria-label 활용하기
`aria-label` 속성을 활용하여 대체 텍스트를 제공한다. 단, 우리나라에서 사용 되는 [센스리더](https://www.xvtech.com/)(스크린리더기)에서는 [aria-label을 읽지 못하는 경우](https://nuli.navercorp.com/community/article/1132645)(*링크의 aria-label의 참고부분 참조*)가 종종 있기 때문에 확인하고 사용하는 것은 권장한다.
{% embed url="" %}
```markup
```
## Sprates 기법
[sprates 기법](https://css-tricks.com/css-sprites/)은 여러 개의 이미지가 들어있는 한 장의 `png` 이미지를 CSS 배경이미지로 설정한 다음 배경이미지의 위치를 움직이면서 필요한 이미지를 브라우저에 보이도록 하는 기법이다.
{% embed url="" %}
### 이미지의 위치를 계산해주는 도구
sprates 기법을 사용했을 때, 이미지의 위치를 매 계산 하기엔 너무 번거로운 일이다. 이 때, [Sprate Cow](http://www.spritecow.com/) 도구를 사용하면 쉽게 계산해 준다.
### 게임에서 사용되는 sprate 기법
게임에서 캐릭터의 움직임을 표현할 때, sprates 기법을 사용한다. 한 동작을 여러 개의 이미지로 표현한다면 브라우저가 서버에 이미지를 요청하는 시간 때문에 캐릭터의 움직임이 자연스럽지 않을 것이다. 그래서 이전부터 게임에서는 sprates 기법을 사용했다.
### spate 기법의 장점
* 한 장의 이미지를 여러 곳에 재사용 할 수 있다는 장점이 있다.
* 한 장의 이미지를 사용하기 때문에 웹 사이트에서 서버에 요청하는 횟수가 줄어들어서 브라우저의 속도가 빨라진다. (이미지의 개수가 많을 수록 브라우저의 속도는 느려진다.)