본문 바로가기
IT 이야기

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

by 돌이아빠 2024. 4. 5.

Contents

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

    WebP Image Format

    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 이미지를 생성하는 방법을 정리해 보면

    함께 읽어보면 좋은 글

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

     

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

    무료 온라인 이미지 포맷(JPG, PNG, GIF, WEBP 등) 변환 사이트 알아보기 들어가며 다양한 이유로 이미지 포맷을 변경해야 하는 상황들이 있습니다. 이때 이미지 포맷 변환을 위한 프로그램이 로컬(노

    windlov2.tistory.com

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

     

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

    SEO는 검색 엔진 최적화(Search Engine Optimization)의 약자로, 웹사이트나 웹페이지가 검색 엔진에서 높은 순위에 노출되도록 최적화하는 과정 및 기술을 말합니다. 검색 엔진은 사용자가 검색을 할 때

    windlov2.tistory.com

    Google Developer Page for WebP

     

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

    더 작은 웹용 이미지를 만들고 변환기 다운로드 및 지원 링크를 가져오는 이 이미지 형식에 관해 알아보세요.

    developers.google.com

    유익하셨나요? 공유 or 구독해 보세요