picture태그를 통한 이미지 최적화하기

picture태그란?

 

picture태그란 0개 이상의 <source> 태그와 다른 디스플레이/장치 시나리오에 대한 이미지의 대체 버전을 제공하기 위한 하나의 <img> 요소를 포함하는 태그입니다. mdn의 예시를 본다면 미디어 쿼리를 통해 화면별 다른 이미지를 보여주기 위해 picture태그를 사용하는것을 볼 수 있습니다.

 

우리는 pucture태그를 통해 화면의 width가 기준이 아닌, 다른 방법으로 최적화를 해보겠습니다. 

 

 

avif,webp, jpeg를 통해 이미지 최적화하기

그럼 avif는 무엇일까요?

avif는 av1(오픈 소스 코텍)의 이미지 파일 형식입니다. 압축을 하기 때문에 일반 이미지보다 몇배 작게 만들수 있고, HDR과 호환이 되는 코덱입니다.

avif의 브라우저 지원

 

 

webp란 무엇일까요?

웹에서 사용되는 기존의 이미지 형식의 포맷을 대체하기 위해 개발되었고, 같은 품질의 이미지를 만들 때 크기가 더 작아집니다. 또한 거의 모든 브라우저에서 지원을 합니다. 따라서 넷플릭스에서도 webp형태로 이미지를 불러오는것을 확인할 수 있습니다.

webp의 브라우저 지원

 

 

 

jpeg란 비트맵 방식의 이미지를 손실 압축하는 방식으로 만드는 이미지 확장자입니다.

 

avif또는 webp를 사용하는것이 가장 좋겠지만, 우리는 엣지케이스에 대응해야합니다. 따라서 picture태그의 취지에 맞게 img태그에는 jpeg 형식의 이미지를, source 태그에는 avif와 webp의 이미지를 넣음으로써, 브라우저에서 지원하는 이미지 형식에 맞게 최적화하여 이미지를 렌더링할 수 있습니다.

 

결과

picture태그를 활용한 결과 avif확장자를 가진 이미지를 가져오는것을 확인할 수 있었습니다. 또한 800밀리초대로 FCP를 당겨올 수 있었습니다. 정말 작은 노력으로 이미지의 크기를 대폭 줄일 수 있으니, 꼭 한번 해보는것이 좋다고 생각합니다.

 

출처

https://kr.bandisoft.com/honeycam/webp/what-is-webp/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture