WordPress에서 JPG 또는 PNG 대신 WebP 이미지를 제공하는 방법

Google은 인터넷 먹이 사슬의 최상위에 있습니다. 회사는 온라인에서 일어나는 많은 일에 영향을 미치거나 지시합니다. 그리고 그들의 새로운 이미지 형식인 WebP는 이러한 추세를 이어가고 있습니다. 페이지 로드 속도가 점점 더 중요해짐에 따라(주로 Google 페이지 순위 때문에) 개발자와 디자이너는 이미지 압축을 로드 시간을 줄이는 가장 쉬운 방법으로 보고 있습니다. Google의 WebP 이미지는 일반적인 JPG 또는 PNG 이미지보다 ~30% 작게 제공되며 동등한 품질을 유지합니다. 무엇보다도 이미지를 수동으로 WebP로 변환하는 것에 대해 걱정할 필요가 없습니다.

이 기사에서는 기본적으로 아직 지원되지 않지만 WordPress에서 이 새로운 이미지 형식을 사용하는 방법을 보여줍니다.

시작하겠습니다.

YouTube 채널 구독

Optimole을 사용하여 WordPress에서 WebP 제공

이미지 형식인 WebP는 WordPress에서 기본적으로 지원되지 않습니다. .webp 이미지를 업로드할 수 있지만 SVG 파일과 마찬가지로 오류 메시지가 표시됩니다. 그리고 다시 WordPress에서 SVG 파일을 사용하는 것과 같이 플러그인을 통해 WP 사이트를 확대/축소하는 쉬운 해결 방법이 있습니다.

우리가 시도한 WebP 서비스 중에서 가장 좋아하는 것은 Optimole입니다. 우리는 최소한의 조정으로 작동하도록 하는 최고의 행운을 얻었으므로 설정 방법을 안내하고 WordPress 설치 WebP가 가능한 한 고통 없이 호환되도록 하고 싶습니다.

첫째, 분명히 플러그인 자체를 다운로드하여 설치하려고 할 것입니다. WP.org 리포지토리에 있으며 완전히 무료입니다. 이를 지원하는 API 기반 서비스도 마찬가지입니다(어느 정도까지는). PHP를 사용하여 기존 이미지를 WebP로 즉시 변환할 수 있지만 모든 웹호스트가 서버에 해당 권한을 부여하는 것은 아닙니다. 해당 권한이 있는 경우 WebP Express 플러그인을 살펴볼 수도 있습니다. 많은 제어가 가능하지만 원활하게 작동하려면 더 많은 조정이 필요합니다.

WordPress 웹 사이트에 Optimole을 설치하고 활성화하면 Media – Optimole 에서 새 메뉴 옵션을 찾을 수 있습니다.

Optimole API 키

설정이나 구성에 액세스하려면 먼저 Optimole 계정이 있어야 합니다. 이미 설정한 경우 이미 API 키가 있음 버튼을 클릭할 수 있습니다. 그렇지 않은 경우 등록 및 이메일 API 키 . API 키에 대한 기본 계정은 무료이며 해당 계층에서 대략 5,000번의 방문을 받습니다. 그 이상이 필요한 경우 사용 가능한 가격 책정 계층이 있습니다.

Optimole은 방문을 " 귀하의 사이트를 한 번 방문하는 모든 사람 [. . .] 각 사용자는 한 번만 계산됩니다. 그들이 당신의 사이트에서 무엇을 하는지, 얼마나 많은 이미지를 다운로드하는지, 얼마나 많은 페이지를 방문하는지가 중요하지 않습니다. 그것은 단지 한 명의 사용자입니다. 그들이 귀하의 사이트를 떠났다가 같은 날 다시 돌아온다면 그들은 여전히 ​​한 명의 사용자에 불과합니다. "

측정된 방문 횟수가 모두 소진되면 WebP 이미지만 제공되지 않습니다. 이미지 자체는 그렇지 않습니다. 가장 위에 있는 Optimole 대시보드에서 API 키를 찾을 수 있습니다.

WordPress 대시보드에 다시 붙여넣기만 하면 WordPress에서 WebP 이미지를 제공할 수 있습니다.

Optimole WordPress 대시보드

WordPress 대시보드에서 WebP 최적화에 대한 몇 가지 기본 정보를 얻을 수 있습니다. 이를 통해 속도 향상이 실제로 얼마나 성공적인지 문제를 해결하고 측정할 수 있습니다. 이렇게 하면 다양한 설정을 조정할 수 있습니다.

먼저 API에 연결된 계정을 확인하고 화면 하단에 플러그인이 가장 최근에 최적화된 이미지를 표시합니다. 제공된 WebP 이미지가 WordPress에 업로드한 원본 이미지보다 얼마나 작은지 확인할 수 있습니다.

그런 다음 맨 위에 가능한 문제 탭이 있습니다. 탭이 강조 표시되는 것을 좋아하는 사람은 아무도 없지만 충돌이 발생할 수 있는 부분도 확인해야 합니다.

우리가 직면한 주요 문제는 다른 이미지 압축 및 전달 플러그인에 관한 것입니다. 위 이미지에서 볼 수 있듯이 Jetpack 플러그인은 Photon APIT를 통해 Optimole과 유사한 방식으로 작동하므로 충돌할 수 있습니다. 우리에게 이것은 방문자에게 이미지가 전혀 전달되지 않는 것으로 나타났습니다. TinyPNG 또는 Smush와 같은 다른 압축 서비스에는 문제가 없었습니다.

대시보드 사용

사이트가 WebP로 어떻게 작동하는지에 대한 자세한 정보를 원하면 외부 Optimole 대시보드에 해당 정보가 있습니다.

단순히 9.5배 더 작은 대신 제공된 실제 파일 크기를 볼 수 있습니다. 뿐만 아니라 30일 동안 어떤 파일이 자동으로 생성되는지 확인합니다.

Optimole(또는 WP) 대시보드에서 워터마크를 설정하여 누군가가 귀하의 WordPress 사이트에서 WebP를 제공받을 때 귀하의 로고가 자동으로 표시되도록 할 수도 있습니다. 간단한 프로세스이며 불투명도, 위치 등을 제어할 수 있습니다.

기본적으로 두 대시보드에서 동일한 작업을 수행할 수 있습니다. WordPress의 설정 탭에서 또는 Optimole의 외부 대시를 방문하십시오. 그것은 전적으로 당신이 가장 편한 것과 주어진 시간에 필요한 데이터 수준에 달려 있습니다.

또한 압축 수준, 지연 로딩 및 특정 이미지가 파일 이름을 기반으로 WebP로 제공되는 시기/경우를 제어할 수 있습니다. Media – Optimole 의 설정 탭에서 이 모든 것을 찾을 수 있습니다.

마무리

WordPress 웹 사이트에서 WebP를 사용할 때 가장 좋은 점은 파일을 수동으로 작업할 필요가 없다는 것입니다. 추가 업로드, 추가 압축 시간, 아무것도 없습니다. API가 작동하는 방식 때문에 모든 계산과 프로세스가 실시간으로 즉석에서 실행됩니다. Google은 실제로 JPG 또는 PNG 대신 WebP를 사용하여 인터넷을 더 빠르게 실행했습니다. 그러나 가장 큰 이점은 이미지의 크기를 크게 줄여도 동일한 품질을 유지한다는 것입니다. Google은 자체 형식을 사용하여 사이트 속도를 높여 더 높은 순위를 매길 수 있고 최종 사용자 경험도 더 좋아질 수 있습니다. 그리고 그것이 결국 중요합니다.

웹사이트 방문자에게 WebP 이미지를 제공하는 것에 대해 어떻게 생각하십니까?

vladwel / shutterstock.com의 기사 특집 이미지