gif와 webp 결과물부터 비교해보자.
webp 버전 12프레임 2.29메가
gif 버전 12프레임 11.1메가
퀄리티는 비슷하거나 webp가 더 좋은데 용량은 1/5 정도로 더 작다. gif는 256색 제한이 있는데 webp는 색 제한도 없다. 정말 신세계 아닌가?
하지만 아직은 여러가지 문제들이 있다. 먼저 커뮤니티 같은 곳에서 webp 파일 업로드를 제대로 지원하지 않는 곳이 있는 것 같고, webp로 움짤을 만드는 것 자체도 gif로 만드는 것보다는 어렵고 불편한 부분들이 많다. 아직 포토샵에서 제대로 지원하지 않는 것도 큰 단점이다.
꿀캠으로는 한 번에 캡처해서 webp 확장자의 움짤을 만들 수 있다고 하는데, 무료는 시간 제한이나 워터마크나 그런 제한이 있어서 나는 별로 쓰고 싶지 않았다. 그래서 나는 위의 움짤을 만들 때 오캠으로 고화질 mp4 영상 파일로 캡처해서 그 영상 파일을 샤나 인코더을 이용해서 webp 움짤로 변환했다.
그리고 webp는 또 한가지 큰 단점이 하나 있다. 용량이 작은 만큼 압축률이 높아서 그런지 웹브라우저에서 webp를 열 때 끊김 현상 같은게 있을 때가 있다.(지금은 해결됐는지 모르겠는데 아이폰의 사파리 브라우저에서 특히 끊김 문제가 심했었다고 한다.) 또한 다 열리기 전에는 아무것도 표시되지 않는 문제도 있는 것 같다. (gif는 파일이 다 안 열려도 일단 첫 이미지가 표시된다.)
그래서 나는 webp를 삽입할 때는 아래의 코드를 이용하려고 한다.
<div style="background-color:#eee; position: relative; padding-top: 56.1%; height:0;" ><img src="webp파일주소" class="" alt="" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: auto; width: 100%;" /></div>
이미지가 다 열리기 전에는 회색의 박스가 표시되도록 하는 코드이다. 코드에서 “56.1%” 부분이 중요하다. 정확하지는 않은 것 같은데 16대 9 와이드 비율의 이미지를 표시할 때는 저정도 값을 적어줘야 한다. (정사각형의 이미지라면 “100%”로 적어주면 된다.)
샤나 인코더에서 webp 파일로 변환하기
오캠으로 짧은 영상을 캡처한 이후에 그 영상을 webp로 변환하는 방법에 대해서 설명하려고 한다.
샤나 인코더에서 영상을 불러온 이후에 “빠른 설정 → 파일 형식”에서 “webp”를 선택 후에 “설정 적용”을 클릭한다.
그리고 F8을 눌러서 “매개변수” 창을 열어서
위의 이미지처럼 아래 코드를 입력해주면 된다.
-qscale 85
-compression_level 5
위의 코드들은 잘 모르겠고 밑에 있는 두 줄에 대해서 설명하겠다. “qscale”은 퀄리티이고(100으로 하면 가장 용량이 크다.) “compression_level”은 압축률이다. (6이 가장 높은 값이고 0이면 압축을 안 하는 것인듯.)
그리고 “인코딩 시작”을 눌러서 인코딩을 해주면 된다.
정보 출처 : [건의] webp 화질을 조절하는 옵션이 생겼으면 좋겠습니다.
관련 링크
