XE에서 워드프레스 이전 후 이미지 최적화를 위한 이미지 변환 프로그램 비교

|

오늘은 가볍게 이미지 크기 조절 프로그램에 대한 이야기를 해보고자 합니다.
갑자기 Image Resize program이야기를 꺼내는 이유는 이번 호스팅 계정 용량을 최적화하면서 서버에 있는 이미지 사이즈를 한꺼번에 줄일 수 있는 방안을 고민하면서 찾아보았던 Image Resize program에 대해서 공유하고 싶어서입니다. 이거하면서 엄청 삽질을 해서 다른 분들은 이런 삽질을 하지 않기를 바라는 마음에 정리해 봅니다.

1. Image Resize program 검토 배경

현재 운영중인 happist.com은 2008년부터 시작해 거의 9년째 운영중입니다. 그 이전에는 worldbest.pe.kr이란 주소로 홈페이지를 운영했었지요. pe.kr이라고 개인용 도메인을 분양할시 worldbest라는 주소를 얻어 운영했으니 상당히 오랜도안 홈페이지를 운영해 온 듯 싶습니다.

오랬동안 운영해왔다고는 하나 호스팅사에 맡겨두고 가끔 글을 올려주는 정도로 깊이 관여하지는 않았습니다.
당연히 최적화는 별로 고민하지 않았습니다.
그래서 DSLR 사진을 jpg로 변환해 그대로 올리기도 했고 핸드폰 사진을 그대로 사이트에 올리기도 했습니다. 지금 이미지 파일크기들을 살펴보니 그랬더라구요.

어느날 갑자기 계정 용량이 2GB가 넘더니 금새 4GB에 육박한 겁니다. 2015년까지 이용했던 호스팅사는 계정 용령을 무제한으로 주는 곳이었습니다. 그러다보니 용량 최적화에대해서는 신경을 쓰지는 않았고 아니 트래픽에 대한 고민을 많이했던듯 싶습니다. 그 고민의 방향은 어디가 저렴하면서도 트래픽을 많이 주는지를 생각했지 용량 자체를 줄이려는 생각을 하지 못한겁니다.

이번 워드프레스로 이전하면서 사양이 빵빵한 곳으로 옮기려니 계정용량이 많이 아쉬웠습니다. 그러면서 계정 용량을 최적화해보자는 생각을 했습니다.

2. 계정용량 최적화의 일환으로 image 용량 최적화

상당 기간동안 happist.com의 정체성을 사진 공유의 장으로 활용했었습니다. 사진이 제일 중요하고 그 다음이 마케팅 관련 내용이었지요. 그러다보니 얼치기 포토그래퍼로서 아래와 같은점을 중시했습니다.

  • 고화질의 이미지를 고집했고
  • 와이드한 사진을 시원스레 감상할 수 있도록 폭을 1280이상으로 설정하고
  • 압축은 사진 quality에 배치되므로 압축은 최소화 한다

그러다보니 웹상에서는 불필요할정도로 고해상도의 이미지를 올리곤 했던 것입니다.
그러면서 순식간에 4GB의 용량이 찬것입니다.

이런 불필요한 이미지들을 최적화하기로 했습니다.

2.1. 서버에 있는 이미지를 최적화 방법론

뭐 거창하게 방법론이란 단어를 썼지만 아주 간단합니다.

서버에 있는 이미지를 최적화하기는 XE에서의 이미지 축소 모듈이나 워드프레스에서 이미지 최적화 플러그인이 있지만 한계가 있어 근원적인 해결책이 될 수 없습니다.

XE에서 풀베개 등등 모듈이 있긴 한데 이들은 계정용량을 줄이는 것보다는 트랙픽을 줄이도록 섬네일을 만들고 원본 백업해 놓는 등 계정 용량 최적화와는 조금 거리가 있어 보입니다. 워드프레스 플러그인도 트래픽 축소에 방점을 두고 있는 것 같습니다.

그리고 저는 워드프레스로 이전하고 있는 상태로 XE의 모듈을 사용할 수도 없고 워드프레스의 미디어 라이브러리에 등록된 것도 아니므로 기존 방식을 적용할 수는 없었습니다.

그래서 서버의 이미지 파일을 백업받아 resize한 후 다시 서버에 올리는 방법을 사용했습니다.
무식하지만 가장 효과적인 방법
이라고 생각했구요. 결과도 그렇습니다.

2.2. 이미지 변환 프로그램의 조건

아래는 XE에서 이미지 파일을 저장해 놓은 하이라키를 FTP 파일질라로 살펴본 것 입니다.

XE 이미지 저장 폴더 하이라키_파일질라

DB에서 이미지를 불러오기 위해서는 위 구조 그대로 유지한채 resizing해서 서버에 다시 올려줘야 합니다.

  • 복잡한 폴더 위치를 그대로 유지해야하고
  • 파일 이름을 그대로 유지해야 하며
  • 파일 이름을 유지한다는 것은 이미지 포맷을 유지한다는 것이죠
  • 글에서 배치들이 정해져 있으므로 폭과 높이로 표현되는 이미지 크기를 유지해야 합니다.

서버에서 이미지를 down 받아보니 2.5GB 용량에 폴더만 2739개, 파일수는 17475개나 됩니다.
이를 일괄 resizing할 수 있는 프로그램을 찾아서 작업을 해야 합니다.
이를 해줄 수 있는 프로그램이 있을까요?

2.3. 조건에 맞는 이미지변환 프로그램 – FotoSizer

구글에서 Batch Photo resizer로 검색하니 상당히 많은 프로그램이 나옵니다.
아이러니하게도 이런 프로그램의 상당수가 오래된 프로그램들이라는 것입니다.

너무 많은 시간을 투여할 수 없으므로 널리 알려진 프로그램을 중심으로 비교에 들어갔습니다.

우리가 많이 쓴 PhotoWorks, Photoscape는 물론 외국에서 많이 쓴다는 Faststone Photo Resizer등등을 설치해가면서 비교를 해보았습니다.

폴더별로 열고 저장할 수 있는지, 이미지 포맷을 유지할 수 있는지, 폭과 높이를 유지할 수 있느지 등등

아래는 이런 조건을 가지고 프로그램별로 검토해본 것입니다.
프로그램마다 장점이 뚜렸다고 일부 기능은 뛰어나지만 꼭 한두가지에서 걸리더군요

이런 비교를 통해서 모든 조건을 만족시키는 프로그램은 FotoSize라는 프로그램이었습니다.

이미지 변환프로그램 비교

▽ FotoResizer,
디자인은 구리지만 다행이 모든 조건을 충족시켜주는 프로그램이다.

FotoResizer main

▽ Batch Picture Resizer,
무료버젼은 계속 구매하라는 메세지가 스팸성으로 뜨는 프로그램으로
절대로 선택해서너는 안되는 프로그램이다.
이 프로그램은 이미지 사이즈 그대로 유지 기능이 없다.

Batch Picture Resizer

▽ FastStone Photo Resizer,
FastStone Photo viewer는 한때 널리 사용되던 이미지 뷰어인데
Resizer 프로그램도 제공하고 있다.
이 또한 이미지 포맷 유지가 안되어 탈락

FastStone Photo Resizer 실행 모습

▽ IrfanView,
IrfanView도 한때 널리 사용되던 이미지 뷰어인데
이 또한 이미지 포맷 유지가 안되어 탈락

IrfanView

3. 결과 및 맺는말

FotoResizer를 사용해서 이미지를 최적화한 결과 초기 2.54GB이 이미지크기가 0.99GB로 대폭 줄었습니다.
거의 61%나 감소했으니 상당히 성공한 사례가 아닌가 싶네요.
덕분에 당분간 계정 용량때문에 스트레스 받을 일은 없을 것 같습니다.

결론적으로 우리가 많이 쓰는 PhotoWorks, Photoscape는 하나 하나의 개별 이미지를 최적화 시 유리한 프로그램이며
서버에 보관중인 이미지 파일의 최적화처럼 특수 목적의 이미지 변환은 을 한다면 FotoSize을 사용하라고 권해주고 싶습니다.

참고로 여기에서 엄급된 것들은 윈도우즈 호환 프로그램들 입니다.

Subscribe
Notify of
guest
10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Matthew

“아이러니하게도 이런 프로그램의 상당수가 오래된 프로그램들이라는 것입니다.” – 아이러니 하다기 보다는 요즘 젊은 그래픽 디자이너 친구들은 학교에서 교육을 제대로 받아서인지, 이미지 렌더링을 할때 웹 이미지 와 프린트 이미지 렌더링을 별도로 하는 습관이 몸에 베여있어서 그런 것 같습니다.

또 뽀샵같은 이미지 렌더링 소프트웨어에 웹 용 이미지 저장 옵션이 달려있기도 하구요.

웹에서는 아무리 resolution 이 높은 이미지라고 하더라도 72dpi – 130 dpi 사이에서 구현됩니다. (애플쪽 기기들이 더 높은 dpi 를 구현하지만, PC 쪽은 그냥 72dpi 라고 생각하시면 됩니다.)

그래서 resolution 이 높은 이미지를 웹에 올리는거는 그냥 bandwidth 낭비 입니다. 아무런 의미가 없습니다.

애플은 retina display 를 사용하지만 이경우 이미지의 dpi 를 두배로 올리지 않고, media query 로 이미지를 압축해주는 기법이 사용됩니다.

https://css-tricks.com/snippets/css/retina-display-media-query/

지금 어느정도 이미지 최적화가 되신상태신데, 아직도 충분히 더 (50% 이상) 압축/최적화 하실 수 있습니다.

그리고 이런 작업은 본문에서 언급하신 것 처럼 힘들게 작업 안하셨어도 되는 일 입니다.

그냥 플러그인 하나 쓰셨으면 자동으로 처리되는거였거든요. ㅠㅠㅠㅠ

https://wordpress.org/plugins/wp-smushit/ (이게 지금 현재 가장 많이 쓰이는 플러그인 입니다.)

https://wordpress.org/plugins/ewww-image-optimizer/ (예전에는 이게 가장 좋다고 했었는데 SmushIt 에 약간 밀린듯 하고: 워드프레스 플러그인들은 서로 성능향상을 위해 항상 경쟁하기때문에 어떤 제품이 제일 좋다고 확언하지 못합니다. )

다른 제품들도 몇개 더 있는데…

https://wordpress.org/plugins/tiny-compress-images/

저는 개인적으로 오래전 써본 제품들이라 잘 기억이 나지 않지만, 버튼 하나만 누르면 전자동으로 이미지 최적화 해줍니다.

돈 아껴주는 플러그인들 입니다.

물론 CDN 을 사용하신다면 더욱더 엄청나게 호스팅 비용을 절감하실 수 있습니다. 전세계적으로 평균 로딩속도도 빨라집니다.

워드프레스.com 의 jetpack 플러그인을 설치하시면 photon 기능이 달려 있는데 이 photon 이 무료 CDN 입니다.

https://wordpress.org/plugins/jetpack/
https://jetpack.com/support/photon/

caveat: jetpack 플러그인이 많이 무거워서 싫어하시는 분들도 계십니다. (저도 안씁니다.) 하지만 워드프레스 입문자 입장에서는 매우 유용한 플러그인 입니다.

아, 그리고 PC 에서 batch 작업하시는 routine 이 더 편하게 느껴지시면, RIOT 같은 좀더 근대적인(?) 제품도 존재합니다. ㅎㅎ

http://luci.criosweb.ro/riot/

Matthew

어느 웹문서를 살펴봐도 보통 이미지가 차지하는 비율이 최소 60% 이상이 됩니다.

그래서 이미지 최적화는 bandwidth 사용과 상관없이 모든 웹관리자들이 매우 중요하게 생각하는 부분 입니다

Speed = SEO 라고 해도 과언이 아니기 때문 입니다.

(ttfb 순위와 검색순위 가 거의 동일합니다)

비슷한 컨텐츠가 존재하면 구글은 빠르게 로딩되는 문서부터 노출시켜주기 때문입니다.

그리고 로딩속도를 가장 많은 폭으로 향상시켜줄 수 있는 부분이 이미지 입니다

그래서 이미지 최적화는 SEO 때문에 매우 중요합니다

Matthew

좀더 정확하게 말하자면, ttfb = SEO 랭킹 입니다.

http://hackya.com/kr/ttfb-에-대한-개념탑재를-해봅시다/

많이 전문적인 내용이라 위 글 읽기가 힘드실 수도 있는데, (개발자 분들도 거의 대부분 이해하지 못하는) 그래도 인지하고 계시면 로딩속도가 어떻게 SEO 에 영향을 주는지 이해가 되실거에요.

제글을 보고 많이 놀라셔서 이미지 최적화 작업을 빨리 하시게 되실지도. ㅎㅎㅎ

우성군

와우 저는 PhotoWorks만 써봤는데 다양한 프로그램들이 많군요.

noyuna

저도 호스팅 서버의 이미지 용량 때문에 고민이었는데 fotosizer로 크기를 75% 줄이니 용량이 1/10로 줄었어요. 정말 고맙습니다!