이미지 최적화
picture 태그
1) type 분기
if( avif를 지원하면) {
avif 출력
} else if (wepb를 지원하면) {
webp 출력
} else {
jpg 출력
}
<picture>
<source srcset="x.avif" type="image/avif">
<source srcset="x.webp" type="image/webp">
<img src="x.jpg" alt>
</picture>
2) media 분기
width 960이하면 small.webp 출력
그 이상이면 large.webp 출력
<picture>
<source srcset="small.webp" media="(max-width:960px)">
<img src="large.webp" alt>
</picture>
3) 해상도 분기
2x는 레티나 디스플레이일때의 이미지
<picture>
<source srcset="2x.webp 2x, 1x.webp" type="image/webp">
<img srcset="2x.jpg 2x" src="1x.jpg" alt>
</picture>
img 태그
<img loading="lazy" decoding="async" alt>
1) loading="lazy"
이미지의 로딩 시점을 뒤로 미룸. 뷰포트 내에 있는 이미지만 로딩한다.
2) decoding="async"
이미지 디코딩을 비동기 처리해서 이미지 외의 다른 컨텐츠를 빠르게 표시한다.
<picture>
<source srcset="small.avif" type="image/avif" media="(max-width:960px)">
<source srcset="large.avif" type="image/avif">
<source srcset="small.webp" type="image/webp" media="(max-width:960px)">
<source srcset="large.webp" type="image/webp">
<source srcset="small.jpg" media="(max-width:960px)">
<img src="large.jpg" alt>
</picture>
참고자료: lazy loading의 모든것
https://helloinyong.tistory.com/297
Author And Source
이 문제에 관하여(이미지 최적화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jeajea0127/이미지-최적화저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)