WebP 파일이란?

Author:jarvis Hours 등록일 Hours 업데이트

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

  • Cache Enabler: 간편한 설정의 워드프레스 캐시 플러그인

    Published:jarvis

    워드프레스 사이트는 플러그인 수가 일정 수준을 넘기 시작하면 속도 저하 현상이 나타날 수 있습니다. 기능과 성능을 모두 만족시키는 플러그인을 찾기란 쉽지 않으며, 속도 문제는 방문자의 이탈과 테크니컬 SEO에서의 불이익으로 이어질 수 있습니다. 이 때문에 캐시 플러그인은 선택이 아닌 필수로 자리 잡았습니다. 이 중에 Cache Enabler는 KeyCDN에서 제공하는 간편한 설정의 무료 캐시 플러그인으로, 워드프레스를…

  • 워드프레스 관리자 페이지 접속 및 개요

    Published:jarvis

    워드프레스 홈페이지를 만들기 위해 도메인을 구매하고 호스팅 서비스를 결제 후 워드프레스 설치(cPanel 워드프레스 설치)까지 마무리 되었다면 워드프레스 관리자 페이지 메뉴에 접속하게 됩니다. WP 관리자, WP 관리자 패널, WP 관리자 대시보드 등으로 부르는 워드프레스 관리자 대시보드는 워드프레스 웹 사이트의 제어판입니다. 워드프레스를 이용한 전자상거래, 블로그, 회사 소개 사이트 등 다양한 용도로 활용하는 워드프레스 CMS에서 제품을…

  • [WP] 워드프레스 SSL 보안인증서 적용 방법

    Published:jarvis

    워드프레스를 포함한 웹 사이트에서 SSL 보안인증서는 필수가 되었습니다. 워드프레스 SSL 보안인증서 적용 방법과 TLS/SSL 인증서가 필요한 이유에 대해 알아 보겠습니다. 목차1. WebP 파일 정의2. 배경과 용도3. 지원 브라우저4. JPEG(&PNG) vs WebP File5. 웹피와 워드프레스1. 워드프레스 SSL 보안인증서 적용 방법 첫 번째 SSL 인증서가 서버에 설치되어야 합니다. 서버에 보안인증서가 설치되어야만 워드프레스 HTTPS 적용을 할…

  • CDN이란? CDN 사용 이유와 이점 5가지

    Published:jarvis

    CDN(Content delivery network:콘텐츠 전송 네트워크)은 콘텐츠를 효율적으로 전송하기 위해 여러 서버 위치에 데이터를 저장해서 제공하는 시스템입니다. HTML, CSS, 자바스크립트, 이미지 및 동영상 등의 콘텐츠를 신속하게 전달할 수 있습니다. 목차1. WebP 파일 정의2. 배경과 용도3. 지원 브라우저4. JPEG(&PNG) vs WebP File5. 웹피와 워드프레스 CDN 사용 이유와 효과 1. 지리적 이점 원본 서버(Origin Server)와 떨어져…

  • [WP] 테마 or 플러그인 설치 중 발생하는 워드프레스 FTP 오류 해결 방법

    Published:jarvis

    설치형 워드프레스 기반 웹 사이트를 운영하면서 테마 또는 플러그인을 설치하는 중 워드프레스 FTP 오류 메시지로 설치에 시간 소요가 되는 경우가 있습니다. 두 가지 해결 방법이 있으며 한 가지를 선택해서 설정할 수 있습니다. ※ FTP 오류 메시지 내용 에러: 서버에 연결하는 중에 에러가 생겼습니다. 설정이 올바른지 확인하십시요. 목차1. WebP 파일 정의2. 배경과 용도3. 지원…

  • Perfmatters 플러그인 리뷰 & 가이드: 3년 동안 사용한 워드프레스 성능 최적화 설정 방법

    Published:I-var uknew

    Perfmatters 플러그인은 워드프레스 최적화 플러그인 중에서도 가볍고 강력한 퍼포먼스를 제공하는 도구입니다. 불필요한 스크립트와 리소스를 손쉽게 제어해 페이지 로딩 속도를 개선하고, 서버 부하를 최소화할 수 있습니다. 3년 이상 사용하면서 느낀 점은, 단순한 속도 향상을 넘어 사이트 전체의 안정성과 관리 편의성을 높여준다는 점이었습니다. 현재 이 웹사이트는 WP Rocket Cache 플러그인과 Perfmatters를 함께 사용하고 있습니다. 이…