WebP 파일이란?

공정위 광고 문구 Ver 3.1
공정위 광고 문구 Ver 3.2(모바일 전용)

2010년 Google은 온라인 이미지를 줄이기 위해 ‘WebP 파일‘ 포맷을 만들었습니다. 사진의 그래픽과 크기를 줄여 더 빠른 웹사이트 로딩이 가능합니다. 무료로 사용할 수 있는 오픈 소스 파일입니다.

1. WebP 파일 정의

‘WebP‘는 기존의 PNG 및 JPEG 파일보다 포맷 파일 크기가 작습니다. 확장자 또한 [.WEBP]로 표시되기 때문에 알아보기 쉽습니다. 두 개의 포맷 파일인 PNG와 JPEG 파일을 압축(무손실, 손실압축)해서 웹 사이트의 성능을 높이는데 사용됩니다. 구글 개발자의 말에 따르면 무손실 WebP 이미지는 PNG 포맷보다 최대 26%까지 줄일 수 있다고 합니다.

2. 배경과 용도

WebP는 2010년 온투 테크놀로지스(On2 Technologies)가 구상했으며, 2010년 2월 구글에서 1억 2,460만 달러에 인수 했습니다. On2 의 ‘VP8 기술’은 구글의 WebM 동영상 파일 형식의 핵심 기술이 되었습니다. ‘WebM‘과 함께 진행된 프로젝트가 ‘WebP‘입니다. ‘웹피‘가 사용자의 서버 속도 향상과 트래픽 양을 줄여 주듯이 구글의 서비 트래픽 역시 줄어들어 구글의 서버 비용을 절감할 수 있습니다. 구글의 영업 이익이 상승하기 때문에 구글이 ‘On2’를 인수 했다고 봐도 좋습니다.

JPEG의 손실/무손실 , PNG 파일의 무손실 압축을 지원합니다. 결과적으로 웹사이트의 빠른 로딩이 가능합니다.

WebP 파일

3. 지원 브라우저

사실 상 ‘Internet Explorer’처럼 이미 오래된 브라우저 외에 거의 모든 브라우저에서 지원됩니다.

4. JPEG(&PNG) vs WebP File

기존의 두 이미지 확장자 파일보다 훨씬 작으며 손실 압축을 한 WebP 이미지는 JEEG 파일보다 25~34%까지 작으며, 무손실 압축을 한 파일은 PNG보다 26%까지 작습니다. WebP file의 최대 크기는 16,383 x 16,383픽셀까지입니다.

JPEG 이미지 파일
PNG 이미지 파일

5. 웹피와 워드프레스

웹피 파일은 개발자가 운영하는 사이트 외에도 전세계에서 많이 사용되는 CMS인 워드프레스에서 특히 많이 사용되고 있습니다. 워드프레스에서 JPEG 및 PNG 파일을 WebP로 지원해 주는 캐시 플러그인들이 많이 있습니다.

워드프레스

ℹ️ 제휴 안내
본 사이트의 콘텐츠에는 제휴 링크가 포함되어 있습니다. 방문자가 이 링크를 통해 상품 또는 서비스를 구매하면 본 사이트는 판매처로부터 수수료를 지급받습니다. 이 과정에서 구매자가 지불하는 금액(이벤트 할인 시 금액이 내려갑니다↓)은 오르지 않습니다. 게시된 가격·할인·재고 정보는 작성 시점 기준이며 실제와 다를 수 있으므로, 구매 전 판매처에서 최종 확인하시기 바랍니다. 상품 선정과 평가는 자체 기준에 따라 작성되며, 수수료 지급 여부가 소개 순서나 평가 내용에 영향을 주지 않습니다.

Similar Posts

  • [WP] 워드프레스 이미지 핫링크 차단 방법 4가지

    이미지 핫링크(Image hotlinking)는 웹사이트 성능에 부정적인 영향을 줍니다. Image hotlink란 무엇이며, 웹사이트에 어떤 부정적인 영향을 주는지, 그리고 어떤 사이트에서 내 사이트에 핫링크를 적용했는지 알아 보도록 하겠습니다. 1. 이미지 핫링크(Image hotlink)란? ‘이미지 핫링크’는 누군가 내 웹사이트에서 직접 이미지(를 포함한 미디어파일)를 링크하여 자신의 웹사이트에 이미지를 삽입하는 것입니다. 핫링크는 ‘무단 도용’이며, 내 사이트의 저작권을 허가 없이…

  • 워드프레스 DB Collation: utf8mb4_unicode_520_ci

    워드프레스 전용 서버를 구축하기 위한 준비를 APM 설치 후 테스트 도메인으로 워드프레스를 설치했다. 설치 후 데이터베이스를 확인해 보니 워드프레스 DB Collation이 utf8mb4_general_ci가 아닌 utf8mb4_unicode_520_ci로 확인되었다. 워드프레스 utf8mb4_unicode_520_ci가 표준이었나 생각하다가 구글링 후 워드프레스 utf8mb4_unicode_520_ci가 표준이라는 것을 확인했다. 예전에 시간적 여유가 있을 때 utf8mb4_general_ci를 사용했었고 그때는 utf8mb4_general_ci가 표준이었는지 모르겠지만 지금 생각해보니 예전에도 표준 정렬은 unicode_ci를…

  • 워드프레스 패턴: 재사용 가능 블록 생성 및 사용

    워드프레스 패턴은 블록 에디터로 글과 페이지에서 콘텐츠를 작성할 때 특정 블록을 ‘나만의 스타일’로 조립 한 후에 재사용이 필요한 경우 불러와서 사용할 수 있는 기능입니다. 워드프레스로 지속적인 콘텐츠를 제작하는 블로거에게는 콘텐츠 작성 시 속도와 피로도를 줄임으로써 더 좋은 콘텐츠를 만들기 위한 기능으로 볼 수 있습니다. 다른 목적의 워드프레스 사이트에서 역시 특정 패턴을 동기화하여, 각각의…

  • [WP] 워드프레스 htaccess 기본 설정 및 WWW URL 제거 방법

    워드프레스로 사이트를 운영하는 중에 .htaccess 파일 기본 설정이 필요할 때가 있습니다. 워드프레스 htaccess 기본 설정은 일반 사이트와 멀티 사이트 용으로 나뉩니다. FTP 또는 SSH 등으로 .htaccess 파일이 없는 경우 확인이 되면 아래 내용을 참조해서 생성하면 되겠습니다. ✅ 워드프레스 htaccess 기본 설정: 일반 사이트 워드프레스 .htaccess 기본 설정(일반 사이트)은 다음과 같습니다. ✅ .htaccess 기본…

  • 웹 사이트 속도 측정 TOP4 (GTmetrix WebPagetest..)

    워드프레스 CMS를 포함한 웹 사이트의 속도는 매우 중요합니다. 페이지의 느린 로딩 속도로 방문자는 웹 사이트의 콘텐츠를 보기 전에 이탈한 가능성이 있습니다. 웹 사이트 속도 측정 도구를 이용해 운영 중인 웹 사이트의 속도가 어느 정도 나오는지 체크할 수 있는 도구들입니다. 웹 사이트 속도 측정 이전에 체크할 사항 속도 측정을 할 때 체크할 사항은 테스트를…

  • WP OPcache 플러그인

    PHP 5.5 이상 버전의 서버에서는 OPcache가 기본적으로 설치되어 있으며, 활성화되어 있는 경우가 많습니다. 플러그인이 많지 않은 간단한 워드프레스 사이트에서는 큰 차이를 느끼기 어려울 수도 있지만, OPcache는 전체적인 사이트 속도를 평균 3배 이상 향상시키며, 특히 중대형 사이트일수록 그 효과가 더욱 뚜렷하게 나타납니다. 서버에 설치만 되어 있다면 기본적으로 작동하지만, OPcache를 직접 관리하고 통제하고 싶다면 ‘WP…