티스토리에서 webP와 대체 이미지 사용하기

대표 국산 움짤 제작 프로그램인 꿀캠에서는 webP를 지원한다.^[각주:1] 얼마전부터 유투브에서도 시험적으로 동영상에서 바로 움짤을 만드는 기능을 제공하고 있는데 이것 역시 webP를 제공하고 있다.

webP란 무손실과 손실 압축을 지원하는 새로운 이미지 포맷이다. 무손실의 경우 타 포맷의 손실 압축 정도의 용량을 가진다는 장점이 있다. 또한 애니메이션도 지원한다. WebP의 경우 24비트 RGB 컬러와 8비트 알파체널을 지원하나, gif의 경우 8비트 컬러와 1비트 알파채널 밖에 지원하지 않는다. 손실 압축의 경우 약 64%, 무손실 압축의 경우 19% 정도 gif 대비 용량이 적다. 용량이 적기 때문에 동일한 크기의 gif와 webP 애니메이션을 만들경우 webP의 이미지가 프레임이 높고 부드러운, 비트수가 높아 깨끗한 이미지를 제공한다.

이렇듯 webP는 GIF를 뛰어넘을 혁신적인 이미지 포맷이다. 하지만 구글이 개발 했고 아직 표준화가 되지 않았기 때문에 현재는 크롬과 같이 블링크 계열의 브라우저^[각주:2]에서만 정상적으로 동작한다.

webP를 사용할수 있는 플랫폼 리스트

출처 - http://caniuse.com/#feat=webp

지원하는 브라우저가 적기 때문에 webP"만" 사용하는 것은 추후 큰 문제거리가 될수 있다. 왜냐면 webP만 불러오면 파어이폭스와 같은 브라우저 에서는 webP 대신 위와 같은 곰돌이 사진이 뜨기 때문이다. 티스토리의 트롤링

우선 티스토리는 webP를 이미지 파일로 인식하지 않는다. 그래서 포토 업로더로 업로드는 불가능하고 파일보관함을 통해 바로 업로드 하면 된다. 하지만 이를 애디터에 첨부하는 것도 문제다. 에디터 내에서 파일삽입 기능으로 webP를 추가하는 것이 지원되지 않기 떄문이다. 파일 삽입을 하면 일반 첨부파일과 동일하게 첨부가 되는 것을 확인 할 수 있다.

그렇기 때문에 해외에서는 webP Fallback이라는 한줄짜리 코드가 널리 통용되고 있다. 한글로 풀어보자면 webP 대체 시스템으로 풀이 할 수 있다.

<img src="image.webp" onerror="this.onerror=null; this.src='image.gif'">

간단히 설명을 하자면, img src 경우 webP 쓸정도 수준되면 알것 같으니 그냥 넘어가고,

onerror (이미지 로드시 첫번째 소스가 에러가 나면),

"this.onerror=null (오류 초기화. 만약 onerror에 의해서 불러온 대체 이미지가 오류를 일으킬 경우 끊임 없이 오류가 반복되는 것을 막는다. )

this.src='이미지경로' (webP가 아닌 gif 경로를 적어서 webP를 지원하지 않는 브라우저에서 이미지를 불러오는 명령어 )

이렇게 하면 블링크 계열에서는 webP가, 그 이외의 브라우저에서는 gif가 실행되는 것을 볼 수 있다.

하지만 티스토리의 시스템 특성상, webp를 이미지로 인식하지 않기에 지원하지 않는 브라우저 상에서 webP를 로드 할시, 브라우저 단에서 오류를 토해내게 되면(쉽게 말하면 엑박) 그 즉시 곰돌이로 바꿔버리는 코드가 들어가있다.

그래서 이 경우에 해당 스크립트의 값을 제거 해주면 정상적으로 로드가 되게 된다. (그지같은 티스토리)

<script>
checkArticleImage = null;
</script>

이 코드를 글 맨위에 적어 넣으면 글이 로드 될때 적용이 되기 때문에 webP 자리에 곰돌이가 오면 사살제거한다.

- 예제 -

<script>
checkArticleImage = null;
</script>
<img src="http://est0que.tistory.com/attachment/cfile27.uf@2666073B54A1B5450D71B7.webp" onerror="this.onerror=null; this.src='https://t1.daumcdn.net/cfile/tistory/266E853B54A1B5470B'">