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] 워드프레스 LCP(Largest Contentful Paint) 측정 방법 4가지와 해결 방법

    웹 사이트를 운영할 경우 SEO 측면에서 웹 사이트의 로딩 속도는 매우 중요한 요소입니다. 이번에는 워드프레스 LCPLargest Contentful Paint란 무엇이며, 중요한 이유와 개선하는 방법에 대해 알아 보겠습니다. LCP는 코어 웹 바이탈Core Web Vitals 지표 중 하나입니다. 코어 웹 바이탈(CWV) : 출처 클라우드플레어 ⓐ 로딩 속도를 측정하는 최대로 의미 있는 페인트(LCP)ⓑ 페이지 상호 작용성을 측정하는…

  • [WP] 웹 브라우저 렌더링이란?[렌더링 종류]

    브라우저 렌더링이란 HTML, CSS, 자바스크립트 등 웹 사이트의 문서가 웹 브라우저에서 출력 되는 과정입니다. 모바일 or PC 모니터 등 브라우저에서 웹 페이지가 표시(렌더링)되는 것이라고 하는 것이 쉬운 접근 법입니다. 각각의 브라우저는 렌더링을 실행하는 렌더링Rendering 엔진을 가지고 있습니다. ※브라우저 별 렌더링 엔진 크롬&오페라 : Blink 인터넷 익스플로러 : Trident 모질라 파이어폭스: Gecko 사파리 :…

  • 워드프레스 RSS 피드 개수 설정 및 피드 주소 확인

    워드프레스에서 RSS 피드 설정과 주소 확인 방법에 대해 알아 보겠습니다. 워드프레스의 기본 RSS 피드 개수는 10개로 설정되어 있으며 늘리거나 줄일 수 있습니다. 먼저 워드프레스 RSS 피드 개수 설정 방법입니다. ✅ 워드프레스 RSS 피드 개수 설정하기 워드프레스 관리자 페이지 [설정] > [읽기] 항목으로 접속 후 [가장 최근의 배급 피드 수]에서 항목을 수정할 수 있습니다….

  • 워드프레스 핑백 트랙백이란? 비활성화 방법 2가지

    핑백과 트랙백은 내 워드프레스 콘텐츠를 다른 웹사이트에 알리는 기술입니다. 하지만 두 가지 기능은 많은 단점을 가지고 있습니다. 워드프레스 핑백과 트랙백을 사용했을 경우 장점과 치명적인 단점에 대해 알아 보겠습니다. 워드프레스 홈페이지 활용 팁 핑백과 트백백 기능과 어떤 점에서 다른지와 미사용 방법과 왜 사용을 지양하는지 알아 보겠습니다. 1. 워드프레스 트랙백이란? 트랙백은 콘텐츠에서 링크를 만들 때…

  • Clearfy 자산 관리자 설정 방법

    워드프레스 캐시 플러그인 중 Clearfy 자산 관리자 설정을 사용해서 워드프레스 사이트 내에서 사용하지 않는 CSS 및 JS를 비활성화 할 수 있습니다. 일반적인 캐시 플러그인이 가지고 있지 않은 기능으로 특정 CSS 또는 JS 파일이 무거운 경우 비활성화를 진행할 수 있습니다. 1. Clearfy 자산 관리자 경로 워드프레스 관리자 대시보드에서 좌측 상단 [사이트 방문]을 클릭합니다. 상단의…

  • WordPress Plugin: 정의와 역할 | 워드프레스 필수 플러그인 3가지 기준

    WordPress Plugin은 웹사이트에 다양한 기능을 추가할 수 있는 확장 도구입니다. 보안, 성능 최적화, SEO, 백업 등 핵심적인 기능 대부분이 플러그인을 통해 구현되며, 어떤 플러그인을 선택하고 조합하느냐에 따라 사이트의 완성도가 달라집니다. 이 페이지에서는 워드프레스 플러그인의 정의와 역할을 정리하고, 실제 운영에 꼭 필요한 7가지 필수 플러그인 요소를 소개합니다. ✅ WordPress Plugin이란 무엇인가? 워드프레스 플러그인은 기본…