티스토리 WebP지원, 추천 안함

티스토리에서 WebP이미지를 지원하고 있다. WebP는 개발한 쪽 피셜 https://developers.google.com/speed/webp/gallery1?hl=ko
WebP 이미지는 압축된 포멧경우인 JPEG 이미지보다 30% 이상 파일크기가 작고 
무압축 포멧경우인 PNG이미지보다 20~30%정도 파일크기가 작아진다고 한다.

사진에서 보다시피 jpeg는 43.84KB WebP는 29.61KB임을 알 수 있다.
물론 사진은 화질을 어찌 설정하에 따라서 용량이 다르므로 WebP는 화질을 낮게 설정하여서 용량이 작을 수 있지 않느냐? 할 수도있다.

 

그래서 이미지 품질 평가를 위한 방법으로 화질차이 및 유사도를 확인해주는 값인 SSIM을 비교한 결과 아래의 사진과 같이 0.95로 나온다. (1일 경우 사진이 같다는 걸 뜻함.)

 

(이미지의 SSIM 값을 비교하는 사이트 :  http://darosh.github.io/image-ssim-js/test/browser_test.html

그런 예시로 기만부리는 짓은 하지않는 것으로 보인다. 사진이 압축파일인 만큼, 이미지를 어찌 압축하느냐에 따라서 사진이 조금씩 달라보일 수는 있지만 0.95정도면 동일한 퀄리티값으로 압축한 파일로 비교한 것으로 보인다. 위 이미지예시로 확실히 30%정도의 용량이 낮다는 걸 알 수있다.

이 용량 작은 것이 티스토리에서 왜 중요한가? 알아보자. 우리가 컴퓨터를 쓸 때에 알게 모르게 사용에 조금이라도 지체를 보이는 구간, 즉 내가 무언가를 하였을 때에 반응을 바로 안보이면 불쾌한 경험을 하기 마련이다. 문서나 이미지를 열 때에 늦게 켜진다는 이유로 HDD보다는 SSD를 사용하며, 게임에서도 모니터가 60Hz는 16.67ms마다 화면이 갱신되고, 144Hz는 6.94ms마다 화면이 갱신되는데 약 10ms조차도 체감이 되는데 내가 무언가를 명령을 내렸는데 반응이 조금씩 느린 것이 이게 쌓이다 보면 불쾌한 경험을 하게 된다는 것이다. 블로그 글뿐만이 아니라 정보의 양질이 크게 차이가 안난다면 웹서핑을 할 때에 누를 때마다 조금씩 기다리는 시간이 빠른 곳을 찾기 마련이다.

책 한권이 글자 수로는 16만자 정도이고 txt로 나오는 용량은 250~300kb로 알려져 있는데 블로그에서 책 한 권까지의 글을 쓸 일은 잘 없고, 아무리 해도 이미지 한 장의 용량보다는 블로그 글내용이 차지하는 용량이 작다고 본다. 고로 블로그 로딩에서 제일 오래걸리는 부분은 이 이미지파일을 불러오는 데 걸리는 시간이라고 보는데 이 용량을 20~30%정도 줄여준다면 WebP가 jpg보다 이미지디코딩이 길다고 하여도 용량차이만큼 다운하는 시간보다는 훨씬 빠르며 이 차이가 로딩의 빠름을 결정한다.

그럼 이제 제목에서 언급했다시피 그럼 WebP는 정말 쓸만한가?에 대한 답으로서 아니 글쓴이는 용량 작으면 좋다했으면 무조건적으로 WebP를 써야하는 거 아닌가요?라고 할 수있다. 여기서 중요하다. 다른 사이트는 몰라도 티스토리에서는 조금 생각해야할 부분이 있다.

● 티스토리에서는 이미지를 올리면 해상도가 너무 높으면 1280x720로 리사이징 한다. 정확히는 가로가 1280을 넘지않도록 리사이징 하는 것이므로 1280x?해상도의 비율로 리사이징한다. 이것은 실험결과 글 본문크기와 무관한 것으로 보인다.
(물론 누르면 원본으로 보이지만 이미지를 하나하나 클릭해가며 글을 본 적이 많은가?라고 한다면 글쎄)

● 티스토리에서는 WebP를 업로드 할 시 해상도와 무관하게 리사이징해서 올린다.

위의 첫 예시로서 아래의 사진을 보자. 사진을 그냥 우클릭해서 이미지를 다른이름으로 저장해서 해상도를 봐보자. 1280x720로 나올것이다. 그리고 이미지를 클릭하여서 생기는 창에서 그 이미지를 같은 방식으로 저장해보자 1920x1080으로 나올 것이며, 그 이미지가 글쓴이가 올린 원본 사진과 용량1.53MB과 같을 것이다. 확장자가 JPG가 아니라 Jfif로 나올 수도 있는데 JPG를 인터넷에서 파일을 공유하기 쉽게 만든 확장자JPG와 동일하다고 알고 있으며 확장자만 바뀌었을 뿐 이미지퀄리티는 차이가 없다고 보면 된다. (혹시나해서 JPG파일과 Jfif파일을 위의 SSIM테스트사이트에서 확인해본 결과 SSIM값이 1로 동일하다고 나왔다.)

마비노기영웅전 월페이퍼 원본주소:https://heroes.nexon.com/Common/ViewImage?img=https%3A//lwi.nexon.com/heroes/home/wallpaper/2022/221215_38A8EB55AC4DB322/wp_124.jpg

 

두 번째 예시로 아래의 사진을 보자 똑같이 그냥 저장과 클릭 후 저장을 해보면 같은 해상도지만 파일용량이 다른 것을 알 수있다. 다양한 해상도로 테스트 해 본 결과 WebP는 무조건적으로 리사이징한 파일을 올리는 것을 알 수 있다. 

용량을 줄이는 것도 중요하지만, 정작 사진이 원하는 퀄리티가 안나온다면 이 역시 글의 질에 영향이 가기때문에 생각해야할 부분이라는 것이다. 사진이 만약 풍경이런거라면 사람들이 눌러서 봐보겠지만 정보글이나 짤막한 토막 사진을 그냥 보고 지나가는 용도로 사용할 때에 흐릿하게 보인다면 그 역시 별로라는 것이다.

리사이징되서 올라가는 WebP의 용량은 정말 작지만 테스트해본 결과 WebP는 이미지를 안티앨리어싱된 느낌으로 흐릿하게 압축해서 그런가 글자가 잘 안보이는 경향이 있더라.

 

빠른 로딩을 생각한다면 WebP도 괜찮겠지만 적절한 화질을 원한다면 가로가 1280가 넘어가지 않는다면 이미지리사이징을 하지않는다는점을 이용해서 JPG를 적절한 퀄리티로 용량 조절해가면서 올린다면 괜찮은 화질과 용량 둘 다 잡을 수 있을것이다. 괜찮은 퀄리티는 80정도로 보인다. 아래는 jpg 1280x720로 올린 사진이다. 확실히 우클릭해서 다운해보면 위의 사진보다 용량이 높은데, 리사이징을 하지않아서이다.

1280x720,987KB.jpg

한 번 잘 고려해서 선택하길 바란다.