조아마시

쓸모 있는 상세페이지 만들기

웹개발/html

WebP 이미지 형식

joamashi 2024. 8. 4. 15:50

WebP 이미지 형식은 Google에서 개발한 차세대 이미지 포맷으로, 기존의 JPEG, PNG 등에 비해 압축률이 뛰어나 파일 크기를 크게 줄일 수 있는 것이 가장 큰 특징입니다. 웹 페이지의 로딩 속도를 향상시키고, 데이터 사용량을 절약하는 데 효과적이기 때문에 많은 웹 개발자들에게 주목받고 있습니다.

WebP 탄생 배경

  • 웹 성능 향상: 웹 페이지의 로딩 속도가 느려 사용자 이탈이 증가하면서, 더욱 효율적인 이미지 압축 기술에 대한 필요성이 커졌습니다.
  • 모바일 시대 도래: 스마트폰과 태블릿 PC의 보급으로 모바일 인터넷 사용이 급증하면서, 데이터 사용량을 줄일 수 있는 이미지 형식에 대한 요구가 높아졌습니다.

WebP의 주요 특징

  • 뛰어난 압축률: 동일한 화질을 유지하면서도 JPEG보다 평균 25% 이상, PNG보다 2배 이상 파일 크기를 줄일 수 있습니다.
  • 다양한 이미지 형식 지원: 투명도, 애니메이션, 고품질 이미지 등 다양한 이미지 형식을 지원합니다.
  • 로열티 무료: 누구나 자유롭게 사용할 수 있는 오픈 소스 형식입니다.

WebP의 발전 과정

  • 초기 개발: Google에서 웹 페이지의 성능 향상을 목표로 WEBP 형식을 개발하기 시작했습니다.
  • 오픈 소스 공개: 개발된 WebP형식을 오픈 소스로 공개하여 누구나 자유롭게 사용할 수 있도록 했습니다.
  • 브라우저 지원 확대: 초기에는 Chrome에서만 지원되었지만, 점차 Firefox, Edge, Safari 등 주요 브라우저에서도 지원이 확대되었습니다.
  • 꾸준한 개선: 압축률 향상, 새로운 기능 추가 등 꾸준한 개선을 통해 더욱 효율적인 이미지 형식으로 발전하고 있습니다.

WebP가 PNG보다 좋은 점

  • 압축률: WebP는 PNG보다 훨씬 높은 압축률을 제공합니다. 즉, 동일한 화질을 유지하면서 파일 크기를 훨씬 줄일 수 있어 웹 페이지 로딩 속도를 빠르게 만들고, 데이터 사용량을 절약할 수 있습니다.
  • 다양한 이미지 형식 지원: WebP는 투명도, 애니메이션, 고품질 이미지 등 다양한 이미지 형식을 지원합니다. PNG는 투명도를 지원하지만, WebP는 더욱 다양한 기능을 제공합니다.
  • 로열티 무료: WebP는 누구나 자유롭게 사용할 수 있는 오픈 소스 형식입니다. 별도의 라이선스 비용 없이 사용할 수 있다는 장점이 있습니다.

WebP를 사용해야 하는 이유

  • 빠른 웹 페이지 로딩 속도: WebP이미지를 사용하면 웹 페이지의 이미지 로딩 시간을 단축하여 사용자 경험을 향상시킬 수 있습니다.
  • 데이터 절약: 파일 크기가 작아 모바일 환경에서 데이터 사용량을 줄일 수 있습니다.
  • 검색 엔진 최적화 (SEO): 빠른 웹 페이지는 검색 엔진에서 좋은 평가를 받아 검색 순위 상승에 도움이 될 수 있습니다.
  • 미래 지향적인 선택: WEBP는 점차적으로 많은 브라우저에서 지원되고 있으며, 웹 이미지 형식의 미래 표준으로 자리매김할 가능성이 높습니다.

WebP이미지를 사용하는 방법

WebP이미지를 사용하려면 다음과 같은 방법을 활용할 수 있습니다.

  • 이미지 변환:
    • 온라인 도구: CloudConvert, Squoosh 등 다양한 온라인 도구를 이용하여 기존 이미지 파일(JPEG, PNG 등)을 WEBP 형식으로 변환할 수 있습니다.
    • 이미지 편집 프로그램: Adobe Photoshop, GIMP 등의 이미지 편집 프로그램에서 '다른 이름으로 저장' 기능을 통해 WEBP 형식으로 저장할 수 있습니다.
  • 웹 서버 설정:
    • 웹 서버(Apache, Nginx 등)를 설정하여 이미지 요청 시 자동으로 WebP형식으로 변환하여 제공하는 기능을 활용할 수 있습니다.
  • 웹 개발 도구:
    • HTML, CSS를 사용하여 웹 페이지에 WebP이미지를 삽입하고, 브라우저 호환성을 위해 다른 형식의 이미지를 함께 제공할 수 있습니다.

WebP사용 시 주의사항

  • 브라우저 호환성: 모든 브라우저에서 WebP이미지를 완벽하게 지원하지 않을 수 있습니다. 따라서 웹 페이지에 WEBP 이미지를 사용할 때는 다른 형식의 이미지를 함께 제공하여 호환성 문제를 해결해야 합니다.
  • 이미지 편집 도구: WEBP를 지원하는 이미지 편집 도구가 아직 PNG만큼 다양하지 않을 수 있습니다.

주요 브라우저 지원 현황

현재 대부분의 최신 브라우저는 WebP를 기본적으로 지원합니다.

  • Chrome, Edge, Firefox, Opera, Safari: 대표적인 모던 브라우저들은 WebP를 잘 지원합니다.
  • Internet Explorer: 구형 브라우저인 IE는 WebP를 지원하지 않습니다.

WebP의 미래

  • 웹 표준으로의 자리매김: WEBP는 점차적으로 웹 표준으로 자리매김하며, 웹 개발의 중심적인 이미지 형식으로 사용될 것으로 예상됩니다.
  • 다양한 분야 확장: 웹 페이지뿐만 아니라 모바일 앱, 온라인 스토어 등 다양한 분야에서 WEBP가 활용될 것으로 전망됩니다.

https://developers.google.com/speed/webp?hl=ko

 

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

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

developers.google.com

 

728x90

'웹개발 > html' 카테고리의 다른 글

[HTML] <picture>, <source> 태그 사용 가이드  (0) 2024.08.07
avif 이미지 형식  (0) 2024.08.07