패스트캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 정리 1탄 picture와 img 활용법

"picture, source, img 활용하기"

picture, source, img 활용하기

이미지 포맷 비교

이름	크기	종류	지원 브라우저
example.tif	8.4MB	TIFF 이미지(원본)	-
example.jpg	201KB	JPEG 이미지	-
example.webp	93KB	WebP 이미지	크롬 엣지 파폭 사파리 14~ 사파리 IOS 14.4~ 크롬(안드) 삼성인터넷
example.avif	45KB	문서	크롬 파폭 크롬(안드) 삼성인터넷

picture 태그 예제

<picture>
<source srcset="example.avif" type="image/avif" media="(max-width:960px)"> <!--avif 포맷(지원 브라우저 우선)-->
<!-- 가로값 <= 960 -->
<source srcset="example.webp" type="image/webp"> <!--webp 포맷(avif 후 지원 브라우저 우선)-->
<img src="example.jpg" alt=""> <!--위 포맷을 지원하지 않을경우 불러옴-->
</picture>

<picture>
<source srcset="example@2x.webp 2x, example@1x.webp" type="image/webp">
<img srcset="example@2x.jpg 2x" src="example@1x.jpg alt>
<!-- 이미지 2배수(레티나 디스플레이)와 1배수를 넣어줘서 분기 -->
</picture>

img 태그 로딩 지연과 디코딩 지연

img 태그의 로딩 지연은 자바스크립에서 사용했었다. 하지만 html에서 지원을 하면서 복잡하게 코딩을 하거나 무거운 플러그인을 사용하지 않아도 된다는 장점이 생겼다. 

img 태그 로딩 지연과 디코딩 지연

로딩 지연이란?

뷰 포트(화면) 안에 보이는 이미지를 우선 출력 후 아래쪽 보이지 않는 이미지는 출력하지 않고 사용자가 스크롤하면 다운로드를 시작하고 화면에 표시된다.(초기 로딩 속도에 좋음)

디코딩 지연이란?

이미지 디코딩을 병렬로 처리해서 이미지 외 다른 콘텐츠가 빠르게 표시되는걸 도와준다.

예제

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

Summary

1. avif 포맷을 제공 후 webp, jpg(png)를 대체 수단으로 제공
2. picture, source, img 요소와 srcset, type, media 속성의 문법 익히기
3. 빠른 로딩 속도를 통해 UX를 개성하고 이미지 전송 리소스 줄이기

요구사항

1. avif 포맷을 제공 후 webp, jpg(png)를 대체 수단으로 제공
2. 960픽셀 미만 해상도에서 small 이미지를 출력(media = "(max-width:960px)")
   961픽셀 이상 해상도에서 large 이미지를 출력
3. 자바스크립트를 사용하지 않고 picture를 활용해서 1번과 2번 구현