개념

• 문서에 이미지를 넣는 빈 요소이다.

특징

• 닫는 태그가 없다.
• 반드시 src와 alt 속성을 함께 사용한다.

속성

• alt
  • 이미지를 설명하는 대체 텍스트, 이미지가 보이지 않거나 보조기기를 사용할 때 의미를 전달한다.
  • 순서 장식용은 alt=""로 비워 스크린 리더가 건너뛰게 한다.
• width/height
  • 실제 원본 비율과 어긋난 값 지정 금지
  • 이미지의 표시 크기를 지정해 브라우저가 로드 전에 비율과 레이아웃을 계산하도록 한다.
  • 초기 파싱 시 가로 세로 비율을 계산해 자리를 확보
  • 레이아웃 시프트를 줄인다.
  • 시각적 크기 제어는 주로 CSS에서 하고, HTML width/height는 레이아웃 힌트와 비율 제공 용도로 유지한다

실무

• 이미지의 크기는 CSS로 제어 권장 (보통 max-width:100%, height: auto;로 반응형 처리)
• loading="lazy"로 로딩 최적화
• 이미지를 링크로 만들려면 <a> 안에 <img>를 넣는다.
• 큰 이미지는 리사이즈하여 제공하고, WebP/AVIF와 같은 현대 포맷을 <picture>와 함께 고려

예시

<img src="/images/profile.jpg" alt="홍길동 프로필 사진">

<img
  src="/images/hero-800.jpg"
  alt="바다 위의 일출"
  width="800" height="450"
  loading="lazy"
  decoding="async"
/>

<picture>
  <source srcset="/images/banner.avif" type="image/avif">
  <source srcset="/images/banner.webp" type="image/webp">
  <img src="/images/banner.jpg" alt="여름 프로모션 배너" width="1200" height="400" loading="eager">
</picture>