[성능최적화] 차세대 이미지 적용하기 (webp)

아래와 같이 적용하면 된다.

그러면, source 부분을 먼저 불러오고, 불러오지 못하는 환경(구형 브라우저나 webp를 미지원하는 경우)일 때는 img 태그를 불러오게 된다고 한다.

<picture>
	<source srcSet={item.imageWEBP} type="image/webp" />
	<img className={styles.image} src={item.imageJPG} alt={item.title} />
</picture>

 

확실히 성능최적화는...이미지가 가장 크게 효과보는 것 같은 기분이다. 

디자이너가 제대로 있어서 webp도 주고, jpg도 압축해서 전달해주면 참 조으련만......팀에 부재해있다.

그래서 이미지를 전달해 주시는 담당자에게, 아래 사이트에서 줄이고 전달해달라고 요청해두었다.

• jpg -> webp 변환사이트 : https://convertio.co/kr/jpg-webp/
• jpg 용량 줄이는 사이트 : https://www.iloveimg.com/ko/compress-image

 

결과

점수를 10점 올렸다. 신난다. 이미지만 줄이면 90점 정도는 만들 수 있지 않을까 싶다.

 

pagespeed.web.dev 에서 성능 측정 결과 10점 오름