WordPress에서 차세대 형식을 제공하는 방법: 알아야 할 모든 것

Google PageSpeed ​​Insights에서 성능 감사를 실행했다면 "차세대 형식으로 이미지 제공" 기회가 팝업되는 것을 보았을 것입니다.

콘텐츠가 중요하지만 WordPress 사이트에서 콘텐츠를 제공하는 데 사용할 형식도 중요합니다. Next-gen(next-generation의 약자) 형식은 웹사이트에서 이미지 로드 시간을 단축하는 방법입니다. 압축 정보가 포함된 최신 브라우저에 로드할 수 있으므로 방문자는 영원히 기다릴 필요가 없습니다.

이 기사에서는 사용 가능한 차세대 형식과 WordPress에서 이러한 특정 형식의 이미지를 제공하여 사이트를 더 빠르게 만들고 Lighthouse 성능 점수를 향상시키는 방법에 대해 설명합니다.

차세대 형식이란 무엇이며 사용해야 하는 이유

차세대 이미지는 우수한 압축 및 품질을 제공합니다. 동일한 높은 수준의 이미지 품질을 유지하면서 데이터를 덜 차지하므로 웹 사용에 적합합니다.

WordPress에서 이미지에 사용할 수 있는 두 가지 주요 차세대 형식이 있습니다.

• WebP(Google에서 개발)는 손실 압축 형식과 무손실 압축 형식을 모두 활용하는 이미지 형식입니다. 작은 파일 크기로 고화질 이미지를 얻을 수 있습니다! WebP는 이미지의 품질도 유지되므로 JPEG, PNG 및 GIF 이미지를 확실히 대체할 수 있습니다.

• AVIF(Alliance for Open Media에서 개발)는 동일한 이미지 품질을 유지하면서 이미지를 작게 만드는 이미지 파일 형식입니다. AVIF는 WebP보다 파일을 훨씬 더 압축하는 경향이 있지만 AVIF는 최신 파일 형식으로 브라우저 지원에 뒤쳐져 있습니다. 따라서 WordPress 사이트에 WebP 형식을 사용하는 것이 좋습니다.

Google PageSpeed ​​Insights는 또한 PNG 또는 JPEG가 아닌 WebP 및 AVIF와 같은 차세대 형식으로 이미지를 제공할 것을 권장합니다.

WebP와 같은 차세대 형식으로 이미지를 제공하면 어떤 이점이 있습니까?

WebP 이미지는 PNG 또는 JPEG에 비해 크기가 약 30% 작습니다. 아래와 같이 PNG 형식은 이미지 최적화에 효과적이지만 WebP(마지막 형식)보다 성능이 뛰어납니다.

대부분의 웹사이트에서 이미지는 사이트 속도를 늦추는 주요 원인이라는 점을 명심하십시오. 큰 이미지는 사이트 속도를 늦출 뿐만 아니라 페이지의 무게를 증가시킵니다. 페이지가 무거우면 모바일 네트워크에서 로드하는 데 시간이 더 오래 걸리기 때문에 모바일 성능에 영향을 줍니다.

마지막으로 웹사이트 속도는 순위를 결정할 때 Google에서 고려하는 주요 요소입니다. 5페이지에 나타나지 않으려면 WebP와 같은 차세대 형식을 사용하여 이미지를 최적화하는 것을 잊지 마십시오.

WordPress에서 이미지를 WebP로 변환하는 방법을 살펴보겠습니다.

WordPress에서 차세대 형식으로 이미지를 제공하는 방법

이미지를 차세대 형식으로 변환하는 가장 쉽고 빠른 방법은 WordPress 플러그인을 사용하는 것입니다. 그러나 이미지를 수동으로 최적화하고 변환할 수도 있습니다.

두 가지 옵션을 모두 살펴보겠습니다.

옵션 1 – 플러그인을 사용 하여 차세대 형식으로 이미지를 변환하는 방법

항상 그렇듯이 WordPress 플러그인을 사용하면 소중한 시간을 절약할 수 있습니다. Google에서도 플러그인을 사용하여 업로드한 이미지를 WebP 또는 Avif로 변환할 것을 권장합니다.

이미지를 최적화하고 차세대 형식으로 제공하는 데 사용할 수 있는 6가지 주요 플러그인이 있습니다.

1. Imagify – 약 200개의 이미지를 위한 무료 WebP 변환 플러그인. Imagify는 또한 이미지의 크기를 조정하고 압축하여 성능을 향상시킵니다 (보너스: 전체 자습서 및 성능 테스트가 기사에 포함됨) .
   
2. WebP 익스프레스 – WebP 이미지를 제공하기 위해 간단한 코드 줄을 추가합니다.
   
3. EWWW – 작업에 적합한 이미지 형식(JPG, PNG, GIF 또는 WebP)을 얻을 수 있는 스마트 변환 옵션입니다.
   
4. Shortpixel Image Optimizer – 모든 JPEG, PNG 또는 GIF를 WebP 및 AVIF로 변환합니다.
   
5. Smush – WebP로 변환하고 차세대 WebP 형식의 이미지를 자동으로 제공합니다(프로 버전만 해당).
   
6. 미디어용 WebP 변환기 – 표준 JPEG, PNG 및 GIF 형식의 파일을 WebP 형식으로 바꿉니다.

Imageify를 사용하여 이미지를 WebP로 변환하는 방법

Imagify 플러그인을 사용한 WebP 변환의 예를 살펴보겠습니다. 세 단계만 거치면 됩니다

1단계 – Imagify를 무료로 다운로드하여 설치합니다. 플러그인을 활성화하고 API 키를 만듭니다.

2단계 – 설정 > Imagify 로 이동하고 최적화 탭으로 스크롤합니다.
" 이미지의 WebP 버전 만들기 " 및 " 사이트에 WebP 형식으로 이미지 표시 " 그리고 두 번째 옵션 " <picture> 태그 사용 "을 선택합니다.

3단계 – 누락된 WebP 버전 생성 파란색을 클릭합니다. 단추.

축하합니다. 이제 WordPress 라이브러리에서 볼 수 있는 것처럼 방문자에게 WebP 이미지 형식을 제공하고 있습니다.

중요 참고 사항: 새로 생성된 WebP 이미지는 WordPress 라이브러리에 표시되지 않습니다. 변환이 성공했는지 확인하려면 이미지가 표시된 웹 페이지를 엽니다. 그런 다음 Chrome 개발자 탭 > 요소 검사 > 네트워크 > IMG 로 필터링하고 유형 열을 확인합니다.

이제 이미지와 연결된 "WebP" 형식이 표시됩니다.

차세대 형식 변환에 대해 자세히 알아보려면 Imagify를 사용하여 WebP에 이미지를 제공하는 방법에 대한 자세한 가이드를 따르는 것이 좋습니다.

옵션 2 – 플러그인 없이 차세대 형식으로 이미지를 제공하는 방법

플러그인을 사용하여 이미지를 차세대 형식으로 변환하고 싶지 않다면 수동으로 코드를 추가할 수 있습니다. 다음은 WordPress 사이트에서 따를 수 있는 두 가지 옵션입니다.

1. WordPress .htaccess 파일을 직접 편집

사이트 파일을 코딩하고 편집하는 데 매우 익숙한 경우 에만 이 옵션을 따르는 것이 좋습니다. .htaccess 파일은 웹 사이트의 상위 수준 구성을 제어하는 ​​강력한 웹 사이트 파일입니다.

GitHub의 다음 코드를 .htaccess 파일에 배치하여 jpg/png/gif 이미지를 WebP 이미지로 바꿉니다.

 <IfModule mod_rewrite.c> RewriteEngine On # Check if browser supports WebP images RewriteCond %{HTTP_ACCEPT} image/webp # Check if WebP replacement image exists RewriteCond %{DOCUMENT_ROOT}/$1.webp -f # Serve WebP image instead RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image] </IfModule> <IfModule mod_headers.c> # Vary: Accept for all the requests to jpeg, png and gif Header append Vary Accept env=REQUEST_image </IfModule> <IfModule mod_mime.c> AddType image/webp .webp </IfModule>

2. HTML에서 <picture> 요소 사용

.htaccess 파일을 수정하는 것은 까다로울 수 있습니다. 보다 책임감 있는 옵션은 <picture> 태그를 사용하는 것입니다. 이 경우 브라우저는 표시할 적절한 파일 형식을 자동으로 선택합니다.

 <picture> <source type="image/webp"> <img src="/path/to/image.jpg" alt=""> </picture>

WebP가 성능에 미치는 영향

위에서 볼 수 있듯이 Imagify 플러그인을 사용하여 WordPress 이미지를 Google에서 권장하는 차세대 형식인 WebP로 변환할 수 있습니다. Imagify를 사용하면 자동으로(대량으로) 크기를 조정하고 압축하여 여러 이미지를 최적화할 수도 있습니다.

우리가 말한 것을 확인하기 위해 몇 가지 성능 테스트를 실행하는 것은 흥미로울 것입니다. 두 가지 시나리오를 실행하겠습니다.

시나리오 1 – JPEG 이미지의 성능 결과(Imagify 없음)

• JPEG 형식으로 제공되는 13개의 이미지
• 이미지가 최적화되지 않았습니다.

시나리오 2 – WebP 이미지 및 적극적인 최적화 모드의 성능 결과(Imagify 사용)

• WebP 형식으로 변환되어 제공되는 13개의 이미지
• 최적화된 이미지

사용된 성능 도구:

Google PageSpeed ​​Insights 및 WebPageTest

내 테스트 사이트:

시나리오 1: JPEG 이미지의 성능 결과(Imagify 없음)

JPEG로 제공되는 모든 이미지로 감사를 시작합니다. 평균적으로 크기는 270KB입니다.

이제 PSI를 살펴보겠습니다. 나는 모바일에서 주황색 점수(75/100)를 얻었고 가장 큰 콘텐츠가 포함된 페인트 점수는 빨간색으로 표시됩니다. LCP 점수는 특히 성능에 영향을 미치는 LCP 요소가 이미지이기 때문에 관련이 있습니다. 개선의 여지가 있습니다.

또한 PSI는 세 가지 이미지 관련 문제에 플래그를 지정했습니다.

• 적절한 크기의 이미지(특히 모바일에서)
• 차세대 형식의 이미지 제공
• 이미지 요소에 명시적인 너비와 높이가 없습니다.

KPI	Mobile Score – JPEG 이미지 – No Imagify
전반적인 등급	75/100
PSI 감사
가장 큰 콘텐츠가 포함된 페인트	4.9초
페이지 크기	1.2MB
HTTP 요청	22
로드 시간	2.890초

시나리오 2: WebP 이미지 및 "적극적" 최적화 모드(Imagify 사용)의 성능 결과

이제 13개의 JPEG 이미지를 WebP로 변환하고 Imagify로 최적화할 차례입니다.

그렇게 하려면 설정 > Imagify > Imagify' all 로 이동합니다.

그게 다야 이제 내 이미지가 WebP에서 최적화되고 제공됩니다. 파일 크기가 크게 감소한 것을 알 수 있습니다. WebP는 이미지를 더 밝게 만듭니다.

이제 Google PageSpeed ​​Insights에 대한 또 다른 감사를 실행하여 Imagify로 성능이 향상되었는지 확인할 수 있습니다. 결과는 훌륭합니다. 내 점수는 모바일에서 75/100에서 92/100으로 올랐습니다!

KPI	모바일 스코어 – JPEG 이미지 ( 이미지파이 없음 )	Mobile Score – WebP 이미지 및 공격적 모드(Imagify 사용)
전반적인 등급	75/100	92/100
PSI 감사
가장 큰 콘텐츠가 포함된 페인트	4.9초	3.0초
페이지 크기	1.2MB	714KB
HTTP 요청	22	17
로드 시간	2.890초	1.059초

결론적으로 Imagify는 모바일에서 웹사이트를 더 빠르게 만들었습니다. 페이지가 더 가볍고 HTTP 요청 수가 줄어들고 심지어 로드 시간도 훨씬 더 빨라졌습니다.

마지막으로 Imagify는 이전에 PSI가 신고한 세 가지 주요 문제도 해결했습니다.

"차세대 형식으로 이미지 제공", "적절한 이미지 크기" 및 "이미지를 효율적으로 인코딩"은 이제 Imagify 덕분에 통과된 감사입니다.

마무리

전반적으로 우리는 차세대 형식으로 이미지를 제공하는 것이 성능 향상을 위한 훌륭한 단계임을 확인했습니다. 이미지 최적화 및 크기 조정과 함께 WebP 형식은 WordPress 사이트 속도를 높이는 효과적인 조합입니다.

JPEG를 사용한 파일 크기	WebP + 압축 및 크기 조정된 이미지를 사용한 파일 크기(Imagify 덕분에 약 80% 절감)

JPEG 또는 PNG에서 WebP와 같은 차세대 형식으로 변환하는 것은 Imagify와 같은 플러그인을 사용하면 매우 쉽습니다 . 또한 Imagify는 WordPress 이미지를 압축하고 크기를 조정하여 모바일에서 녹색 점수를 받았습니다(Google PageSpeed ​​Insights에서 92/100). 이제 이미지를 최적화하고 WebP에서 제공할 때입니다.

감사를 수행하고 지금 무료로 Imagify를 사용해 보십시오!