구글에서 만들고 많이 사용되고 최근 많은 사이트에서 최적화의 방안으로 많이 사용되는 WebP에 대해서 정리를 하였다.
구글은 이전에 Media 포맷도 만들었다는 사실을 알게되었다. WebP에 대해서 알아보기 전에 동영상 포맷 1개, 이미지 포맷 1개를 알아보자.
동영상과 이미지 포맷을 알아보기 전에 알아야하는 선행 지식에 대해서 간단히 알아보자.
우리가 아는 동영상은 영상과 소리의 정보를 가진 파일을 가리킨다.
동영상 파일을 말할 때는 컨테이너 포맷, 비디오 코덱, 오디오 코덱에 대한 정보를 모두 이야기해야한다. 파일 확장자만 이야기하면 안된다.
위의 그림은 mkv파일을 그림으로 그린 것이다.
컨테이너 포맷은 비디오와 오디오를 담아주는 상자라고 생각하면 된다. 그림에서는 비디오는 x264코덱으로 만들어졌고, 오디오는 DTS코덱으로 만들어졌다. 이처럼 컨테이너는 비디오와 오디오를 하나의 파일로 만드는 역할을 하는 것이다.
우리가 흔히 보는 것은 확장자를 보는 것이다. 하지만 동영상을 판단할 때 확장자를 보아서는 단지 컨테이너 상자가 무엇인지 알 수 있을 뿐이지, 상자안에 있는 비디오와 오디오가 어떤 코덱으로 만들어졌는지는 모르는 것이다.
avi, mkv, asf, mp4, mov등은 모두 컨테이너 포맷을 가리키는 파일 형식인 것이다. 컨테이너를 포함한 비디오와 오디오를 만드는 과정을 인코딩이라고하며, 코덱이 담당한다. 비디오와 오디오를 재생하는 과정을 디코딩이라고 하며, 이 역시 코덱이 담당한다.
만약 동영상이 재생되지 않는다면, 컨테이너 포맷을 확인하는 것도 중요하지만, 비디오 코덱과 오디오 코덱을 확인하는 것이 더 중요하다.
우리가 보는 파일에서 컨테이너 포맷은 바로 확인이 가능하지만, 비디오 코덱과 오디오 코덱은 파일명으로는 알 수 없다.
개인적으로 Mac 유저로써 App Store를 찾아본 결과 Media Info라는 앱을 찾아서 설치하였다.
아래는 임의의 영상 하나를 알아본 결과이다.
구글에서 지원하고 개발하는 오픈소스 동영상 포맷이다.
구글이 VP8을 개발한 On2 테크놀로지스를 인수하면서 함께 발표하였다. 파일 확장자(컨테이너 포맷)는 .webm을 사용하며, 이름처럼 Web에서 최적화된 미디어 포맷이기 때문에 HTML5의 Video 태그를 이용해서 온라인에서 재생할 수 있다. 비디오 코덱은 VP8, VP9, AV1을 지원하며, 오디오 코덱은 Vorbis, Opus를 사용할 수 있다.
각각의 코덱에 대한 정보를 서술하기에는 너무 장황하여 아래 링크로 대체한다.
이 컨테이너에서 사용되는 비디오 코덱과 오디오 코덱 전부 무료이기 때문에 유튜브에서는 일부 사용되고 있으며, 지원하지 않는 브라우저일 경우에만 서버에서 보내주는 방식이다.
관련 코덱이 완전 무료라는 점에서 사용량이 조금씩 늘었다. GIF와 비교해 가장 큰 이점은 바로 압축률이다. 동일한 화질의 경우 WebM의 용량이 1/10가량 적게 나온다.
이에 넷플릭스에서도 사용하고 유튜브에서도 사용되었으나 현재는 다른 포맷을 사용하고 있다.
유튜브에서는 화질에 따라 다르게 가져가는 정책을 채택하고 있다. 저화질에서는 webm을 사용하며 고화질에서는 MP4를 사용한다고 한다. 내부적인 비디오 코덱은 AV1이다.
2010년 구글에서 만든 이미지 포맷이다. 이름처럼 Web을 위해서 만들어진 이미지 포맷이다. 기존의 이미지 포맷인 GIF, PNG, JPEG으로 삼분되어 있었던 진영을 WebP는 이 세가지 모두 포맷으로 전부 대체 가능하다.
WebM과 동일하게 On2를 사들이고 나서 VP8 비디오 코덱의 기술에 기반한 영상 압축 방식을 사용했다.
- 공식 홈페이지에 따르면 손실압축을 사용할 경우 JPEG 포맷보다 30% 정도 파일 크기가 작다고 한다.
- 비손실 압축을 사용할 경우 PNG 포맷보다 20~30% 정도 파일 크기가 작아진다고 한다.
- GIF을 대체 할 수 있는 애니메이션을 지원한다.
- PNG 포맷처럼 알파채널을 지원한다.
- 먼저 유튜브에 접속을 한다.
- 개발자도구를 연다.
- F12
- Command+Option+i
