이미지 사이즈를 줄여보자. 웹 이미지 사이즈 최적화 🖼️

 

 

❗️ 이미지의 크기를 줄이고 용량을 낮추면 이미지를 좀 더 빠르게 로드할 수 있을텐데…

➡️ 큰 사이즈의 이미지를 더 낮은 용량의 이미지로 변환해보자!

 

 

 

 

🧐 JPG, PNG보다 WEBP, AVIF?!

 

❓WEBP

WEBP는 구글에서 개발한 이미지 포맷이다. 

WebP를 사용하면 JPG는 기존 대비 25~34%, PNG는 비손실의 경우 평균 26%(손실 방식의 경우 60~70%) 정도 기존 파일 대비 작아진다고 한다. 

 

❓AVIF

WEBP와 마찬가지로 GIF, JPG, PNG등의 전통적인 이미지 포맷을 대체하기 위해 출시되었고 뛰어난 압축 효율을 보이고 있다. WEBP보다 무려 9년이나 뒤에 나온 포맷이기 때문에 성능은 더 좋지만 범용성 측면에서는 문제가 있을 수 있다.

 

 

 

 

🧐 이미지를 변환해보자!

➡️ Squoosh 여기서 쉽게 다른 포맷의 이미지로 변환할 수 있다.

단, WEBP나 AVIF의 경우 지원하지 않는 브라우저가 있다. 이는 분기를 통해 지원할 경우 WEBP, AVIF로, 지원안할 경우 다른 포맷으로 적용되게 할 수 있다. 

 

<picture>
  {/* 브라우저가 avif를 지원하지 않으면 <source> 요소는 스킵된다. 지원할 경우 avif 형식 이미지 로드 */}
  <source srcset="photo.avif" type="image/avif" />
  {/* 브라우저가 webp를 지원하지 않으면 <source> 요소는 스킵된다. 지원할 경우 webp 형식 이미지 로드 */}
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.png" alt="photo">
</picture>

 

 

 

🧐 동영상의 경우도 유사한 방식으로 최적화가 가능하다!

➡️ 동영상 컨버터 사이트: medio.io 링크에서 동영상 압축 가능 (ex. mp4, webm)

단, WEBM의 경우 지원하지 않는 브라우저가 있다. 이는 분기를 통해 지원할 경우 WEBM, 지원안할 경우 MP4 적용되게 할 수 있다.

 

<video controls width="250">
  <source src="/media/cc0-videos/flower.webm" type="video/webm">
  <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos.
</video>

 

 

 

 

참고: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
참고: https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video
참고: https://kr.bandisoft.com/honeycam/webp/what-is-webp/