[프론트엔드 최적화] 동영상 사이즈 압축(최적화)

https://www.media.io/

Media.io - Online Free Video Editor, Converter, Compressor

 

▲ 워터마크 없이 동영상 압축해주는 무료 사이트

 

 

위 사이트를 이용하여 해상도를 30%로 줄였더니(사이트에서 제공하는 최저 화질)

용량이 52mb → 14mb로 극적으로 줄었다.

 

이미지에서 효율적인 확장자가 webp였던 것처럼, 동영상에서는 webm 확장자를 사용하면 좋다.

(마찬가지로 구글에서 개발한 포맷)

 

하지만 webm도 마찬가지로 표준이 아니라 비교적 최근에 만들어진 확장자이기 때문에,

이미지의 <picture> 태그와 마찬가지로 따로 처리를 해주어야 한다.

 

참고 사이트

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video

<video>: 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN

 

<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>

 

 

트릭

동영상의 화질과 용량을 줄인다면 사용자들이 이를 눈치채거나 불편함을 느낄 수 있다.

이럴 땐 동영상 위에 텍스쳐를 덮어씌움으로써 눈속임을 할 수 있다. (땡땡이처리, 블러처리 등)

물론 만들고자 하는 페이지에서 동영상이 메인 콘텐츠가 아닌 경우에만 권장하는 방식이다.