이미지 마크업 최적화

Yudrey·2022년 3월 19일

html img picture source tag

견고한 UI 설계를 위한 마크업 가이드

목록 보기

6/18

패스트캠퍼스 강의를 정리한 내용입니다.
"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 : 현재 화면에 출력하는 소소의 원본 사이즈