[프론트엔드 최적화] 동영상 사이즈 압축(최적화)
Media.io - Online Free Video Editor, Converter, Compressor
Use Media.io free online tools to edit, convert, or compress video/audio/image files in 3 easy steps. Its video editor comes with handy features you need to create a compelling video. Give it a try today!
www.media.io
▲ 워터마크 없이 동영상 압축해주는 무료 사이트
위 사이트를 이용하여 해상도를 30%로 줄였더니(사이트에서 제공하는 최저 화질)
용량이 52mb → 14mb로 극적으로 줄었다.
이미지에서 효율적인 확장자가 webp였던 것처럼, 동영상에서는 webm 확장자를 사용하면 좋다.
(마찬가지로 구글에서 개발한 포맷)
하지만 webm도 마찬가지로 표준이 아니라 비교적 최근에 만들어진 확장자이기 때문에,
이미지의 <picture> 태그와 마찬가지로 따로 처리를 해주어야 한다.
참고 사이트
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video
<video>: 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN
HTML <video> 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.
developer.mozilla.org
<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>
트릭
동영상의 화질과 용량을 줄인다면 사용자들이 이를 눈치채거나 불편함을 느낄 수 있다.
이럴 땐 동영상 위에 텍스쳐를 덮어씌움으로써 눈속임을 할 수 있다. (땡땡이처리, 블러처리 등)
물론 만들고자 하는 페이지에서 동영상이 메인 콘텐츠가 아닌 경우에만 권장하는 방식이다.
'한 걸음 > 프론트엔드 최적화' 카테고리의 다른 글
| [프론트엔드 최적화] 캐시 최적화 (0) | 2022.07.18 |
|---|---|
| [프론트엔드 최적화] 폰트 최적화 -2 (폰트 사이즈 줄이기) (0) | 2022.04.06 |
| [프론트엔드 최적화] 폰트 최적화 -1 (Font-face, Fontface observer) (0) | 2022.04.06 |
| [프론트엔드 최적화] 손쉽게 이미지 용량 줄이기 (0) | 2022.04.05 |
| [프론트엔드 최적화] 크롬 개발자 도구 설정, 이미지 Lazy loading (0) | 2022.04.05 |
