패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명"

이미지 포맷

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

폴백(fallbacks)이란?
브라우저별로 지원 사양이 다르기 때문에, 의도한 기능이 지원되지 않을 경우를 대비하여 이와 유사하게 동작하도록 만드는 방법

picture, source, img 요소

• 사용자 환경에 알맞는 최적의 이미지를 화면에 노출하기 위해 사용
• 사용 시, 이미지 전송 비용 및 사용자 데이터 요금을 절약하고 빠른 로딩 속도를 통해 UX 개선 가능

이미지 제공 로직

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

picture 요소 [type] 분기

• type은 조건절
• 웹브라우저는 picture 내 여러 이미지 포맷 중 하나의 이미지만 화면에 표시함

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

picture 요소 [media] 분기

• Media Query를 이용해서 사용자의 화면 해상도에 적합한 이미지 제공 가능

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

picture,img resolution 분기

• 사용자 해상도의 resolution(해상력)으로 분기
• 레티나 디스플레이를 분기할 수 있는 값을 작성 가능

레티나 디스플레이란?
고해상력을 가진 모니터 화면으로
일반적인 이미지보다 두 배 더 큰 이미지를 제공해서
강제로 작게 리사이징한 후 화면에 출력하기 때문에 더 선명한 화면을 제공함

<picture>
    // srcset에 이미지 경로 작성하고 한 칸 띄운 후 '2x'라고 적으면, 레티나 디스플레이에서만 해당 소스를 화면에 출력함
    // 레티나 디스플레이가 아닐 경우 소스의 1배수 이미지 'webp'를 화면에 출력함
    <source srcset="2x.webp 2x, 1x.webp" type="image/webp">
     // img 요소에도 srcset 속성 사용 가능
     // src에는 폴백 이미지 경로 작성
    <img srcset="2x.webp 2x" src="1x.jpg" alt>
</picture>

img 요소의 성능

<img 
	loading="lazy" // 로딩 지연
    decoding="async" // 디코딩 지연
    alt
>

이미지 지연 로딩 :
웹페이지를 화면에 출력할 때 보통 뷰포트 안에서 보이는 이미지만 먼저 출력하고 뷰포트 아래(화면 바깥) 이미지들은 로딩하지 않다가 브라우저 스크롤을 통해 화면을 위로 올리면 그때 아래 이미지들을 다운로드 하는 것

이미지 디코딩 지연 :
이미지 디코딩을 병렬로 처리해서 이미지 외 다른 콘텐츠가 웹페이지에 빠르게 표시되는 것을 도와줌

img debugging

• picture, source 요소는 화면에 출력되지 않고 img의 소소를 제공하는 역할
• 개발자도구에서 img 요소의 src 내 주소 영역에 마우스를 올리면, 화면에 출력되고 있는 이미지 정보가 toast 팝업으로 노출됨

  이미지 정보 확인 시 아래 용어 참고

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

Summary

• avif 포맷을 제공하고 webp, jpg를 대체 수단으로 제공하기
• picture, source, img 요소와 srcset, type, media 속성의 문법 숙지 및 활용하기
• 빠른 로딩 속도를 통해 UX를 개선하고 이미지 전송 비용(User/Service) 절약하기