WebP 이미지 형식 사용에 대한 완전한 지침

WebP, 또는 비공식적으로 거친, 약 5 년 전 Google 개발자가 소개 한 이미지 형식입니다. 웹 디자이너 나 이미지 파일 크기를 줄이거 나 최적화하려고하는 개발자라면 WebP가 할 수있는 것이 당신의 미소를 짓게됩니다..

간단히 말하면, 여기 새로 소개되었지만 여전히 멋진 이미지 형식에 대해 알아야 할 중요한 것들이 있습니다 :

• WebP는 .webp의 파일 확장자를 사용합니다..
• WebP는 손실 압축과 무손실 압축을 모두 채택합니다..
• WebP 손실 이미지는 잠재적입니다. JPEG보다 25-34 % 작음.
• WebP 손실없는 이미지는 잠재적으로 가능합니다. PNG에 비해 25 % 더 작음.
• WebP는 무손실 투명도, 즉 알파 채널이있는 PNG를 지원합니다..
• WebP는 애니메이션을 지원합니다. 즉 애니메이션 GIF.

요컨대, WebP는 JPEG, GIF, PNG의 이미지 파일 크기를 크게 줄입니다. 우리가 재미있는 것들에 들어가기 전에 체크 아웃해야하는 WebP에 대해 다시 생각해 보겠습니다..

실험

웹에서의 주장에 대한 가장 좋은 점은 항상 진실성과 진정성을 확인하기위한 실험을 할 수 있다는 것입니다. 내가 알아 낸 몇 가지 실험이 있습니다. 이미지가 얼마나 작은 지 알 수 있습니다. 다양한 이미지 형식 (JPEG, PNG 및 GIF)에서 WebP로 변환 된 후.

1. JPEG - 손실 이미지

여기 Pexels에서 가져온 임의의 JPEG 이미지가 있습니다.. 원본 파일 크기 - 165kb. ↓

JpegMini로 이미지 최적화. 새 파일 크기 - 101kb. ↓

마지막으로 동일한 이미지가 WebP 형식으로 변환됩니다.. 최종 파일 크기 - 70kb. ↓

참고 사항 : 다음은 동일한 이미지가 다음 형식으로 변환 된 경우의 파일 크기입니다.

• GIF - 285kb
• PNG 8 - 241.2kb
• PNG 24 - 657.6kb

2. PNG - 무손실 이미지

이제 PNG와 함께 투명성을 시험해 봅시다. (출처). 원본 파일 크기 - 587kb. ↓

tinypng로 최적화 된 이미지는 다음과 같습니다.. 새 파일 크기 - 278kb. ↓

마지막으로 WebP 형식으로 변환 된 이미지. 최종 파일 크기 - 112kb. ↓

3. 애니메이션 GIF

WebP로 변환 할 때 JPEG 이미지는 165kb에서 70kb로, PNG 이미지는 587kb에서 112kb로 바뀌 었습니다..

애니메이션 GIF를 어떻게 보는지 살펴 보겠습니다.

• 원본 파일 크기 - 6.8MB
• WebP 파일 크기 - 6.3MB

개요:

전체 실험을 요약 한 표는 다음과 같습니다.

	손실 (JPG)	무손실 (PNG)	애니메이션 GIF
기발한	165kb	587kb	6.8MB
도구로 최적화 됨	101kb	278kb	-
WebP 형식	70kb	112kb	6.3MB

수학적 계산에 많은 영향을 미치지 않으면 이러한 수치는 파일 크기가 상당히 줄어든 것을 나타내며 이미지로 판단 할 때 선명도와 해상도 측면에서 차이를 실제로 구분할 수는 없습니다. 더 작고 가벼운 파일 크기와 동일한 수준의 이미지 품질로 WebP는 확실히 조사 할 가치가 있습니다..

도구로 WebP로 변환

이미 선상에 있고 WebP 형식으로 이미지를 공개하고자하는 경우 이미지를이 형식으로 쉽게 변환 할 수있는 방법을 살펴 보겠습니다. 아래에 언급 된 모든 방법은 통제, 사용 편의성 및 편의성 측면에서 다릅니다. 독을 골라주세요..

WebPonize ...에 대한 맥

WebPonize는 아마도 Mac에서 이미지를 WebP 형식으로 변환하는 가장 간단하고 빠른 방법 일 것입니다. 당신이해야 할 일은 단지 당신의 이미지를 WebPonize로 드래그 앤 드롭하면됩니다. ouput, 이전 크기, 크기 및 원본 파일의 축소 비율을 받게됩니다. [WebPonize 다운로드]

웹 페이지 ...에 대한 Windows

Windows를 실행하는 경우 Webpconv는 설치해야하는 응용 프로그램입니다. 또한 휴대용 버전으로 제공되므로 플래시 드라이브에서 독립적으로 실행할 수 있습니다. [Webconv 다운로드]

명령 줄을 사용하여 변환

괴상한 생각이라면 명령 줄을 사용하여 변환을 실행하고 싶을 것입니다.. cwebp JPEG, PNG 또는 TIFF 이미지를 WebP 형식으로 변환하고 dwebp 다시 PNG 형식으로 변환합니다. 이것이 어떻게 작동하는지 보자..

노트 : 다음은 Mac OS X을위한 안내서입니다. Windows 및 Linux 사용자는 여기를 클릭하십시오..

Mac OSX에서 MacPorts 설정하기

먼저 Xcode가 설치되어 있는지 확인한 후 다음 단계를 수행하십시오.

1. MacPorts를 다운로드하여 설치하십시오. Mac에 MacPorts가 이미 설치되어있는 경우 2 단계로 진행하십시오..
2. 쏘다 단말기.
3. 유형 "sudo port selfupdate"라고 입력하고 Enter 키를 누르면 MacPorts가 최신 버전으로 업데이트됩니다..

   

4. 그런 다음 "sudo port install webp"라고 입력하고 Enter 키를 누릅니다. libwebp (WebP 라이브러리).

   

그게 전부 야. 이제 살펴 보겠습니다. 명령 줄을 사용하여 이미지를 WebP로 변환하는 방법.

변환 / 되돌리기 명령

다음과 같은 명령이 있습니다.

I - JPEG / PNG 이미지 파일을 WebP 형식으로 변환

체재: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

예:

cwebp -q 80 example.png -o example.webp 

II - 은밀한 WebP 이미지 파일을 PNG로 다시 보냅니다.

체재: dwebp [WebP_filename] -o [PNG_filename]

예:

dwebp image.webp -o image.png 

더: 다른 방법을 통해 conversi를 사용하는 경우, Grunt 및 Gulp 작업을 사용하여 JPG / PNG 파일을 WebP로 변환하는 방법은 다음과 같습니다.

온라인 도구로 변환

이 작업을 수행하기 위해 운영 체제에 응용 프로그램을 설치하지 않으려면 대신이 온라인 도구를 선택하십시오. 다음은 내가 알게 된 몇 가지 예입니다.

• Online-converter.com
• Webp-convertor.com
• 잠자르

팁: 너라면 구글 웹 온라인 변환 , 당신은 아마 더 많은 옵션을 발견 할 것이다..

포토샵 플러그인

Photoshop을 통해 WebP 형식으로 이미지를 저장할 수있는 Photoshop Plugin이 있다는 것을 알게되어 기쁩니다. 이 플러그인은 Mac OS X (CS 2 - CS 6) 및 Windows (32 비트 및 64 비트)를 지원합니다. [여기에서 플러그인을 다운로드하십시오.]

노트: 그냥 Photoshop CC에서 시도했는지 알아야한다고 생각했습니다. 거기서 일하지 않았다..

WebP 브라우저 지원

마지막으로 호환성에 대해 이야기 해 봅시다. 현재 다음 브라우저 (ref)에서 WebP 형식 이미지를 볼 수 있습니다.

• iOS 용 Chrome / Chrome
• 오페라 / 오페라 미니

별로 행운이 없다. 파이어 폭스 과 원정 여행, 기본적으로 WebP 형식을 지원하지 않습니다. 그러나 WebPJS Javascript 라이브러리를 사용하여 WebP 이미지를 클라이언트 사이트의 dataURI 문자열로 변환.

다른 이미지 형식으로 돌아 가기

지원되지 않는 브라우저로 인해 이미지 오류가 표시되지 않도록하려면 대체 방법을 사용하는 것이 좋습니다. 이 경우 폴백은 JPG 또는 PNG 형식의 이미지로 대체됩니다. 방법은 다음과 같습니다..

  source srcset = "example.webp 1x"type = "image / webp">   

이 코드의 경우, images / complete-guide-to-using-webp-image-format_13.jpg 사용자가 Firefox 또는 Safari를 사용하면로드됩니다..

WebP 이미지 미리보기

Chrome 및 Opera 브라우저에서 WebP 이미지를 미리 볼 수 있습니다. 하지만 로컬 머신에서 실행하고 싶다면 몇 가지 도구가 필요합니다..

Mac 사용자는 WebPQuickLook을 사용하여 Quick Look 기능을 사용하여 WebP 형식 이미지를 미리 볼 수 있습니다 (이미지가 선택되거나 강조 표시된 상태에서 스페이스 바를 누르십시오).

Windows 사용자의 경우 WebPCodec은 파일 탐색기에서 WebP 이미지의 미리보기 미리보기를 표시합니다. WebP와 JPEG가 모두 표시됩니다. 지원되는 특정 Windows OS (Vista, 7, 8)에서 WebP 이미지는 Windows 사진 뷰어에서도 볼 수 있습니다.

더: ReSCR.it은 자동으로 WeBP 형식의 이미지를 제공하며 MaxCDN으로 이미지를 저장하면 사용할 수 있습니다. (더 많은 것을 읽으십시오)

추가 참고 문헌

• 애니메이션 GIF를 WebP로 변환
• WebP 작동 방법
• 컨텐트 협상 수용을 통한 WebP 배포
• WebP를 사용하여보다 빠르고 작고 아름다운 웹
• 웹에 새로운 이미지 형식 배포
• WebP API 문서