워드프레스 이미지 최적화 플러그인 – ShortPixel Image Optimizer

시작하기 전

인터넷을 검색하다가 kalkin7 님의 글을 보게됐는데 해당글이 워낙 잘 정리되어 있고 이보다 잘 쓰기는 힘들것같습니다.

이 글은 모든걸 설명하기 보다는

kalkin7 님의 글중 2.6 이미지를 최적화하자 라는 글에 이미지를 최적화하는 몇가지 플러그인들의 소개가 있는데, 여기에 하나를 추가하는 글이라고 생각해주시기 바랍니다.

 

개요

웹 사이트를 제작하려면 첫째로 이미지 용량을 줄여야 합니다.

워드프레스가 아닌 어떤 도구, 어떤 언어를 사용해서 만들던지 상관없이 웹 사이트라면 용량이 있고, 사용자의 브라우저가 사이트의 부품 ( js, css, 이미지 등등..) 을 받아서 표시해주는데

용량이 크면 다운받는데 시간이 걸리게 되고 웹의 전체적인 로딩 속도가 느려지게 됩니다.

둘째로 용량이 많아지면 트레픽이 높아지게 되는데, 대부분 호스팅을 사용하게 될텐데 트레픽 차단이 되는 원인이 됩니다.

웹사이트의 가장 많은 용량을 차지하는건 아무래도 이미지이며, 이미지 용량을 어느정도 관리하는 사이트 관리자가 있다면 큰 문제는 없겠지만

대부분은 그렇지 않고 그냥 막 업로드하고 사용하기 마련입니다. ( 심한경우 50메가짜리 이미지가 업로드된것도 본적이 있습니다. )

ShortPixel Image Optimizer 플러그인은 이미지를 자동으로 최적화 해주는 플러그인중 하나입니다.

 

1. 설치

ShortPixel Image Optimizer 플러그인을 설치하고 활성화 합니다.

 

2. API Key 연동

shortpixel 사이트 로 가서 회원 가입을 하고 API Key 를 발급받습니다. 회원 가입은 이메일 주소를 입력하면 입력한 이메일 주소로 아래와같은 메일이 날라옵니다.

log into your account 링크를 클릭하면 관리자 페이지로 이동할 수 있습니다.

그 위에 검은색으로 가린 부분은 API Key 인데 이 키를 복사하고

관리자 > 설정 > shortpixel 로 가서 이 키를 붙여넣고 validate 버튼을 눌러서 연동합니다.

성공했다면 옵션 항목들이 표시될것입니다.

 

3. 최적화

옵션이 여러가지가 있는데 일단 API Key 만 입력하고 다른 옵션은 전혀 건드리지 않은 상태에서 최적화를 해보겠습니다.

현재 이 이미지의 용량은 117 킬로바이트입니다. 화면 오른쪽 아래에 Optimize now 버튼을 클릭하면 최적화가 시작됩니다.

 

4. 최적화 결과

117 킬로바이트에서 33킬로바이트로 약 60퍼센트의 용량이 줄어들었습니다. 추가로 업로드시 같이 생성된 4개의 썸네일도 줄어들었네요.

참고로 ShortPixel Info 의 버거 메뉴를 클릭하면 Compare 라는게 있는데 원본 이미지와 비교를 해볼수 있습니다.

가운데의 원을 드래그해서 좌우로 이동하면 원본과 최적화된 이미지를 전체로 볼 수 있습니다.

자세히보면 오른쪽 최적화된 이미지의 빨간 선이 약간 흐릿한데 별 차이가 없고 아주 자세히 봐야 알수있는 정도입니다.

이는 최적화 옵션중에 Lossy (최대로 최적화) 를 사용해서인데, 이정도면 충분하다고 보이지만 더 좋은 화질을 원한다면 옵션을 조금 높이면 됩니다.

 

5. 기타 옵션

옵션이 많은데 이를 전부 설명하기는 힘들고 쓸만한 옵션을 몇가지 알려드리겠습니다.

  1. WebP versions : 이게 다른 이미지 최적화 플러그인과의 차이점이라 볼 수 있는데, 체크하면 WebP 포맷으로 변경해줍니다. 간단하게 설명드리자면 WebP 는 모던 브라우져 ( 크롬, 파이어폭스 등 ) 에서 사용할수 있는 좀더 저용량에 같은 화질을 보여주는 포맷입니다. 저는 사용으로 했습니다.
  2. Optimize PDFs : PDF 파일도 최적화를 해주는데 PDF 파일을 사용한다면 체크하는게 좋습니다.
  3. Optimize media on upload : 기본 체크되어있는 항목인데 업로드할때 자동으로 최적화를 하는 옵션입니다. 이건 테스트를 해보고 결정하면 되는데 저는 체크를 해제해 뒀습니다. 무료 옵션이라 한달에 100개만 최적화 할 수 있는데 용량이 큰 이미지만 최적화해서 사용하면 충분하기 때문입니다.
  4. Also include thumbnails : 썸네일도 자동 최적화하는 옵션인데 저는 꺼뒀습니다. 테마에 따라서 사이즈가 큰 이미지를 업로드하면 썸네일이 4개에서 그 이상이 생기는데 이렇게되면 100개는 순식간에 채워집니다.
  5. 관리자 > 미디어 > Bulk ShortPixel 을 클릭하면 모든 이미지를 버튼 클릭 한번으로 최적화 할 수 있습니다. 다만 무료는 100개까지이니 100개 이하의 이미지가 있을경우에만,  Include thumbnails 는 체크를 해제해놓고 사용하시기 바랍니다.

 


참고사항

1. 가격을 확인해보세요.

2. 한 달에 100개의 이미지 최적화가 무료입니다. 그 이상은 유료지만 파일 용량의 제약은 없으므로 사용하다가 부족하다면 유료도 월별 4.99 불 9.99불 29.99 불정도로 싼 편이기 때문에 고려해볼만 합니다.

3. 하나의 API Key 로 여러 사이트에서 쓸 수 있습니다. 도메인별 제한은 없다는 뜻입니다.

4. 워드프레스가 아닌 PHP 코드 예제도 있습니다. 워드프레스가 아니라도 사용할 수 있습니다.

 


맺으며

아래와 같은 경우 사용하시면 될것같습니다.

  1. 호스팅을 사용중이며 최저 플랜이라 용량이 그렇게 크지 않은경우
  2. 용량은 부족하지 않지만 여러 사람이 사용하는 웹 사이트이며 이미지를 막 업로드하는 경향이 있는 경우 ( 예 : 고화질 이미지를 그대로 업로드 )
  3. 트레픽 초과 경고 메세지가 뜬적이 있거나 신경쓰이는 경우
  4. 웹 로딩 속도를 조금이라도 빠르게 하고싶은 경우

이 이미지 최적화 플러그인은 여러개가 있는데 사이트 제작 전에 하나정도는 설치해놓는게 좋습니다.

1,2번의 용량은 생각보다 골치아픈 문제로 웹사이트를 혼자서만 사용하고 이미지도 어느정도 관리가 된다고 한다면 괜찮겠지만

보통 웹 호스팅을 사용하게 될텐데 용량이 한정적입니다.

관리하지 않으면 금방 다 차버리고 워드프레스의 경우 사이즈가 큰 이미즈를 업로드하면 작은 이미지가 3개에서 유료테마의 경우 7개정도 자동으로 생성되는 경우도 있습니다.

업로드한 이미지보다 좀더 큰 용량이 올라간다고 생각하셔야 합니다. ( 업로드한 이미지 + 작은 사이즈의 이미지 )

호스팅 용량이 다 차버리고 나면 할수있는게 별로 없습니다. 과거의 이미지를 삭제하거나 용량이 좀더 큰 상위 플랜으로 바꾸는 수밖에 없습니다.

3번 트레픽도 마찬가지입니다. 자꾸 초과되는 트레픽때문에 상위 플랜으로 옮기는 경우를 많이봤는데 호스팅 업체 선정도 중요하지만 스스로 이미지를 어느정도는 관리해줘야 합니다.

4번 사이트의 속도는 중요합니다. 느리면 방문자가 없을것이고 검색 순위에서도 점점 밀려나게 됩니다.

이때문에 아예 이미지를 외부에 두고 사용하는 CDN 서비스나 비슷하게 구글 드라이브에 올려놓고 사용하는 방법도 있는데

또 하나의 호스팅을 사용하는것과 마찬가지이기 때문에 대부분 유료입니다. 그런데 이미지가 많고 사이트가 글도 많이 올라오고 규모가 크다면 이 방법도 좋습니다.

 

워드프레스 사이트를 운영중이시라면 한번쯤 이런 이미지 최적화 플러그인을 사용해서 사용 전 후의 웹사이트의 용량 비교와 속도 비교를 해보는것도 괜찮은 방법입니다.