워드프레스 5.8 버전부터 WebP 포맷이 지원되기 시작하였습니다. WebP 형식을 이용하면 이미지 크기가 크게 줄어들어 페이지 로딩 속도가 향상되고 트래픽도 절감할 수 있습니다.
워드프레스 사이트에서 WebP 포맷으로 변환하려는 경우 유료 서비스를 이용해야 했지만, 이제는 Converter for Media 플러그인을 사용하면 이미지 파일을 간편하게 WebP 또는 AVIF 이미지 포맷으로 변환하여 사이트 속도를 개선하고 트래픽도 절감할 수 있습니다. JPEG, PNG, GIF 포맷을 WebP/AVIF 포맷으로 교체하여 퀄리티 손실 없이 페이지 크기를 크게 줄일 수 있습니다. 페이지 로딩 속도가 개선되면 SEO(검색엔진 최적화)에도 긍정적으로 작용합니다.
이 플러그인은 현재 40만 개가 넘는 사이트에서 설치되어 사용되고 있으며, 일부 국내 유튜버는 이 플러그인을 필수 플러그인으로 소개하고 있습니다.
워드프레스 이미지 최적화 WebP 변환 플러그인 Converter for Media
이미지를 WebP 포맷으로 변환하고 추가적으로 온라인 이미지 압축 사이트에서 압축한 후에 업로드하면 이미지 크기를 최소화할 수 있습니다.
이미 많은 이미지를 JPEG, PNG 등의 포맷으로 업로드한 경우에는 Converter for Media 플러그인을 설치하여 기존 이미지들을 WEBP 포맷이나 AVIF 포맷으로 일괄 변환하는 것이 가능합니다.
WebP vs. AVIF 이미지 포맷
WebP는 구글에 의해 개발된 이미지 포맷으로, JPEG, PNG, GIF 등 기존 이미지 포맷들보다 더 효율적인 압축을 제공합니다. WebP는 손실 압축과 무손실 압축 모두 지원하며, 같은 화질의 이미지를 더 작은 파일 크기로 저장할 수 있어 웹 성능 최적화에 유리합니다. 또한, 투명도(알파 채널)와 애니메이션 지원이 가능하여 GIF 대체 포맷으로도 사용됩니다. 대부분의 모던 브라우저에서 지원되지만, 일부 구형 브라우저에서는 호환성 문제가 있을 수 있습니다.
AVIF(AV1 Image File Format)는 AOMedia Video 1(AV1) 비디오 코덱을 기반으로 한 이미지 포맷입니다. 이 포맷은 탁월한 압축 효율을 자랑하며, 고품질의 이미지를 매우 낮은 파일 크기로 제공합니다. AVIF는 HDR(High Dynamic Range) 및 광색역(Wide Color Gamut) 지원을 포함한 다양한 첨단 기능을 지원하며, WebP보다 더 진보된 압축 기술을 사용합니다. 그러나 AVIF는 상대적으로 새로운 포맷이기 때문에 WebP보다 지원하는 브라우저가 적고, 처리 시간이 더 길 수 있다고 합니다.
Converter for Media 플러그인을 사용해야 하는 이유와 사용해서는 안 되는 이유
다음의 상황에서 이 플러그인의 사용을 고려할 수 있습니다.
- 기존에 많은 이미지들이 JPG, PNG 포맷으로 업로드된 경우
- 웹 서버 공간이 충분한 경우
- 사용자들이 WebP 포맷으로 이미지를 업로드하도록 강제할 수 없는 경우
다음의 상황에서는 이 플러그인을 사용하지 않는 것이 좋을 수 있습니다.
- 새로 블로그를 시작하고 WebP 포맷으로 이미지를 업로드할 수 있는 경우
- 웹 서버 공간이 부족한 경우
Converter for Media 플러그인을 사용하여 JPG/PNG/GIF 등의 이미지를 WebP/AVIF 포맷으로 변환할 경우 별도의 폴더가 생성되어 변환된 파일들이 저장됩니다. 그러므로 추가적인 웹 서버의 디스크 공간이 필요하게 됩니다.
카페24 등 국내 호스팅을 이용하는 경우에는 디스크 공간이 그리 넉넉하지 않은 편이므로 이 플러그인 사용을 고려하는 경우 디스크 공간이 충분한지 확인한 후에 결정하시기 바랍니다. 해외 호스팅을 이용하는 경우에는 일반적으로 공간이 충분하기 때문에 이런 제약에서는 비교적 자유로운 편입니다.
이 플러그인을 설치하여 사용하는 경우 WebP나 AVIF 포맷으로 계속 이미지를 로드하게 하려면 플러그인을 활성화 상태로 두어야 합니다. 즉, 비활성화하면 다시 기존 이미지 포맷으로 이미지가 로드됩니다.
Converter for Media 플러그인 설치하기
플러그인을 설치하려면 워드프레스 관리자 페이지에서 플러그인 » Add New Plugin (새 플러그인 추가)으로 이동합니다. 검색 필드에 "converter for media"를 입력하고 Converter for Media를 설치하고 활성화합니다.
Converter for Media 플러그인 세팅하기
Converter for Media 플러그인을 활성화하였다면 설정 » Converter for Media에서 세팅을 할 수 있습니다.
Server configuration error (서버 구성 오류) 경고가 표시되는 경우
플러그인 설정 페이지에 아래와 같이 Server configuration error가 표시될 수 있습니다.
이 오류가 표시되면 이미지를 일괄 변환하는 기능이 비활성화됩니다.
위의 그림과 같이 이미지 일괄 변환을 시작하려면 먼저 서버 구성 문제를 해결하라는 메시지가 표시되고 Start Bulk Optimization(대량 최적화 시작) 버튼이 비활성화됩니다.
에러 메시지의 안내 문구상으로는 이미지 요청을 Apache 서버를 건너뛰고 대신 Ngnix 서버에서 처리하도록 설정되어서 이런 문제가 발생하는 것 같습니다.
Nginx 웹서버가 활성화되어 있는 경우 쉬운 방법으로 Advanced Settings 탭 » Image loading mode(이미지 로딩 모드) 옵션으로 이동하여 via .htaccess에서 Bypassing Nginx로 옵션을 바꾸면 서버 구성 문제가 해결될 것입니다.
클라우드웨이즈(Cloudways)를 이용하는 경우에도 이와 같은 서버 구성 오류 메시지가 표시될 것입니다. 클라우드웨이즈의 경우 플러그인 설정에서 Image loading mode를 Bypassing Nginx로 설정해도 되지만, (클라우드웨이즈 계정에 로그인하여) 애플리케이션 설정에서 WEBP Redirection(WebP 리디렉션)을 활성화하면 간단히 해결됩니다.
General Settings (일반 설정)
General Settings 탭에서 몇 가지 설정을 지정할 수 있고, 기존 이미지들(JPG, PNG 등)을 일괄적으로 WebP 포맷으로 변환할 수 있습니다.
Conversion strategy 섹션(①)에서는 이미지의 압축 레벨을 선택할 수 있습니다. 기본 설정은 Optimal(최적)입니다.
- Lossy: 이미지 크기를 가장 많이 줄일 수 있지만 이미지 품질이 저하됩니다.
- Optimal: 눈에 보이는 이미지 퀄리티 손실 없이 이미지 크기를 줄입니다.
- Lossless: 이미지 품질 손실 없이 이미지 크기를 최소한으로 줄입니다.
보통은 Optimal로 두면 될 것 같습니다. 이미지 품질이 저하되어도 상관 없다면 첫 번째 옵션을 고려할 수 있습니다. 이미지 퀄리티가 저하되지만 이미지 크기가 가장 크게 줄어들어 페이지 로딩 속도에는 긍정적인 영향을 미칩니다.
Supported output formats 섹션(②)에에서는 지원되는 출력 포맷을 지정할 수 있습니다. 무료 버전에서는 WebP 포맷만 선택할 수 있습니다. AVIF 포맷은 이미지 크기를 WebP 포맷보다 더 줄일 수 있지만 유료 버전에서만 선택 가능합니다.
Supported directories 섹션(③)에서 미디어를 변환할 디렉터리를 선택합니다. 기본적으로 uploads가 선택되어 있으며, 보통 이 설정을 그대로 두면 됩니다.
Maximum image dimensions 섹션(④)에서는 변환 시 큰 이미지의 크기를 제한할 수 있습니다.
Conversion of new images 섹션(⑤)에서는 미디어 라이브러리에 새로운 이미지를 업로드할 때 자동으로 변환할지를 선택할 수 있습니다. 추후 이미지를 직접 WebP 포맷으로 변환하여 올리는 경우에는 이 옵션을 해제하고, 그렇지 않은 경우에는 활성화하면 될 것입니다.
Advanced Settings (고급 설정)
고급 설정 탭에서는 지원되는 파일 확장자를 비롯한 몇 가지 고급 기능을 지정할 수 있습니다.
Supported files extensions 섹션(①)에서는 변환할 파일 확장자를 선택할 수 있습니다. 기본적으로는 gif 파일이 해제되어 있네요. webp 포맷은 AVIF로의 변환 시에만 선택하도록 합니다. WebP 변환 시에는 webp 확장자를 선택해도 무시될 것 같습니다.
Image loading mode 섹션(②)에서는 이미지 로딩 모드를 지정할 수 있습니다. Nginx 서버 때문에 서버 구성 오류가 발생하는 경우 Bypassing Nginx로 변경하거나, 클라우드웨이즈의 경우 상기의 "Server configuration error (서버 구성 오류) 경고가 표시되는 경우" 부분을 참고하여 애플리케이션에서 WEBP Redirection 옵션을 활성화하시기 바랍니다.
Excluded directories 섹션(③)에서는 이미지 변환 시 제외할 디렉터리 이름을 콤마로 구분하여 입력합니다.
Extra features 섹션(④)에서는 추가적인 기능을 설정합니다. 기본적으로 생성된 포맷의 파일이 원본 이미지 파일보다 큰 경우에 자동으로 제거(Automatic removal of files in output formats larger than the original ones)하는 첫 번째 옵션이 선택되어 있습니다.
변환된 webp 파일 저장 경로
다른 플러그인에서 webp 파일로 변환하면 원본 이미지 파일이 위치한 동일 디렉터리에 webp 파일이 생성되는 것을 본 적이 있습니다. 이 플러그인을 사용하여 웹피 포맷으로 변환할 경우 변환된 webp 파일은 별도의 디렉터리에 저장됩니다.
테스트를 해보니 wp-content/uploads 폴더의 이미지들이 webp 포맷으로 변환되어 wp-content/uploads-webpc라는 별도 폴더에 저장되어 있는 것을 확인했습니다.
Smush 플러그인 보다 WebP로 변환해주는 Converter for Media 플러그인이 더 나은가요?
Smush는 오래 전에 테스트해보고 사용해보지 않아서 최신 버전의 경우 Converter for Media와 비교하여 어느 것이 더 좋은지에 대해서는 모르겠습니다.
Smush에서 일괄 변환 시 제약이 있었는데, 아직도 제약이 있다면 이 글에서 소개하는 플러그인이 더 나을 것 같습니다.