본문 바로가기
ITATOZ/티스토리 설정

티스토리 이미지 포토샵 webP 파일 - 모바일 코어 웹 바이탈 점수 올리기

by 이타토즈 421 2023. 2. 9.

티스토리는 정말 파도 파도 배워야 할 것이 참 많은 플랫폼 같다. 그냥 쓰면 되는 줄 알았지만 구글, 네이버 seo에 맞게 글을 작성해야 했고 이제는 이미지 포맷까지 신경 써서 올려야 한다. 검색할 때 주로 모바일로 이루어짐에 따라 티스토리 블로그는 항상 모바일 환경을 염두하고 작성해야 한다. PC점수는 그래도 좋게 나오지만 모바일 점수가 너무 안 좋게 나와 왜 그런가 찾아보니 수많은 요인으로 인해 점수가 안 나오고 있었다. 그중 이미지 파일 크기가 너무 커 LCP 문제 개선이 필요하다고 했다. 안 그래도 이 부분 때문에 화질을 축소해 이미지를 업로드하고 있었는데 축소한 것도 크다고 webP 포맷으로 업로드하라고 한다.

 

티스토리 블로그 모바일 웹 코어 바이탈 개선 - 구글 webP 포맷

WEBP 이미지 포맷은 WEB에서 사용하기 쉽게 축소한 이미지 파일 확장자다. 2010년도 구글이 이 포맷을 만든 기업을 인수했고 전 세계 검색시장을 장악했다고 해도 과언이 아닌 구글이 강요 아닌 강요를 하는 포맷이다. 티스토리는 구글 노출도를 신경 안 쓸 수 없는 플랫폼이라 구글 입맛에 맞게 이미지를 업로드하는 것이 중요하고 판단된다. 모바일 코어 점수를 낮추는 수많은 요인 중 하나라도 개선시키고자 WEBP로 업로드해야 한다.

포토샵 webP 지원

현재 어도비 포토샵을 이용하고 있다. 학생가로 월 24,000원을 내고 어도비 프로그램 대부분을 이용할 수 있어 지금도 계속 사용하고 있었다. 알고 보니 23.2 버전부터 포토샵 내에서 webp 확장자를 지원했다고 한다. 여태껏 이걸 모르고 jpg로 이미지를 축소해 업로드하고 있었다. 수백여 개의 글 이미지를 webp로 변경하는 것은 사실상 너무 번거롭고 이제부터라도 webp로 변경해서 올려야겠다.

티스토리 LCP 개선

webP 이미지의 단점

엄청난 압축을 하기 때문에 사실상 웹 업로드 외 다시 사용할 수 없다는 단점이 있다. 그 이외에는 없다고 봐도 무방하지 않을까? 이전까지 가장 큰 단점은 괴랄한 ms 인터넷 익스플로러에서 호환되지 않는다는 문제가 있었는데 작년 기준으로 ms에서도 버린 자식이 되었다. 시장에서 아예 사라지고 크로미움 기반 웹 브라우저가 대세니 큰 문제가 아니다. ms도 엣지 고집을 버리고 크로미움 기반 엣지로 바꿨으니 사실상 국내에서 이미지가 안 보일 브라우저는 없다고 봐도 무방한다고 판단된다.

 

구글 코어 웹 바이탈 LCP 개선을 위한 미립자 노력

일요일 모바일 점수가 유독 안 나와 개선방법을 구글에 하루종일 검색했다. 우선 티스토리 자체에서 사용하는 것들 때문에 일반 사용자가 개선할 수 없는 부분이 있었고 애드센스를 넣으면 광고 노출 시간 때문에 어쩔 수 없이 딜레이 되는 부분이 있다. 그리고 코드로 구성된 외계어라 뭘 어떻게 건드려야 할지 당최 몰랐다. 그나마 내가 할 수 있는 부분은 단지 본문 상단에 보이는 대표 이미지(썸네일)가 안 나오게 변경하는 것밖에 없었다. 그래도 이 작업을 하니 등대 보고서에서 16점에서 28점으로 상승한 것을 확인할 수 있었다.

 

북클럽 스킨을 사용하는 다른 티스토리 블로거들이 왜 상단 썸네일을 제거했는지 이제야 이해할 수 있었던 부분이었다. 블로그가 예쁜 것도 중요하지만 모바일 속도에 밀려 나중에 아무도 오지 않는다면 무슨 소용일까

구글 모바일 웹 코어 바이탈 점수

포토샵 작업 후 WEBP 포맷으로 저장하기

구버전이 아닌 현재 24 버전을 이용하고 있는 나는 플러그인 없이 바로 WEBP로 저장할 수 있었다. 이미지 작업을 끝내고 다른 이름으로 저장(단축키 Ctrl + Shift + S)을 눌러 저장하면 된다. 그냥 하면 PSD나 PDF만 나오기에 오른쪽에 있는 사본으로 저장을 눌러야 한다. 그래야 아래 이미지처럼 WebP 포맷이 나온다.

티스토리 LCP 속도 개선 이미지 WEBP 포맷 확장자

WEBP를 누르면 아래 사진처럼 옵션이 나온다. '대'를 선택해 용량을 확인해 보니 JPG대비 획기적으로 줄어들지 않아 품질 50 중으로 맞춰 추출했다. 두 개 다 화질을 비교했을 때 눈으로 보면 그렇게 큰 차이가 나지 않았다.

포토샵 24 WEBP 확장자 저장

얼마나  획기적으로 줄어들었는지 확인하기 위해 JPG로도 추출했다.

WEBP JPG 비교

WebP와 JPG 화질 비교

물론 아래 이미지 자체가 WEBP으로 저장된 파일이라 이 글을 읽는 사람 입장에서 비교는 사실상 무의미하다. 대충 비교해 봤을 때 오른쪽 웹 P 글자 주변부 선예도가 약간 떨어지는 모습이다.

웹P JPS 확장자 화질 비교

WebP, JPG 용량비교

위 사진에서도 확인할 수 있지만 최대한 비슷하게 만들기 위해 JPG도 중간 화질로 선택해 추출했다. JPG는 26.6KB이고 웹 P는 11.9KB로 JPG가 약 2배가량 용량이 높았다. 사실 이 정도 용량이라면 4.5G 통신망에서 그렇게 크게 작용할 용량은 아니지만 블로그 안에 사진이 많아지면 영향을 많은 받지 않을까

WEBP JPG 용량 크기 비교

수익에 신경 쓰지 않고 본인 작품 사진 업로드하는 티스토리 블로그를 들어가 보면 이미지가 나오는데 한참 걸리는 경우를 봤을 것이다. 이는 작업한 사진을 축소하지 않고 그대로 올린 것으로 해석할 수 있다. 그런 분들께서 포털 노출도를 신경 쓰지 않겠지만 조회수나 애드센스 수익을 어느 정도 염두에 두고 티스토리 운영하는 사람이라면 WEBP 이미지로 변경해 업로드하는 미립자 노력이 필요하다는 생각이다.

 

그냥 단축키로 이미지를 저장했는데 이제 티스토리 블로그를 하는데 뎁스가 깊어져버렸다. 웹 P 이미지로 변환해 주는 사이트가 있지만 그 사이트가 서버를 어디에 두고 있고 그렇게 변환한 이미지 원본이 어디로 가는지 코드 까막눈인 제가 막 사용하기는 두렵더라고요.



댓글