성능 최적화하기 - (8) 이미지, 동영상 최적화

◽ 이미지 포맷 종류

PNG: 무손실 압축

JPG: 압축을 좀 더 하면서 화질이 저하됨

WEBP: jpg 보다 화질과 용량면에서 월등히 좋은 포맷

 

 

◽ 이미지 최적화하기

구글이 Webp를 밀기위해 만든 사이트

Squoosh

용량을 이렇게 줄일 수 있다.

 

 

◽ webp를 지원하지 않는 브라우저의 경우

<picture>
  <!-- 브라우저가 해당 포맷을 지원되지 않으면 순서대로 실행하여 로드한다. -->
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="photo">
</picture>

 

 

◽ 동영상 최적화하기

포맷을 webm으로 변경하고 용량을 줄인다.

지원하지 않는 브라우저를 고려하여 아래와 같이 사용한다.

<video 
  autoPlay 
  loop 
  muted
>
  <source src={video_webm} type="video/webm" />
  <source src={video} type="video/mp4" />
</video>

 

 

---

 

 

출처

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1 - 인프런 | 강의