HTML 이미지 마크업 최적화

이미지 포맷

• .jpg/.png
  • 모든 브라우저에서 지원하는 폴백 이미지
• .webp (알파 채널, ie 미지원)
  • jpg/png 대비 30-70% 수준의 용량
• .avif (알파채널, 크롬/삼성인터넷 지원)
  • 저용량+고품질

이미지 제공 로직

if ('avif'를 지원하면) {
    'avif' 출력
} else if ('webp'를 지원하면) {
    'webp' 출력
} else {
    'jpg' 출력
}

<picture>
    <source srcset="x.avif" type="image/avif">
    <source srcset="x.webp" type="image/webp">
    <img src="x.jpg" alt>
</picture>

• type은 조건절이라고 생각한다. avif를 지원하면 해당 avif를 출력하라. 등등
• 세가지 이미지 포맷중에 단 하나의 이미지만 출력한다.
• type 뿐만 아니라 media 분기도 가능하다.

ex

<picture>
    <source srcset="small.webp" media="(max-width:960px)">
    <img src="large.webp" alt>
</picture>

• resolution 이미지로도 분기 가능하다. img에도 srcset 사용 가능하다.

  <picture>
      <source srcset="2x.webp _2x, 1x.webp" type="image/webp">
      <img srcset="2x.jpg _2x" src="1x.jpg" alt>
  </picture>

<img loading="lazy" decoding="async" alt>

• lazy: 로딩 지연 / async: 디코딩 지연

debugging

• currentSrc: 현재 화면에 출력하고 있는 소스
• intrinsic: 현재 화면에 출력하는 소스의 원본 사이즈

---

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님