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

  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

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

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에서는 안 되는 것이 많습니다.ㅠ)

WebP 이미지 포맷 지원 브라우저

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

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

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

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

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

Optimus는 워드프레스 관리자 페이지 > 플러그인 > 새로 추가로 이동하여 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라는 사이트에서 이미지를 업로드하여 최적화한 후에 워드프레스 미디어 라이브러리에 이미지를 올리고 있습니다.)

마치며

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

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

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

참고



4 개 댓글

  1. 저도 플러그인보다는 조금 수동적적이긴 해도 이미지 사이즈 압축해서 올리고 있습니다
    어쩌면 이것이 제일 편한 듯 합니다

    응답
    • 저도 이미지를 먼저 압축한 후에 올리고 있습니다.
      조금 번거롭게 보일 수도 있지만 익숙해지니 그리 불편하게 느껴지지는 않네요.

      응답
    • 저도 미리 다 압축해서 올리고 있습니다. 처음엔 매우 귀찮게 느껴졌는데 이제는 습관됐네요.
      개인이 운영하는 워드프레스라면 다들 이러지 않나 싶어요 ㅋㅋ

      응답
      • 서버나 웹호스팅 서버의 용량이 제한적인 경우에는 미리 압축해서 올리는 것이 좋은 방법 같습니다.

        여러 명이 글을 작성하는 환경에서는 최적화 플러그인을 사용하는 것이 효과적일 수 있을 것입니다. 글을 작성하면서 글을 올릴 때 용량이 큰 이미지를 올리는 분들이 있을 수 있으니까요. 이미지 최적화 플러그인을 설치하면 이미지를 압축하여 어느 정도는 서버 용량을 절감할 수 있을 것이라 생각됩니다.