> 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.md).

# 이미지 & 피규어 & 캡션

## 이미지 & 피규어 & 캡션 <a href="#html" id="html"></a>

HTML 문서에 연결되어 화면에 표시되는 이미지 요소와 도표, 차트, 표, 이미지 등을 캡션과 함께 묶어주는 피규어 요소로 묶어줄 수 있다.

* 웹 문서에 주로 사용 되는 이미지 포멧
  * 비트맵 그래픽 파일 : JPG, GIF, PNG 포멧 사용
  * 벡터 그래픽 파일 : SVG 포멧 사용

![JPG, GIF, PNG, SVG](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MPx_nt4lOr1lpni_pP8%2F-MPxa_TL51_ix9jP3q8w%2Fimage.png?alt=media\&token=76e6114e-f436-4dbd-a30d-cc2a5adbf538)

| 구분  | 설명                                                                                                                                                                                                                                             |
| --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| JPG | JPG 이미지는 압축률이 높고, 다양한 색상을 처리하도록 설계되었다. 사진 또는 복잡한 그래픽 이미지에 많이 사용 되는 포멧이다. 하지만 GIF, PNG와 달리 **투명한 픽셀을 허용하지 않는다.**                                                                                                                                |
| PNG | PNG는 **JPG와 달리 배경을 투명하게 처리할 수 있다.** 하지만 사진의 경우 동일한 품질의 JPG 파일 보다 크기가 크다. 최근에 애니메이션([APNG](https://ko.wikipedia.org/wiki/APNG))도 사용이 가능하다.(단, [브라우저 호환성](https://caniuse.com/apng) 확인을 해야 한다.)                                                  |
| GIF | GIF는 표현 가능한 색상이 256색으로 제한되어 있기에 **고품질의 사진에는 적합하지 않다.** 하지만 **애니메이션을 적용할 수 있는 포멧**으로 단순한 그래픽의 애니메이션에 사용하면 좋다. 투명하게 처리가 가능하긴 하지만, PNG 포멧 보다 표현력이 떨어진다.                                                                                           |
| SVG | <p>SVG는 <strong>벡터 기반</strong> 그래픽 포멧으로 <strong>품질 손실없이 확대, 축소</strong> 할 수 있다. 오늘날 처럼 다양한 스크린에 대응하는 반응형 웹 디자인에 매우 적합하다. 왼쪽 이미지인 SVG와 달리 오른쪽 이미지인 비트맵 이미지는 크기를 키울 경우 뿌옇게 표시된다. (픽셀로 구성된 그래픽 이기 때문이다.)</p><p>페이지의 로고, 아이콘, 인포그래피에 자주 사용한다. </p> |

![SVG (왼쪽), 비트맵 이미지(오른쪽)](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MPxskdPLMVFNfXvAF-c%2F-MPxt2qLwM8luuHc7lAv%2Fimage.png?alt=media\&token=d866da0f-1334-4bc8-ab4f-b11657019273)

### 이미지 (images)

```markup
<img src="소스데이터" alt="대체텍스트" />
```

* src → source / alt → alternate test
* **`alt` 속성을 잘 설정해두면**, **시각 장애인이 아니더라도 도움을 받을 수 있다**. 이미지 링크가 깨질 경우, 화면에 `alt` 속성 값이 출력 되어 어떤 이미지인지 정보를 제공할 수 있다.
* `display: inline` 요소이다.

#### **HTML 문서는 이미지를 포함시키지 않는다**

* 한글이나 워드는 문서에 이미지를 포함 시키지만 HTML 문서는 이미지를 포함시키지 않는다.
* **이미지를 연결**해서 사용한다.
* HTML 파일에 이미지가 포함이 된다면 파일의 용량이 커지기 때문에 속도가 느려진다.

#### **CSS에 이미지를 연결한 경우 (의미있는 이미지)**

* `aria-label`을 사용해서 이미지에 대한 설명을 작성해주는 것이 좋다.
* 스크린리더 사용자에게 해당 이미지에 대한 설명을 해주는 것이 좋다.&#x20;
* [IR 기법](https://nuli.navercorp.com/community/article/1132804?email=true)은 CSS 배경이미지에 대체 텍스트를 사용해서 사용자에게 대체 설명을 해주는 기법이다.&#x20;
  * 하나의 이미지를 여러 곳에 재사용 할 수 있다는 장점이 있다.&#x20;
* sprites 기법&#x20;

```markup
<button
  type="button"
  class="button is-open-menu"
  aria-label="메뉴 열기"
  title="메뉴 열기"
>
  <span class="ir"></span>
</button>
```

```css
.is-open-menu .ir {
  background-image: url(../images/navigation-button.gif);
}
```

### 피규어(Figure)

* `<figure>`
  * 도표, 차트, 이미지, 표를 감쌀 때 사용 되는 요소
  * **피규어 요소 안에 피그캡션 요소**를 넣어 줄 수 있다.

### 캡션 (Caption)

* `<figcaption>`
  * 캡션은 이미지와 묶여서 하나의 덩어리가 되어야 한다.
  * 피규어(Figure)요소를 사용해서 이미지와 캡션 요소를 하나도 감쌀 수 있다.

```markup
<figure>
  <img src="" alt="" />
  <figcaption></figcaption>
</figure>
```

## 이미지 치수(dimension)

이미지가 로딩 되는 동안 브라우저는 이미지/비디오의 공간을 미리 할당한다. 그렇기 때문에 `<img>` 요소를 사용할 때는 너비/ 높이를 입력해준다. (웹성능 검사(Lighthouse) 시 문제가 될 수 있는 부분이다.)&#x20;

단축키: `ctrl` + `shift` + `i` (MAC 기준)

```markup
<img src="./images.jpg" width="75" height="90" />
```