이 오픈 소스 이미지 편집 도구로 시작하여 시간과 공간을 절약하십시오.

https://opensource.com/article/20/4/webp-image-compression 

WebP는 2010 년에 Google에서 개발 한 이미지 형식으로 웹상의 이미지에 대해 우수한 무손실 및 손실 압축을 제공합니다. WebP를 사용하여 웹 개발자는 사이트 속도를 향상 시키는 더 작고 풍부한 이미지를 만들 수 있습니다. 더 빠른 로딩 웹 사이트는 사용자 경험과 웹 사이트의 마케팅 효과에 중요합니다.

모든 기기와 사용자에서 최적의 로드를 위해 사이트의 이미지는 파일 크기가 500KB를 넘지 않아야 합니다.

WebP 무손실 이미지는 보통 PNG에 비해 크기가 최소 25 % 더 작습니다. WebP 손실 이미지는 동일한 SSIM (구조적 유사성) 품질 지수에서 비슷한 JPEG 이미지보다 25-34 % 더 작습니다.

무손실 WebP는 투명성도 지원합니다. 손실 RGB 압축이 허용되는 경우 손실 WebP는 투명도를 지원하여 일반적으로 PNG에 비해 3 배 더 작은 파일 크기를 제공합니다.

Google은 애니메이션 GIF에서 손실 WebP로 변환 된 이미지의 파일 크기가 64 % 감소하고 무손실 WebP로 변환하면 19 % 감소했다고보고합니다.

WebP 파일 형식은 RIFF (자원 교환 파일 형식) 문서 형식을 기반으로 합니다. 파일 서명은 hexdump에서 볼 수 있듯이 52 49 46 46 (RIFF)입니다.

$ hexdump --canonical pixel.webp
00000000  52 49 46 46 26 00 00 00  [...]  |RIFF&...WEBPVP8 |
00000010  1a 00 00 00 30 01 00 9d  [...]  |....0....*......|
00000020  0e 25 a4 00 03 70 00 fe  [...]  |.%...p...`....|
0000002e 

독립형 libwebp 라이브러리는 WebP 사양에 대한 참조 구현 역할을 하며 Google의 Git 저장소 또는 tarball에서 사용할 수 있습니다.

WebP 형식은 전 세계적으로 사용되는 웹 브라우저의 80 %와 호환됩니다. 이 글을 쓰는 시점에서 Apple의 Safari 브라우저와 호환되지 않습니다. 이에 대한 해결 방법은 WebP와 함께 JPG / PNG를 제공하는 것이며 이를 수행하는 방법과 Wordpress 플러그인이 있습니다.

이것이 왜 중요합니까? 

제 일의 일부는 우리 조직의 웹 사이트를 디자인하고 유지하는 것입니다. 웹 사이트는 마케팅 도구이고 사이트 속도는 사용자 경험의 중요한 측면이므로 속도를 높이기 위해 노력하고 있으며 이미지를 WebP로 변환하여 이미지 크기를 줄이는 것이 좋은 솔루션이었습니다.

페이지 중 하나의 속도를 테스트하기 위해 저는 Apache 2.0 라이선스로 출시 된 Lighthouse에서 제공하는 web.dev (https://github.com/GoogleChrome/lighthouse)로 전환했습니다.

공식 설명에 따르면 "Lighthouse는 웹 페이지의 품질을 개선하기 위한 오픈 소스 자동화 도구입니다. 공개 또는 인증이 필요한 모든 웹 페이지에 대해 실행할 수 있습니다. 성능, 접근성, 점진적 웹 앱, SEO에 대한 감사가 있습니다. 등. Chrome DevTools, 명령 줄 또는 노드 모듈에서 Lighthouse를 실행할 수 있습니다. Lighthouse에 감사 할 URL을 제공하고 페이지에 대해 일련의 감사를 실행 한 다음 얼마나 잘 작동하는지에 대한 보고서를 생성합니다. 여기에서 실패한 감사를 페이지 개선 방법에 대한 지표로 사용하십시오. 각 감사에는 감사가 중요한 이유와 이를 수정하는 방법을 설명하는 참조 문서가 있습니다. "

더 작은 WebP 이미지 만들기 

테스트 한 페이지는 세 개의 이미지를 반환했습니다. 생성 된 보고서에서 권장 사항과 목표를 제공합니다. 저는 650KB라고 보고 한 "앱 그래픽"이미지를 선택했습니다. WebP로 변환하면 589KB를 절약하고 이미지를 61KB로 줄여야 합니다. Photoshop에서 이미지를 변환하고 기본 WebP 설정으로 저장했는데 44.9KB의 파일 크기가 반환되었습니다. 예상보다 낫다! Photoshop의 스크린 샷에서 볼 수 있듯이 이미지는 시각적 품질에서 동일하게 보입니다.

왼쪽 : 650KB (실제 크기). 오른쪽 : 589KB (변환 후 대상 크기).

물론 오픈 소스 이미지 편집기 김프는 WebP를 내보내기 형식으로도 지원합니다. 품질 및 압축 프로필에 대한 여러 옵션을 제공합니다.

다른 이미지를 확대 한 모습 :

JPG에서 변환 된 PNG (왼쪽) 및 WebP (오른쪽)는 WebP가 크기는 작지만 시각적 품질이 뛰어납니다.

WebP로 이미지로 변환 

Linux의 이미지를 JPG / PNG에서 WebP로 변환하려면 명령 줄을 사용할 수도 있습니다.

명령 줄에서 cwebp를 사용하여 PNG 또는 JPG 이미지 파일을 WebP 형식으로 변환합니다. 다음 명령을 사용하여 PNG 이미지 파일을 품질 범위 80의 WebP 이미지로 변환 할 수 있습니다.

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

또는 배포판의 소프트웨어 저장소에서 사용할 수 있는 Image Magick를 사용할 수도 있습니다. 변환을 위한 하위 명령은 convert이며 입력 및 출력 파일 만 있으면 됩니다.

convert pixel.png pixel.webp 

편집기를 사용하여 이미지를 WebP로 변환 

사진 편집기를 사용하여 이미지를 WebP로 변환하려면 김프를 사용하세요. 버전 2.10부터는 기본적으로 WebP를 지원합니다.

Photoshop 사용자의 경우 Photoshop에 기본적으로 포함되어 있지 않으므로 파일을 변환하려면 플러그인이 필요합니다. Apache License 2.0 라이선스에 따라 출시 된 WebPShop 0.2.1은 애니메이션을 포함한 WebP 이미지를 열고 저장하기 위한 Photoshop 모듈이며 https://github.com/webmproject/WebPShop에서 찾을 수 있습니다.

플러그인을 사용하려면 Photoshop 플러그인 디렉토리의 bin 폴더에 있는 파일을 넣으세요.

Windows x64—C:\Program Files\Adobe\Adobe Photoshop\Plug-ins\WebPShop.8bi

Mac—Applications/Adobe Photoshop/Plug-ins/WebPShop.plugin

Wordpress의 WebP 

많은 웹 사이트가 Wordpress를 사용하여 구축되었습니다 (제가 사용하는 것입니다). 그렇다면 Wordpress는 WebP 이미지 업로드를 어떻게 처리합니까? 이 글을 쓰는 시점에서는 그렇지 않습니다. 그러나 물론 이를 활성화하는 플러그인이 있으므로 PNG / JPG 이미지 (Apple 군중 용)와 함께 두 WebP를 모두 제공 할 수 있습니다.

또는 Marius Hosting의 안내는 다음과 같습니다.

"WebP 이미지를 Wordpress에 직접 업로드하는 것은 어떻습니까? 이것은 쉽습니다. 테마 functions.php 파일에 텍스트 줄을 추가하기 만하면 됩니다. Wordpress는 기본적으로 WebP 파일보기 및 업로드를 지원하지 않지만 어떻게 작동 시킬 수 있는지 설명하겠습니다. Wordpress 관리 영역에 로그인하고 Appearance / Theme Editor로 이동하여 functions.php를 찾은 다음 파일 끝에 아래 코드를 복사하여 붙여 넣고 저장합니다.

//** *Enable upload for webp image files.*/ function webp_upload_mimes($existing_mimes) { $existing_mimes['webp'] = 'image/webp'; return $existing_mimes; } add_filter('mime_types', 'webp_upload_mimes'); 

미디어 / 라이브러리로 이동할 때 썸네일 이미지 미리보기를 보려면 동일한 functions.php 파일에 아래 코드를 추가해야 합니다. functions.php 파일을 찾으려면 Appearance / Theme Editor로 이동하여 functions.php를 찾은 다음 파일 끝에 아래 코드를 복사하여 붙여 넣고 저장하십시오. "

//** * Enable preview / thumbnail for webp image files.*/ function webp_is_displayable($result, $path) { if ($result === false) { $displayable_image_types = array( IMAGETYPE_WEBP ); $info = @getimagesize( $path ); if (empty($info)) { $result = false; } elseif (!in_array($info[2], $displayable_image_types)) { $result = false; } else { $result = true; } } return $result; } add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2); 

WebP와 미래 

WebP는 강력하고 최적화 된 형식입니다. 더보기 좋고 압축률이 더 좋으며 대부분의 다른 일반적인 이미지 형식의 모든 기능을 갖추고 있습니다. 

기다릴 필요가 없습니다. 

지금 바로 사용하세요.