WebP 변환 이미지가 블로그에서 잘 동작할까?

WebP 변환 이미지가 블로그에서 잘 뜰까?

WebP(웹피)로 이미지를 변환하면 좋다던데, 블로그에서 이상없이 잘 될까요?

 

동기

구글 Page Speed Insights를 사용하면, 내 블로그가 얼마나 최적화되어 있는지 여부를 확인할 수 있습니다.

https://developers.google.com/speed/pagespeed/insights/?hl=ko

에 접속해서, 블로그의 성능 상태 확인 및 개선을 위한 조언을 얻을 수 있습니다. 기저에 깔린 가정은, 아무래도 빠른 블로그가 좋다는 것이겠죠? 그러나, 단순 속도 측정이 아니라 사이트의 컨텐츠를 보고 개선할 사항을 알려주는 것에 가깝습니다. 이런저런 것들을 고치면 더 좋을 것이라는 조언이요.

 

 

현재 상태 진단

위 사이트에 접속해서, 사이트의 이름을 입력하고 결과를 봅니다. 결과는 데스크탑용과 모바일용을 나눠서 각각 확인할 수 있습니다. 숫자에 너무 연연하지는 마시길 바랍니다. 아무 내용도 없는 빈 티스토리를 만들어서 테스트를 해봤는데,

• 모바일: 72점
• 데스크톱: 88점

이 나왔습니다. 물론, 높은 점수일 수도 있지만, 거의 깡통블로그라 하더라도 저 점수가 나온다는 것은 기본적인 설정조차 개선사항을 포함하고 있다는 것이겠죠.

• 스킨별로 최적화 여부
• 네트워크 위치: 다음 티스토리 (한국)
• 티스토리 서버 자체 설정: 사용자가 개별 설정할 수 없음 (캐시 설정 등)
• 2차 도메인 적용여부
• 애드센스 등 광고 적용 여부

특히 2차 도메인 적용 티스토리 블로그의 속도 관점에서 의견을 적자면, 제 블로그를 티스토리 원본 도메인으로 측정했을 때와 2차 도메인으로 측정했을 때의 점수도 차이가 많이 납니다. 원본 도메인 속도 측정값이 2차 도메인 속도 측정값보다 좋았습니다. 따라서, 속도에 연연하여 스트레스 받지 않고, 참고 정도만 해도 좋겠습니다.

 

차세대 이미지 형식

검사 항목 중, 차세대 이미지와 관련된 리포트를 보겠습니다.

즉, 차세대 이미지를 적용하면 좋아진다는 거겠죠. 어떤 점이 좋아질까요? 이 포스트에서는 특히 WebP에 대한 내용을 기록으로 남깁니다.

 

WebP란?

WebP는 구글이 지원하는 차세대 이미지 포맷 중 하나입니다. 특징으로는, 약 30% 정도에 달하는 압축률과 PNG/GIF와 같은 투명도를 제공한다는 점이 있습니다. 웹에 올릴 이미지를 압축할 때, tinypng와 같은 사이트를 많이 쓸텐데, PNG 파일보다 더 작은 용량의 이미지로 유사한 품질을 표현할 수 있다면 두 말 할 필요도 없이 좋은 것 아닌가요?

예전에 포스트에 실제 사용했던 이미지로 비교해 보겠습니다.

• JPG 파일-1: 876KB
  

  

• WebP 변환 파일-1: 602KB
  

  

• JPG 파일-2: 1MB
  

  

• WebP 변환 파일-2: 178KB
  

  

당연히 WebP만 써야할 것 같죠?

 

지원 브라우저 확인하기

나온지도 꽤 되었긴 합니다만, 아쉽게도 모든 사람들을 다 만족시킬 수는 없는 법입니다. IE11이 기술지원을 종료한다고 하더라도 아직 많은 사람들이 계속 쓰고 있으니까요.

이름마저 직관적인 아래 사이트를 통해 확인해 봅시다.
https://caniuse.com/webp

저도 WebP를 쓸 수 있나요? 사이트입니다.

위 스크린샷에서 보면, 색깔로 100% 서포트가 되는지 안되는지 여부를 볼 수 있는데요.

• IE 지원여부
  

  

• Safari 지원여부 (분명히 지원될 거라 들었는데...)
  

  

IE는 지원이 아예 안되고, Safari는 부분 지원된다고 하네요. 지원안되면 어떻게 되냐고요? 지원이 되는 브라우저에서라면, 위의 이미지들이 두 개가 모두 정상적으로 화면에 노출됩니다. 그러나, 지원되지 않는 브라우저에서는 소위 엑박이 뜨는 것이라 보시면 됩니다. 제가 예전에 올렸던 글을 맥북 사파리에서 접속해서 보면 아래와 같이 뜬다는 이야기가 되겠습니다.

부분지원한다는 Safari도 이 정도면, 빨간색 불들어온 IE는 말 다했죠. 참고로, 제가 사용한 Safari 브라우저의 버전은 14.0(15610.1.28.1.9, 15610)이고, OS 버전은 Catalina입니다.

 

내 콘텐츠를 주로 보는 사람은 누구인가?

결국, 영향을 받는 사람들은 내 콘텐츠를 보는 사람들이겠죠. 만약, 내 글을 보는 사람들의 구성이 크롬유저, 모바일 브라우저 등으로만 구성이 되어 있다면, WebP로 가도 된다는 이야기입니다. 그러나, 사용자들을 들여다 봤는데 그 사용자들이 아직 IE가 20-30%라고 한다면, 유저들은 '뭐지? 왜 엑박이야?' 라고 실망감을 표현하며, 이탈할 수도 있겠군요. 이 정보는, 네이버 애널리틱스나 구글 애널리틱스 등을 활용하여 내 블로그에 접속하는 사용자들의 주 브라우저들의 종류를 보시면 됩니다.

 

대안

HTML5의 picture 태그를 사용하면, 브라우저 미지원으로 인한 대책을 마련할 수 있습니다. 만약, 기존에

<img src="my_img.webp" />

와 같이 이미지를 표현했다면,

<picture>
  <source srcset="my_img.webp" type="image/webp">
  <source srcset="my_img.jpg" type="image/jpeg"> 
  <img src="my_img.jpg">
</picture>

등과 같이 노출되는 전략을 세워줄 수 있습니다만, 귀찮겠죠. 티스토리에서는 쉽지도 않을 것입니다. 그래서, 본인의 유입 브라우저 유형과 향후 IE 종료 등을 보면서 WebP로 넘어가도 좋을 것 같습니다. 그 전까지는 tinypng 같은 사이트를 쓰는 것이 속편할 것입니다. WebP 변환 이미지는 분명 장점이 있습니다. 그러나, 잠재 고객들을 위한 대응이 어느 정도 되어 있다고 확신하거나 대응책을 마련해 놓기전에는 조심스럽다는 입장입니다. 특히, 기업 블로그나 기업형 홈페이지, 혹은 고객 대응 상용 서비스를 하는 경우는 두 말할 나위가 없겠죠.

 

WebP 변환 사이트 추천

WebP 변환 윈도우즈 프로그램 추천