이미지 삽입과 최적화
웹 페이지에 시각적인 사진이나 일러스트를 넣을 때 사용합니다. 이미지 태그 <img>는 자기 자신이 이미지 그 자체이므로, 텍스트를 감싸지 않아서 닫는 태그가 없는 대표적인 빈 태그(Empty Tag)입니다.
🖼️ 빈 액자와 사진, 그리고 점자 이름표
<img> 빈 액자
+ src 속성
➡️
🌅
alt="멋진 노을"
💡 초보자가 가장 많이 실수하는 alt 속성
alt 속성은 이미지가 엑스박스(오류)로 깨졌을 때 대신 보여줄 텍스트이기도 하지만,
시각 장애인들이 스크린 리더기로 웹을 탐색할 때 그림을 소리로 읽어주는 유일한 수단이기도 합니다.
또한, 구글 검색 엔진 봇(로봇)은 이미지를 볼 수 없으므로 alt 값을 보고 이 이미지가 무엇인지 파악합니다. 따라서 무조건, 반드시 작성해야 합니다!
| 태그명 | 주요 속성 | 설명 |
|---|---|---|
<img> | src | 화면에 표시할 이미지 파일의 주소(경로)를 지정합니다. |
alt | 이미지가 깨지거나 시각장애인용 스크린 리더가 읽어줄 대체 텍스트입니다. (필수) | |
<picture> | - | 화면 크기나 포맷 지원 여부에 따라 다른 이미지를 보여줄 수 있게 해주는 최신 반응형 태그입니다. |
<!-- 기본 이미지 삽입 -->
<img src="https://picsum.photos/id/237/400/300"
alt="잔디밭에서 뛰어노는 갈색 강아지"
width="400"
height="300"
loading="lazy">
<!-- 해상도에 따른 반응형 이미지 -->
<picture>
<source srcset="https://picsum.photos/id/10/400/200" media="(max-width: 768px)">
<img src="https://picsum.photos/id/10/800/400" alt="풍경 사진" style="max-width: 100%; height: auto;">
</picture>