JPG보다 WebP 포맷을 추천해요

WebP은 무엇일까요?

JPEG, JPG는 많이 들어보셨죠? 하지만 상대적으로 WebP는 낯설어요.

WebP는 이미지에 대해 고효율의 손실 압축으로 구글에서 제작한 이미지 포맷입니다. WebP 형식의 이미지를 사용하여 낮은 용량의 이미지를 빠르게 로딩할 수 있어요

옛날에는 WebP는 브라우저 호환이 잘 안 됐어요. 그래서 구글에서 출시하고도 많이 사용하지 않았죠. 하지만 효율성을 인정받은 WebP는 애플 IOS 14부터 적용을 밝혀서 호환성 문제를 대부분 해결했습니다.

WebP의 경우 무손실 이미지는 PNG 포맷에 비해 크기가 26% 더 작습니다. WebP 형태로 이미지 압축시 낮아지는 화질은 동등한 *SSIM(Structual Similarity) 품질 지수 에서 비교 가능한 JPEG 이미지보다 25-34% 차이로 용량이 더 작습니다.

*SSIM이란? 수치가 아닌 사람의 시각적 화질 차이 및 유사도를 평가하기 위해 고안된 방법이다. 원본대비 압축된 파일의 밝기, 콘트라스트, 구조를 비교함(필자도 잘모름)

손실 RGB 압축이 허용되는 경우 손실 WebP는 투명도도 지원하여 동일 PNG에 비해 평균 3배 더 작은 크기를 제공합니다. 이전에는 PNG도 웹에서 사용할 때 지원하지 않는 경우도 많았는데 현재는 대부분 브라우저에서 지원하고 있습니다.

WebP랑 SEO는 어떤 상관이 있나요?

검색시 이미지 영역에 JPG보다 WebP가 더 노출이 잘된다고 얘기할 수 없어요, 현재까지 더 잘 노출되는 것은 WebP나 jpg 중의 조건이 아니라 이미지에 캡션이나 ALT태그를 충실하게 입력한 콘텐츠였어요.

하지만 WebP를 사용해야 SEO에 유리하다는 이야기의 핵심은 사용자 편의를 배려하는 겁니다.

콘텐츠를 보는 사람들에게 더 낮은 데이터를 소모하게 하고 더 빠르게 로딩되게 해주며 좋은 화질을 보여줄 수 있는 서비스를 제공하는 것 당연히 더 좋겠죠.

일반적으로 인터넷 속도가 매우 빠른 사용자는 로딩되는 이미지의 크기에 크게 관심이 없을 수도 있지만, 데이터를 다쓰고 3G를 사용하거나 공용 와이파이를 잡아서 정보를 서핑하는 사람들에게 느려질 수 있는 원인이 될 수 있습니다.

페이지의 속도에 따른 이탈율의 차이는 심합니다.

수집 로봇은 다 알아요

구글이 추천하는 사이트 점검툴 Lighthouse만 사용해봐도 WebP를 사용하는지, JPG를 사용하는지 체크를 하거든요. 큰 용량의 이미지를 써서 로딩이 지연된다면 점수가 쭉쭉 떨어질 거에요.

점검툴에 나오는 모든 문제를 해결할 수는 없어요. 하지만 기본적으로 많은 시간이 필요하지 않거나 간단하게 수정할 수 있는 요소들은 틈틈히 개선해주는 것을 추천해요. 정말 기본적인 내용이거든요

이미지가 많이 올라가는 사이트의 경우 WebP를 필수적으로 사용하는 것을 추천해요. 크고 고화질인 이미지를 많이 제공할수록 필수적으로 써주세요

이미지 때문에 느려진 속도와 로딩을 개선해서 더 건강한 사이트가 될 수 있겠죠?