WebP 이미지 포맷을 지원하는 워드프레스 이미지 최적화 플러그인 Optimus

이미지가 많은 사이트인 경우 최고의 이미지 압축 포맷이라고 할 수 있는 WebP 이미지로 변환하면 트래픽을 절감할 수 있을 것입니다. WebP 이미지 포맷을 지원하는 이미지 최적화 플러그인으로 EWWW Image Optimizer와 Optimus – WordPress Image Optimize 등이 있습니다. Optimus는 EWWW보다는 인지도가 떨어지지만 이 플러그인을 개발한 업체에서 만든 Cache Enabler라는 캐시 플러그인과 함께 사용이 가능합니다.

WebP 파일 변환 및 추가 이미지 압축

이 글을 작성한 이후에 워드프레스에서 많은 변화가 있었습니다. 이제는 별도의 WebP 지원 플러그인을 설치하지 않고도 워드프레스에 WebP 파일을 업로드할 수 있습니다.

워드프레스 5.8부터 WebP 파일이 완전 지원되기 시작했습니다.

저는 Snagit이라는 유료 화면 캡처 프로그램을 사용하여 이미지 파일을 WebP 포맷으로 변환하고 있습니다. 그러나 꿀뷰와 같은 무료 이미지 뷰어를 사용하여 이미지를 WebP 포맷으로 변환하는 것이 가능합니다. 또한, 온라인 이미지 압축 사이트에서 추가로 이미지를 압축할 수 있습니다.

또한, 이제는 무료 플러그인인 Converter for Media 플러그인을 사용하여 일괄적으로 WEBP 포맷으로 JPG, PNG, GIF 이미지들을 변환할 수 있습니다.

• 워드프레스 이미지 최적화 WebP 변환 플러그인 Converter for Media

WebP 이미지 포맷을 지원하는 워드프레스 이미지 최적화 플러그인 Optimus

WebP는 2010년에 구글이 공개한 이미지 포맷으로 위키백과에서는 WebP(웹피, weppy)에 대해 다음과 같이 소개하고 있습니다.

2010년 9월 30일 구글이 공개한 이미지 포맷으로, 사양 발표와 함께 각종 도구와 함께 제공이 시작되었다. 인터넷의 웹페이지에서 널리 사용되고 있는 JPEG을 대체하기 위해 제시된 규격이다. 웹사이트의 트래픽 감소 및 로딩 속도 단축을 겨냥한 것으로, 주로 사진 이미지 압축 효과가 높은 것으로 알려졌다. JPEG 등과 같은 손실 압축 포맷으로 화질 저하를 최소화 하면서 파일 크기를 축소(같은 품질의 JPEG 이미지의 10 ~ 80 % 정도까지 압축) 하였다.

사이트 속도와 트래픽 절감을 위한 한 방법으로 WebP를 고려해볼 수 있습니다. 하지만 jpg 파일과 별도로 변환된 webp 파일을 유지해야 하므로 용량은 더 늘어나게 되므로 디스크 용량을 줄이기 위한 방법으로는 적절하지 않을 것 같습니다.

현재 WebP는 대부분의 모던한 브라우저에서 지원됩니다. Can I Use 사이트에 의하면 애플 사파리 브라우저는 14.0 버전에서 지원된다고 표시되네요. IE에서는 지원되지 않습니다. (IE에서는 안 되는 것이 많습니다.ㅠ)

서버를 직접 운영하는 경우 Happist님의 "NGINX에서 최고의 이미지 압축 포맷 WebP 적용 방법"을 참고해볼 수 있습니다.

저는 캐시 플러그인으로 Cache Enabler를 사용하고 있어 이 캐시 플러그인을 만든 KeyCDN에서 개발한 Optimus – WordPress Image Optimizer 플러그인을 설치하여 테스트해보았습니다.

WebP 변환이 가능하다는 생각에 이 플러그인을 설치했지만, 결론적으로는 무료 버전에서는 100kb 이하만 지원하고 WebP 변환 기능도 제공되지 않습니다. 유료 버전을 이용해야 10MB 이미지 크기까지 지원되고 WebP 변환이 가능합니다.

서버단에서 지원하지 않는다면 유료 서비스를 이용하여 WebP 이미지 포맷으로 변환이 가능합니다. 프리미엄 버전은 Optimus HQ가 연간 29달러로 그리 높은 비용은 아니지만 저는 트래픽에 여유가 있기 때문에 이 플러그인을 사용하지 않고 기존 방식대로 이미지를 압축하여 계속 올리기로 했습니다. (이용하고 있는 웹호스팅이 VPS 상품이기 때문에 서버단에서 WebP를 지원하도록 기능을 설치하는 것이 가능합니다만 귀찮기도 하고 능력도 안 되어 시도하지 않고 있습니다.) 이미지 많은 사이트라면 사이트 속도 향상과 트래픽 절감을 위해 유료 버전을 고려해볼 수 있을 것 같습니다.

Optimus는 워드프레스 관리자 페이지 > 플러그인 > 새로 추가로 이동하여 Optimus로 검색하여 설치할 수 있습니다. 이 플러그인을 설치하고 활성화하면 설정 > Optimus에서 플러그인 옵션을 설정할 수 있습니다.

무료 버전에서는 100KB의 이미지 크기 제한이 있습니다. Optimus 설정 페이지에서는 유료 버전에서만 제공되는 옵션들이 선택하지 못하도록 비활성화되어 있습니다. WebP 파일 생성 (Creation of WebP files) 옵션은 Optimus HQ에서만 활성화됩니다.

During the uploading process of images to the media library, the Optimus plugin simultaneously sends the images to the Optimus server, where the incoming material is processed and sent back in optimized form. Afterwards, the Optimus plugin saves the image version with a reduced file size in the media library.

미디어 라이브러리에 이미지를 업로드하는 과정에서 Optimus 플러그인은 동시에 이미지를 Optimus 서버로 보내어 이미지를 처리한 후에 최적화된 포맷을 되돌려줍니다. 그런 다음, Optimus 플러그인은 미디어 라이브러리에 파일 크기가 줄어든 이미지 버전을 저장합니다.

유료 버전을 사용하여 WebP 파일을 생성하는 경우가 아니라면, 이미지 최적화 플러그인을 사용하는 것보다 미리 이미지 파일을 최적화한 후에 미디어 라이브러리에 업로드하는 것도 하나의 방법일 수 있습니다. (저는 compressor.io라는 사이트에서 이미지를 업로드하여 최적화한 후에 워드프레스 미디어 라이브러리에 이미지를 올리고 있습니다.)

2021년 9월 추가: 워드프레스 5.8 이상에서 WebP 업로드 지원

워드프레스 5.8 버전부터 JPEG, PNG, GIF 포맷과 동일한 방식으로 WebP 이미지를 사용할 수 있습니다. 이미지를 미디어 라이브러리(Media Library)에 업로드하여 콘텐츠에 삽입하면 됩니다. 워드프레스 5.8 이상에서는 WebP 포맷을 기본적으로 지워하므로 WebP 이미지를 업로드하기 위해 서드파티 플러그인을 설치할 필요가 없습니다.

일부 브라우저에서는 WebP 이미지를 지원하지 않습니다. 플러그인을 사용하면 브라우저에 맞게 이미지 포맷을 로드할 수 있게 할 수 있습니다.

• JPEG 파일을 업로드하면 JPEG 파일을 WebP 파일로 변환하여 크롬, 파이어폭스, 엣지 등 브라우저에서 WebP 파일을 로드합니다.
• WebP를 지원하지 않는 브라우저(구형 MacOS 버전에 사용되는 사파리와 기타 WebP를 지원하지 않는 브라우저)에서는 원본 JPEG 파일을 방문자에게 표시합니다.

이와 같은 플러그인으로 위에서 소개한 Optumus 플러그인 외에 ShortPixel 이미지 최적화 플러그인, Imagify 등의 플러그인이 있습니다.

마치며

이미지가 많은 사이트에서 WebP 이미지 포맷을 사용하면 페이지 로딩 속도를 개선하고 트래픽을 절감할 수 있어 고려해볼 만한 것 같습니다. 다만, WebP 이미지를 별도로 저장해야 하므로 그만큼 서버 용량이 필요하게 됩니다.

Optimus는 워드프레스용 이미지 압축 플러그인 중 하나이며, 유료 버전에서는 WebP 파일 변환 기능을 제공하므로 서버단에서 WebP 이미지 포맷 변환 기능이 제공되지 않는 경우에 고려할 수 있는 옵션 중 하나입니다.

참고로 100만 개 이상의 워드프레스 사이트에 설치되어 사용되고 있는 WP Smush 플러그인도 Pro 버전에서는 WebP로 변환하는 기능을 제공한다고 합니다.

참고

• 워드프레스 이미지 최적화 플러그인 WP Smush