WebP 이미지 포맷의 특징과 블로그 SEO 에 유리한 이유는?

WebP 이미지 포맷의 특징과 블로그 SEO 에 유리한 이유는?

WebP 이미지 포맷에 대하여

WebP(웹피, weppy) 는 손실/비손실 압축 이미지 파일을 위한 이미지 포맷으로 On2 테크놀러지스의 기술을 기반으로 인터넷 웹 페이지에서 널리 사용되고 있는 JPEG(JPG) 을 대체하기 구글이 개발하여 제시한 이미지 파일 포맷 입니다.

GIF 이미지 포맷의 대표적인 특징인 애니메이션과 PNG 이미지 포맷의 대표적인 특징인 알파 투명도를 지원합니다.

블로그를 비롯한 각종 웹사이트의 트래픽 감소 및 로딩 시간 단축을 겨냥한 것으로, 주로 사진 이미지 압축 효과가 높은 것으로 알려져 있습니다. JPEG(JPG) 등과 같은 손실 압축 포맷으로 화질 저하를 최소화하면서 파일 크기를 축소(같은 품질의 JPEG 이미지의 10 ~ 80 % 정도까지 압축)하였습니다.

WebP는 무손실 이미지의 경우 PNG에 비해 크기가 26% 더 작고, WebP 손실 이미지는 비슷한 JPEG(JPG) 이미지보다 25~34% 더 작습니다.

따라서 블로그를 비롯한 각종 웹 사이트 개발 및 운영자는 WebP 이미지를 사용함으로써 파일 사이즈는 더 작으면서도 훨씬 풍부한 이미지를 만들어 블로그나 웹 페이지의 로딩 시간을 단축함으로써 더 빠르게 만들 수 있습니다.

WebP 와 다른 이미지 포맷과의 차이는?

WebP 이미지 포맷 외에 웹사이트 등에서 흔히 사용되는 이미지 포맷은 JPEG(JPG), PNG, 그리고 GIF가 있습니다.

이 중에서 JPEG(JPG) 이미지 포맷이 손실 압축이면서도 화질 저하가 상대적으로 덜해 이미지 용량도 줄이면서 이미지 퀄리티도 보장받을 수 있어 가장 널리 사용되고 있습니다.

이 4가지 이미지 포맷의 특징 등을 정리해 보면 다음과 같습니다.

GIF

• 단순한 애니메이션을 만들 수 있음
• 이미지를 압축하여 빠르게 전송하는 것이 목적
• 최대 256 color 를 사용 (단점) 하여 색 표현에 제약
• 압축률이 높고 애니메이션과 투명도를 지원

JPEG(JPG)

• 손실 압축 포맷이지만 압축률이 높아 용량이 작음
• 손실 압축 방식이므로 화질 손실이 발생
• 압축률이 높아 이미지 파일 용량이 작고, true color 로 다양한 색상 표현이 가능

PNG

• 무손실 압축 방식으로 원본 이미지의 화질을 최대한 제공
• 단색 투명층이 아닌 8bit 알파 채널을 이용한 투명층(투명도)을 제공
• True color 를 지원하여 다채로운 색상 표현이 가능
• 애니메이션을 지원하지 않음 (APNG 포맷을 통해 지원)

WebP

• 무손실 및 손실 압축을 제공
• 무손실 이미지는 PNG에 비해 크기가 26% 정도 더 작음
• 손실 이미지는 JPEG(JPG) 에 비해 크기가 25 ~ 34% 정도 더 작음
• 손실/무손실 압축 방식 모두 투명도(알파 채널)를 지원
• 손실/무손실 압축 방식 모두 애니메이션을 지원

WebP 이미지 포맷이 블로그 SEO 에 유리한 이유는?

지금까지 WebP 이미지의 특징과 다른 이미지 포맷들의 특징 그리고 차이점 등을 알아봤습니다. 내용을 보시면 알겠지만 결국 WebP 이미지는 웹사이트나 블로그를 기준으로 웹용 이미지 포맷들 중 화질, 투명도, 애니메이션을 어느정도 보장하면서도 가장 높은 파일 압축률로 동일 이미지에 대해 가장 작은 이미지 파일 크기를 보여줍니다.

블로그 SEO(검색엔진최적화) 에서 페이지 로딩 속도는 상당히 중요한 요소 중 하나입니다. 이 페이지 로딩 속도에 가장 큰 영향을 주는 요소가 바로 웹 페이지나 블로그에 포함된 이미지들입니다. 이 이미지 파일의 용량이 줄어든다면 그만큼 페이지 로딩 속도는 개선이 될 것이고 그에 따라 블로그 SEO(검색엔진최적화)에서도 높은 점수를 받을 수 있습니다.

즉, WebP 이미지 사용 -> 이미지 파일 크기 축소 -> 블로그 로딩 속도 개선 -> 블로그 SEO 개선 -> 검색 결과에 상위에 노출될 확률 증가 -> 방문자 증가 라는 선순환 구조를 만들 수 있습니다.

WebP 이미지는 어떻게 만들어야 할까?

자체 제작하는 이미지라면 포토샵이나 제가 블로그를 통해 소개한 GIMP 이미지 편집 프로그램 등을 통해서 만들어낼 수 있습니다.

그런데 블로그를 운영하시는 경우 이미지 편집 프로그램을 사용하여 직접 이미지를 창작하는 경우는 드물고 미리캔버스와 같은 미리 정의된 템플릿을 활용하여 이미지를 제작할 수 있는 사이트나 자신이 직접 찍은 사진, 혹은 다른 웹 사이트에서 가져온 이미지 들을 사용하게 됩니다. 이때 WebP 이미지 포맷을 지원하지 않는 경우가 있는데 이런 경우 제 블로그를 통해 소개해 드린 무료 이미지 포맷 변환 사이트 등을 이용하면 됩니다.

WebP 이미지를 생성하는 방법을 정리해 보면

• 직접 창작하는 경우 포토샵이나 GIMP 와 같은 이미지 편집 프로그램 사용
• 자신이 찍은 사진을 이용하거나 다른 웹 사이트에 공개된 이미지(WebP 이미지 포맷이 아닌)는 무료 이미지 포맷 변환 사이트 이용(보안이 필요한 경우 앞서 언급한 이미지 편집 프로그램 사용 가능)
• 미리캔버스와 같은 템플릿 기반 이미지 제작 사이트의 경우 PNG로 저장한 후 무료 이미지 포맷 변환 사이트 이용

함께 읽어보면 좋은 글

무료 온라인 이미지 포맷 변환 사이트 비교(JPG,PNG,GIF,WEBP 변환)

무료 온라인 이미지 포맷 변환 사이트 비교(JPG,PNG,GIF,WEBP 변환)

검색엔진최적화(SEO) 란 무엇일까?

검색엔진최적화(SEO) 란 무엇일까?

Google Developer Page for WebP

웹용 이미지 형식  |  WebP  |  Google for Developers