smarti,스마트아이

WebP 타이틀 이미지

구글(google)이 만든 이미지 포맷 WebP(웹피)

WebP는 구글에서 만든 이미지 파일 포맷으로 웹피라고 한다. 웹사이트의 페이지를 보다 빠르고, 더 작고 풍부한 이미지를 만들 수 있다. WebP는 일반적으로 이미지 품질의 손실없이, 손실 압축 방식인 JPEG 나 무손실 압축 방식인 PNG, GIF 보다 평균 30% 더 많은 압축을 달성, 파일 용량이 현저히 작아지는 특징이 있다.

 

일반적으로 사진은 jpg, 로고는 png, 애니메이션은 gif 포맷을 사용했지만 앞으로는 웹피 하나로 대부분의 이미지 포맷을 대체할 수 있을수도 있다. 아직은 WebP 이미지 포맷을 지원하지 않는 웹브라우저들이 있어 지금은 적극적으로 사용하지 못한다. 대표적인 주요 브라우저 중 크롬, 엣지, 파이어폭스, 오페라, 사파리 등은 사용할 수 있지만, IE(인터넷 익스플로러)에서는 WebP를 지원하지 않고 있다.

 

아래의 이미지는 WebP로 포맷한 이미지이다. IE11 이하 사용자라면 이미지 대신 대체 텍스트가 보일 것이다.

WebP 포맷 이미지

WebP를 기본적으로 지원하는 브라우저

◆ WebP 손실 지원

    - Google Chrome(데스크탑) 17+

    - Android 용 Google Chrome 버전 25 이상

    - Microsoft Edge 18+

    - Firefox 65 이상

    - Opera 11.10 이상

    - 기본 웹 브라우저, Android 4.0 이상(ICS)

◆ WebP 손실, 무손실 압축 및 알파 지원

    - Google Chrome(데스크탑) 23+

    - Android 용 Google Chrome 버전 25 이상

    - Microsoft Edge 18+

    - Firefox 65 이상

    - Opera 12.10 이상

    - 기본 웹 브라우저, Android 4.2이상 (JB-MR1)

    - 페일 문 26+

◆ WebP 애니메이션 지원

    - Google Chrome(데스크탑 및 Android) 32+

    - Microsoft Edge 18+

    - Firefox 65 이상

    - Opera 19 이상

포토샵(Photo Shop)에서 WebP 이미지 포맷 사용하기

아직은 포토샾에서는 지원이 안되고 있어, 웹피(WebP) 이미지 포맷을 사용할 수 있게 해주는 플러그인을 설치해 보자.

이름은 WebShop 플러그인이며 개인 개발자분이 무료로 배포하고 있다고 한다.

https://github.com/webmproject/WebPShop/releases

Releases · webmproject/WebPShop

위 다운로드 페이지에 들어가서, 64비트 PhotoShop은 베타 버젼, 32비트는 알파 버전을 받으면 된다.

다운로드 창

윈도우 또는 맥 버전 선택 창 

해당 운영체제에 맞는 파일을 다운로드 받는다.

포토샵 플러그인 설치 및 실행

설치는 다음의 경로에 플러그인 파일을 넣어 주기만 하면 된다.

다음은 64비트 기준 포토샵 플러그인 경로

C:\Program Files\Adobe\Adobe Photoshop CC 2018\Plug-ins

 

포토샵을 실행하고 이미지 작업 후 '저장' 또는 '다른 이름으로 저장'을 클릭하면 다음과 같이 파일형식을 선택할 수 있다.

저장시 파일형식 선택 창

이미지 파일 형식을 선택하고 클릭하면 다음과 같은 Quality 나 Preview 에 용량을 볼 수 있다.

WebPShop 옵션 창

포토샵을 사용하지 않고, 기존 png 등의 파일을 Webp로 변환하기

image.online-convert.com/convert-to-webp

Convert images to WebP

온라인 convert 사이트

기존 이미지를 WebP 로, WebP를 png 등으로 변환 시킬수 있다.

파일을 올리고 'Start conversion' 클릭하면, 진행바에서 진행률을 볼 수 있고, 다 진행이 되면 다운로드 화면으로 이동된다.

 

[세상살이] - 크롬 확장 프로그램으로 마우스 우클릭 해제

크롬 확장 프로그램으로 마우스 우클릭 해제

[세상살이] - 바둑에 담긴 지혜

바둑에 담긴 지혜

[세상살이] - 앤디포스, 코로나 & 독감 동시 진단키트

앤디포스, 코로나 & 독감 동시 진단키트

[코딩공부] - HTML5 기본정리 1

HTML5 기본정리 1

[디자인공부] - 포토샵으로 청바지 천 효과 문자 만들기

포토샵으로 청바지 천 효과 문자 만들기