WordPress에서 WebP 이미지가 작동하는 방식

우리는 이미 웹 사이트의 로딩 속도가 검색 엔진에 웹사이트 를 잘 배치하는 데 있어 핵심 요소라고 한 번 이상 언급한 바 있습니다. Google Speed에서 최고에 도달할 필요는 없지만 이미지 최적화와 관련된 모든 노력은 SEO를 개선하는 데 특히 중요합니다.

워드프레스 커뮤니티에서도 이를 잘 알고 있고, 이를 위해 최신 버전 5.8에서는 WebP 이미지 형식을 지원하는 기능을 추가했습니다.

WebP 이미지란?

WebP는 2010년 Google에서 PNG 및 JPG와 같은 형식의 대안으로 개발한 이미지 형식으로, 유사한 이미지 품질을 유지하면서 훨씬 작은 파일 크기를 생성합니다. 다른 형식과 달리 WebP는 손실 및 무손실 압축, 투명도 및 애니메이션을 지원합니다.

이러한 기능에도 불구하고 WebP는 항상 대안보다 작은 파일 크기를 제공합니다. 이러한 이미지 형식에 대한 Google 비교 연구에서 WebP 손실 이미지는 평균적으로 JPG보다 30% 작고 PNG보다 25% 작은 것으로 나타났습니다.

또한 웹사이트의 최적화 수준을 평가하는 Google PageSpeed ​​Insights에서는 웹사이트의 로딩 속도를 향상시킬 수 있는 기회 중 하나로 최신 이미지 형식을 사용할 것을 권장합니다.

WebP에 모든 이미지를 포함해야 하는지 여부를 고려할 때 가질 수 있는 질문 중 하나는 현재 다양한 브라우저에 대한 지원입니다. 마지막으로 원하는 것은 독자가 이미지를 제대로 볼 수 없도록 하는 것입니다.

그리고 각자의 지지도가 높아지고 있는 것이 현실입니다. 현재 우리는 이미 95% 지원에 대해 이야기하고 있습니다.

이미지를 WebP로 변환하는 방법

WebP 이미지를 라이브러리에 업로드하려면 분명히 먼저 해당 형식의 이미지가 있어야 합니다. 이미지 뱅크에서 이미지를 다운로드하면 반드시 JPEG 또는 PNG 형식으로 다운로드됩니다. 따라서 첫 번째 작업은 이미지를 해당 형식으로 변환하는 것입니다. 어떤 대안이 있습니까?

이미지 디자인 도구

Sketch, Adobe Photoshop 또는 Cloudinary와 같은 일부 이미지 디자인 도구에는 WebP 형식으로 이미지를 저장하는 옵션이 포함되어 있습니다. 변환하려는 이미지를 연 다음 새 형식으로 저장하는 것만 큼 간단합니다.

그러나 이것이 귀하의 경우가 아니라면 아래에서 볼 수 있듯이 무료 대안이 있으므로 걱정하지 마십시오.

공식 Google 도구

또 다른 옵션은 Linux, Widows 또는 Mac용 도구인 cwebp 를 다운로드하여 PNG 또는 JPG 이미지를 WebP로 변환하는 것입니다. 다운로드 및 설치가 완료되면 지침을 직접 실행하여 컴퓨터의 모든 이미지를 변환할 수 있습니다. 예를 들어 다음 명령을 사용하여 PNG 이미지 파일을 품질 범위가 80인 WebP 이미지로 변환할 수 있습니다.

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

많은 이미지를 동시에 변환해야 하는 경우 이 문서에서는 대규모 이미지 집합을 변환할 수 있도록 Unix 계열 환경(예: macOS 또는 Ubuntu)에서 지침을 설명합니다.

그리고 같은 기사에서 imagin-webp 도구를 사용하여 Node.js로 변환을 프로그래밍하는 대안에 대해서도 설명합니다.

온라인 변환기

한 줄의 코드를 작성하지 않으려는 경우 또 다른 대안은 온라인 이미지 변환기를 사용하는 것입니다. 인터넷 검색은 다음을 포함하여 긴 변환기 목록을 쉽게 불러옵니다.

• 이지프 웹
• 클라우드 변환
• 전환
• 온라인 변환
• 자유변환

모두 이미지를 업로드하고 변환을 수행하고 변환된 파일을 다운로드하기만 하면 됩니다.

워드프레스 플러그인

마지막으로 아래에서 설명하겠지만 WordPress 사이트에 이미지를 업로드할 때 이미지를 WebP 형식으로 변환하는 플러그인도 있습니다.

WebP 이미지를 미디어 라이브러리에 업로드하는 방법

이 형식의 이미지가 있으면 평소와 같이 WordPress 미디어 라이브러리에 업로드할 수 있지만…

작동하지 않습니다! 적어도 나에게는 그렇지 않았다. 현재 사용 중인 호스팅 제공업체에 따라 동일한 문제에 직면할 수 있습니다.

WordPress에는 보안상의 이유로 사이트에 업로드할 수 있는 MIME 파일 형식에 대한 기본 제공 제한이 있습니다. MIME은 Multipurpose Internet Mail Extensions의 약자입니다. MIME 유형은 브라우저 및 기타 인터넷 장치에서 페이지와 연결된 콘텐츠 유형을 결정하는 데 사용됩니다. 예를 들어 페이지에 .png 파일과 .jpeg 파일이 있는 경우 브라우저는 MIME 유형(파일 확장자가 아님)을 통해 두 파일을 비디오나 다른 파일 유형이 아닌 이미지로 처리해야 한다는 것을 알게 됩니다.

기본적으로 WordPress는 등록된 MIME 유형 목록을 wp-includes/functions.php 에 저장합니다. 그러나 인식된 모든 MIME 유형을 업로드할 수 있는 것은 아닙니다.

WebP의 경우와 같이 이 미리 정의된 목록 외부의 확장자를 가진 파일을 업로드하려고 하면 위의 오류 메시지가 표시됩니다.

호스팅 회사의 문서에서 이 새로운 MIME 유형을 업로드하는 방법을 수정하는 몇 가지 대안을 찾을 수 있습니다. 이것은 일반적으로 추가 파일 유형을 추가하거나 파일을 직접 수정할 수 있는 플러그인을 사용하거나 다음 코드와 함께 자체 플러그인을 사용하는 것입니다.

 function nelio_custom_upload_mimes( $existing_mimes ) { $existing_mimes['webm'] = 'image/webm'; return $existing_mimes; } add_filter( 'mime_types', 'nelio_custom_upload_mimes' );

또는 다음 코드 줄을 추가하여 wp-config.php 파일을 수정합니다.

 define( 'ALLOW_UNFILTERED_UPLOADS', true );

필요한 수정을 했으면 이미지를 업로드할 수 있습니다. 다음 시도…

글쎄, 그것도 불가능 할 것 같습니다 ...

이 경우 WordPress 포럼에서 논의된 것처럼 일부 솔루션은 imagick 라이브러리가 설치되었는지 확인하고 서버를 재부팅하는 것이었습니다. 다른 사람들의 경우(내 경우처럼) 이미지를 로드하는 유일한 방법은 이미지 로드 패널 하단에 있는 브라우저 업로더 링크를 사용하는 것이었습니다.

그리고 짜잔 , 내 WebP 이미지가 업로드되었습니다!

이미지를 WebP로 변환하는 WordPress 플러그인

나는 이미 이 WebP 형식의 이미지를 가질 때의 공간과 부하 절약에 대해 이야기했습니다. 그리고 문제는 이미 서버에 업로드한 모든 이미지를 변환하는 방법을 생각할 때 발생합니다. 좋은 소식은 WordPress에서 대부분의 경우 이 작업을 수행할 수 있는 여러 플러그인이 있다는 것입니다.

이뿐만 아니라 라이브러리에 이미지를 업로드하기 전에 걱정할 필요 없이 이미지를 WebP로 강제 변환하는 기능도 있습니다. 가장 잘 알려진 것은 다음과 같습니다.

• EWWW 이미지 최적화
• 웹피 익스프레스
• 짧은 픽셀
• 상상하다
• 옵티몰
• 미디어용 WebP변환기

마지막으로 주요 WordPress 호스팅 회사는 웹사이트에 최적화된 이미지를 갖는 것의 중요성을 매우 잘 알고 있습니다. 이러한 이유로 그들 중 일부는 이미 라이브러리에 WebP에 업로드하는 이미지를 자동으로 생성하는 책임이 있는 서버에 내장된 자체 플러그인을 제공하므로 항상 지원하는 브라우저에 제공됩니다. 예를 들어 Siteground의 SG Optimizer 플러그인의 경우입니다.

결론

WebP는 빠르고 효율적이며 많은 추진력을 얻고 있습니다. WordPress 및 브라우저에서 대량 채택이 예상되는 것보다 훨씬 더 가깝습니다. 우리는 WordPress가 뒤처지지 않고 WebP 이미지 형식을 지원하여 웹사이트의 SEO를 최적화할 수 있다는 점을 기쁘게 생각합니다.

Unsplash의 정박지 이미지 .