당신이 원한다면 WordPress 사이트 속도 향상, 이미지 크기를 줄이는 방법을 찾는 것은 투자에 대한 큰 수익을 제공합니다.

평균적으로 이미지는 웹 페이지 파일 크기의 약 절반을 차지하므로 조금만 개선해도 큰 결과를 얻을 수 있습니다.

WebP는 이미지의 모양을 변경하지 않고 이미지 크기를 줄이는 데 도움이되는 최신 이미지 형식입니다. 평균적으로 이미지를 WebP로 변환하는 방법을 배우면 눈에 띄는 품질 손실없이 크기를 25-35%까지 줄일 수 있습니다.

이것이 우리가이 블로그 게시물에서 주제를 깊이 파고 드는 이유입니다!

준비된? 시작하자!

WebP 란 무엇입니까?

그래서… WebP 파일은 무엇입니까? 간단히 말해서 WebP는 Google에서 개발 한 이미지 형식입니다. 예를 들어, 다음과 같은 이미지 형식이 있습니다. JPEG 또는 JPG 그리고 PNG, 맞죠? 글쎄, WebP는 이미지의 대체 파일 형식입니다. 방법 확인 다른 이미지 파일 유형 웹 사이트 속도에 영향을 미칠 수 있습니다.

WebP는 더 작은 파일 크기로 동일한 이미지 파일을 제공하는 데 중점을 둡니다. 이미지 파일의 크기를 줄임으로써 웹 사이트 방문자에게 동일한 경험을 제공 할 수 있지만 사이트가 더 빨리로드됩니다..

예를 들어 Google의 WebP 압축 연구, Google은 WebP 이미지 파일의 평균이…

  • 25-34%는 비슷한 JPEG 이미지보다 작습니다.
  • 26%는 비교 가능한 PNG 이미지보다 작습니다.

이것이 당신이 PageSpeed Insights를 통해 사이트 실행, 많은 권장 사항 중 하나는 WebP와 같은 차세대 형식으로 이미지 제공:

Google PageSpeed Insights suggests using WebP images

Google PageSpeed Insights는 WebP 이미지 사용을 제안합니다.

그렇다면 Google의 WebP 형식은 파일 크기를 어떻게 줄입니까?

WebP는 손실 및 무손실 압축, 따라서 정확한 감소는 손실 압축을 사용하는지 무손실 압축을 사용하는지에 따라 다릅니다.

손실이 많은 WebP 압축을 사용하는 WebP는 "예측 코딩"이라는 것을 사용하여 파일 크기를 줄입니다. 예측 코딩은 이미지의 인접 픽셀 값을 사용하여 값을 예측 한 다음 차이 만 인코딩합니다. VP8 키 프레임 인코딩을 기반으로합니다.

무손실 WebP는 WebP 팀에서 개발 한 훨씬 더 복잡한 방법을 사용합니다.

WebP 압축 기술에 대해 자세히 알아 보려면 이 기사는 좋은 출발점입니다.

WebP를 지원하는 웹 브라우저는 무엇입니까?

WebP 이미지가 작동하려면 방문자의 웹 브라우저가이를 지원해야합니다. 불행히도 브라우저 지원은 많이 증가했지만 WebP 호환성은 여전히 보편적이지 않습니다..

WebP 이미지는 다음과 같은 널리 사용되는 브라우저에서 지원됩니다.

  • Chrome (데스크톱 및 모바일).
  • Firefox (데스크톱 및 모바일).
  • 가장자리.
  • 오페라 (데스크톱 및 모바일).

그러나 주목할만한 점은 Safari입니다. 이 게시물을 작성할 당시 Safari의 데스크톱 및 모바일 버전은 WebP 이미지를 지원하지 않습니다. 애플은 간단히 실험했다 2016 년에 Safari에 대한 WebP 지원이 있었지만 그 이후로는 더 이상 추진하지 않았습니다.

Internet Explorer에는 WebP 지원도 없습니다 (하지만 Edge는 Chromium을 기반으로하기 때문에 WebP를 지원합니다).

전체적으로, 약 77%의 인터넷 사용자 WebP를 지원하는 브라우저를 사용하십시오. 따라서 확실히 대부분의 지원이 있지만 23%는 무시하기에는 너무 큽니다 (아래의 WordPress WebP 자습서에서 모든 방문자가 훌륭한 경험을 할 수 있도록이를 처리하는 방법을 보여 드리겠습니다.):

WebP web browser support

WebP 지원

WebP 대 JPG 대 PNG 크기 비교

Google의 테스트에 따르면 WebP 이미지는 다음과 같습니다.

  • 25-34%는 비슷한 JPEG 이미지보다 작습니다.
  • 26%는 비교 가능한 PNG 이미지보다 작습니다.

Google의 방법론에 대해 자세히 알아 보려면 아래에서 전체 결과에 대한 직접 링크를 찾을 수 있습니다.

두 테스트 모두 다음을 포함한 11,000 개 이상의 이미지를 기반으로합니다.

WordPress에서 WebP 이미지를 사용하는 방법

모든 브라우저가 WebP 이미지를 지원하는 것은 아니기 때문에 미디어 라이브러리에 WebP 이미지 파일 업로드 JPEG 및 PNG와 같이 WordPress에서 직접 사용할 수 있습니다.

다시 말하지만 23%의 사람들 (모든 Safari 사용자 포함)은 WebP를 지원하지 않는 웹 브라우저를 사용합니다. WebP 이미지를 변환하여 귀하의 콘텐츠, 해당 방문자는 귀하의 이미지를 볼 수 없어 브라우징 경험을 망칠 수 있습니다.

걱정하지 마세요. 해결책이 있습니다!

WebP 이미지를 WordPress에 직접 업로드하는 대신 원본 이미지를 WebP 형식으로 변환하는 WordPress 플러그인을 사용할 수 있습니다. 그리고 또한 방문자의 브라우저가 WebP를 지원하지 않는 경우 원본 이미지를 대체로 제공합니다.

예를 들어 사이트에 JPEG 파일을 업로드하면 플러그인은 다음을 수행합니다.

  • JPEG 파일을 WebP로 변환하고 Chrome, Firefox 등으로 검색하는 방문자를 위해 WebP 버전을 사용합니다.
  • Safari 및 WebP를 지원하지 않는 다른 브라우저로 검색하는 방문자에게 원본 JPEG 파일을 보여줍니다.

이렇게하면 모든 사람이 귀하의 이미지를 볼 수 있고 모든 사람이 가능한 가장 빠른 경험을 얻을 수 있습니다.

아래에서 우리는 최고의 WebP WordPress 플러그인, 모두 Kinsta 및 Kinsta CDN.

정보

Kinsta에서 호스팅하는 경우 다음을 수행해야합니다. 우리의 지원에 연락 이러한 플러그인 중 일부에 대해 WebP 캐시 버킷에 대한 Nginx 규칙을 만들 수 있습니다.

ShortPixel

ShortPixel WordPress plugin

ShortPixel WordPress 플러그인

ShortPixel 인기있는 WordPress입니다 이미지 최적화 WordPress 사이트에 업로드하는 이미지의 크기를 자동으로 조정하고 압축하는 데 도움이되는 플러그인입니다.

기능 목록의 일부로 ShortPixel은 자동으로 이미지를 WebP로 변환하고 해당 이미지를 WebP를 지원하는 브라우저에 제공하는 데 도움을 줄 수 있습니다.

ShortPixel에는 한 달에 최대 100 개의 이미지를 무료로 최적화 할 수있는 제한된 무료 요금제가 있습니다. 그 후 유료 요금제는 최대 5,000 개 이미지 / 크레딧의 경우 월 $4.99부터 시작하고 10,000 크레딧 팩의 경우 $9.99부터 시작합니다.

ShortPixel은 최적화하는 각 WordPress 이미지 크기를 크레딧으로 계산합니다. 따라서 여러 이미지 썸네일 크기를 최적화하려면 하나의 이미지가 여러 크레딧을 사용할 수 있습니다. 이미지에 대한 파일 크기 제한은 없습니다.

ShortPixel 크레딧을 무제한 웹 사이트에 배포 할 수 있습니다. 사이트 당 제한이 없습니다 (모든 웹 사이트에서 동일한 ShortPixel 계정을 사용할 수 있습니다.).

ShortPixel을 사용하여 WordPress에서 WebP 이미지를 제공하려면 다음을 설치해야합니다. WordPress.org의 플러그인 API 키 (무료 ShortPixel 계정에 등록하면 얻을 수 있습니다.).

에서 일반 탭에서 이미지 최적화 작동 방식에 대한 기본 설정을 지정할 수 있습니다. 예를 들어 사용할 압축 수준 및 이미지 크기 조정 여부 :

How to set compression level and image dimensions in ShortPixel

ShortPixel에서 압축 수준 및 이미지 크기를 설정하는 방법

WebP 이미지를 활성화하려면 많은 탭 및 :

  1. 확인란을 선택하십시오. WebP 이미지
  2. 확인란을 선택하여 WebP 버전 제공 .. (첫 번째 상자를 선택한 후에 나타납니다)
  3. 라디오 버튼을 선택하십시오. 사용 태그 구문 (이전 상자를 선택한 후 나타납니다.)
  4. 기본값 유지 WordPress 후크 선택을 통해서만
How to enable WordPress WebP images in ShortPixel

ShortPixel에서 WordPress WebP 이미지를 활성화하는 방법

그런 다음 변경 사항을 저장하십시오.

Kinsta에서 호스팅하는 경우 ShortPixel은 Nginx에서 서버 구성 파일을 구성하는 것에 대한 경고 메시지를 제공합니다. 이러한 설정을 구성하려면 다음을 수행 할 수 있습니다. Kinsta 지원에 문의 서버 구성을 설정해 드리겠습니다.

상상하다

Imagify WordPress plugin

WordPress 플러그인 상상

상상하다 동일한 개발자의 인기있는 이미지 최적화 플러그인입니다. WP 로켓 (이것은 Kinsta와 함께 작동하는 몇 안되는 캐싱 플러그인 중 하나).

WordPress 사이트에 업로드하는 이미지를 자동으로 압축하고 크기를 조정할 수 있습니다. 그런 다음 WebP로 변환하고이를 지원하는 브라우저를 통해 방문자에게 WebP 버전을 제공하는데도 도움이됩니다.

기능 측면에서 ShortPixel과 Imagify는 많은 유사점을 공유합니다. 가장 큰 차이점은 가격을 볼 때입니다. ShortPixel은 이미지 당 크기 제한이없는 이미지를 기준으로 요금을 청구하는 반면, Imagify는 이미지 제한이없는 전체 파일 크기를 기준으로 요금을 청구합니다.

따라서 많은 큰 이미지를 최적화해야하는 경우 ShortPixel의 접근 방식이 더 저렴할 수 있습니다. 그러나 많은 작은 이미지를 최적화해야하는 경우 Imagify의 접근 방식이 더 저렴할 수 있습니다.

Imagify는 매월 25MB의 최적화를 허용하는 제한된 무료 계층을 제공합니다. 그 후 유료 요금제는 최대 1GB의 경우 월 $4.99부터 시작하고 1GB의 일회성 크레딧에는 $9.99부터 시작합니다.

ShortPixel과 마찬가지로 무제한 웹 사이트에 계정 제한을 분산 할 수 있습니다.

WordPress 사이트의 느린 호스트에 지쳤습니까? WordPress 전문가의 초고속 서버와 연중 무휴 세계적 수준의 지원을 제공합니다. 우리의 계획을 확인하십시오

Imagify를 사용하여 WordPress WebP 이미지를 제공하려면 다음을 설치해야합니다. WordPress.org의 플러그인 시작하려면 API 키를 추가하세요.

플러그인을 활성화하면 다음을 사용할 수 있습니다. 일반 설정 압축 수준을 선택합니다.

How to set compression level in Imagify

Imagify에서 압축 수준을 설정하는 방법

WebP 이미지를 활성화하려면 아래로 스크롤하여 최적화 섹션을 찾아 WebP 형식 부분:

  1. 확인란을 선택하여 Webp 버전의 이미지 만들기
  2. 확인란을 선택하여 webp 형식으로 이미지 표시…
  3. 라디오 버튼을 선택하여 사용하다 태그
  4. Kinsta에서 호스팅하고 Kinsta CDN을 사용하는 경우 Kinsta CDN의 URL (https : // 포함)을 CDN 상자를 사용하는 경우 (아래에서 Kinsta CDN URL을 찾는 방법을 알려드립니다)
How to enable WordPress WebP images in Imagify

Imagify에서 WordPress WebP 이미지를 활성화하는 방법

만약 당신이 Kinsta CDN 사용에서 사이트를 열어 CDN URL을 찾을 수 있습니다. MyKinsta 대시 보드 그리고 방문 Kinsta CDN 사이트 설정 탭 :

How to find Kinsta CDN URL

Kinsta CDN URL을 찾는 방법

ShortPixel과 마찬가지로 Kinsta에서 호스팅하는 경우 Nginx WebP 캐시 버킷에 대한 규칙 (Kinsta 지원팀에 문의하기 만하면됩니다).

Optimole

Optimole WordPress plugin

Optimole WordPress 플러그인

Optimole Imagify 및 ShortPixel과 약간 다르게 작동하는 WordPress 이미지 최적화 플러그인입니다. Optimole은 이미지를 자동으로 압축하고 크기를 조정할 수 있습니다. 그러나 다른 두 가지 주목할만한 기능도 있습니다.

  1. 자체 CDN (Amazon CloudFront에서 제공)을 통해 이미지를 제공 할 수 있습니다.
  2. Optimole이 각 방문자에게 최적의 크기의 이미지를 제공하는 실시간 적응 형 이미지를 제공합니다. 예를 들어 작은 화면에서 탐색하는 사람은 Retina 화면에서 탐색하는 사람보다 저해상도 이미지를 받게됩니다.

이 접근 방식은 Cloudinary, imgix, KeyCDN Image Processing 등과 같은 다른 실시간 최적화 / 조작 서비스와 유사합니다.

이 실시간 이미지 최적화의 일환으로 Optimole은 WebP 이미지를 지원하는 브라우저를 통해 방문자에게 제공 할 수도 있습니다.

Optimole은 한 달에 약 5,000 명의 방문자에게 이미지를 제공 할 수있는 제한된 무료 계획을 가지고 있습니다. 그 후 유료 요금제는 방문자 25,000 명에 대해 월 $19부터 시작됩니다.

시작하려면 다음을 설치해야합니다. WordPress.org의 플러그인 API 키 (무료 Optimole 계정에 등록하면 얻을 수 있습니다.).

이렇게하면 Optimole이 자동으로 이미지를 최적화하고 CDN. WebP 지원은 기본적으로 켜져 있으므로 수동으로 활성화 할 필요가 없습니다.

압축 수준 및 크기 조정 동작과 같은 다른 설정을 구성하려면 미디어 → Optimole → 설정:

The Optimole settings area - WordPress WebP images are enabled by default

Optimole 설정 영역 – WordPress WebP 이미지는 기본적으로 활성화됩니다.

Optimole은 자체 CDN을 통해 이미지 전달을 처리하므로 Kinsta에서 호스팅하는 경우 Nginx 규칙을 설정할 필요가 없습니다.

/ * 트윗하려면 클릭 * /
body a.novashare-ctt {
디스플레이 : 블록;
배경 : #00abf0;
여백 : 30px 자동;
패딩 : 20px 20px 20px 15px;
색상 : #ffffff;
텍스트 장식 : 없음! important;
box-shadow : 없음! 중요;
-webkit-box-shadow : 없음! 중요;
-moz-box-shadow : 없음! 중요;
테두리 : 없음;
왼쪽 테두리 : 5px 단색 #00abf0;
}
body a.novashare-ctt : hover {
색상 : #ffffff;
왼쪽 테두리 : 5px 단색 #008cc4;
}
body a.novashare-ctt : visited {
색상 : #ffffff;
}
body a.novashare-ctt * {
포인터 이벤트 : 없음;
}
body a.novashare-ctt .novashare-ctt-tweet {
디스플레이 : 블록;
글꼴 크기 : 18px;
줄 높이 : 27px;
margin-bottom : 10px;
}
body a.novashare-ctt .novashare-ctt-cta-container {
디스플레이 : 블록;
오버플로 : 숨김;
}
body a.novashare-ctt .novashare-ctt-cta {
float : 오른쪽;
}
body a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta {
왼쪽으로 뜨다;
}
body a.novashare-ctt .novashare-ctt-cta-text {
글꼴 크기 : 16px;
줄 높이 : 16px;
수직 정렬 : 중간;
}
body a.novashare-ctt .novashare-ctt-cta-icon {
여백-왼쪽 : 10px;
디스플레이 : 인라인 블록;
수직 정렬 : 중간;
}
body a.novashare-ctt .novashare-ctt-cta-icon svg {
수직 정렬 : 중간;
높이 : 18px;
}
/ * 단순 + 단순 대체 테마 * /
body a.novashare-ctt.novashare-ctt-simple {
배경 : 없음;
패딩 : 10px 0px 10px 20px;
색상 : 이니셜;
}
body a.novashare-ctt.novashare-ctt-simple-alt {
배경 : #f9f9f9;
패딩 : 20px;
색상 : 이니셜;
}
body a.novashare-ctt.novashare-ctt-simple : hover, body a.novashare-ctt.novashare-ctt-simple-alt : hover {
왼쪽 테두리 : 5px 단색 #008cc4;
}
body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta, body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta {
색상 : #00abf0;
}
body a.novashare-ctt.novashare-ctt-simple : hover .novashare-ctt-cta, body a.novashare-ctt.novashare-ctt-simple-alt : hover .novashare-ctt-cta {
색깔 : #008cc4;
}

요약

WordPress 사이트의 이미지는 평균 페이지 파일 크기의 큰 부분을 차지합니다. 이미지 크기를 줄이는 방법을 찾을 수 있다면 사이트 속도 향상 방문자의 경험을 변경하지 않고.

WebP는 비교 JPEG 또는 PNG 파일에 비해 파일 크기를 ~ 25% 감소시킬 수있는 최신 이미지 형식입니다.

대부분의 최신 브라우저는 WebP를 지원하며 인터넷 사용자의 약 77%는 WebP를 지원하는 브라우저를 가지고 있습니다. 그러나 일부 브라우저, 특히 Safari는 여전히 WebP 지원을 제공하지 않으므로 모든 방문자에게 WebP 이미지를 제공 할 수 없습니다.

이 문제를 해결하기 위해 이미지를 WebP로 변환하고 브라우저에서이 형식을 지원하는 방문자에게 WebP 버전을 제공하는 WordPress 플러그인을 사용하는 동시에 브라우저에서 지원하지 않는 방문자에게는 원본 이미지를 사용할 수 있습니다.

이를 수행하는 데 도움이되는 세 가지 플러그인은 다음과 같습니다.

  • ShortPixel.
  • 상상해보세요.
  • Optimole.

이미지를 최적화하는 더 많은 전술을 확인하려면 웹 성능을 위해 이미지를 최적화하기위한 전체 가이드.

WordPress에서 WebP를 사용하는 방법에 대해 질문이 있습니까? 의견으로 문의하십시오.