검색엔진 최적화 (SEO) 의 첫걸음, TinyPNG 를 이용해서 이미지 용량 줄이는 방법

이미지 크기 줄이기

 

들어가며

 

블로그 활동에 좀 진심이신 분들은, 자기 블로그가 검색엔진에 잘 노출되기를 누구나 바라실 것입니다. 저도 마찬가지고요. 검색 엔진에 잘 노출되어야 트래픽도 얻을 수 있고, 그만큼 자기 포스팅이나 광고가 노출될 가능성도 더 높아지겠지요. 그게 결국 수익으로 가는 것이기도 하고요. 

 

특히 구글 검색에 잘 노출되기 위해서는 SEO, 즉 검색엔진 최적화가 잘 이루어져야 한다는 게 널리 알려져 있습니다. 검색 엔진에 최적화되기 위해서 취해야 할 액션은 여러 가지가 있겠지만, 그 중에 가장 중요한 것 중 하나가 페이지 로딩 속도가 충분히 빨라야 한다는 것이겠지요.

 

구글을 포함한 검색엔진 입장에서 보았을 때, 사용자들이 좋은 검색 경험을 누려야 자기 검색엔진의 퀄리티를 사용자들에게 어필할 수가 있을 것이고, 사용자들에게 좋은 검색경험을 제공하기 위해서는 검색된 결과물들이 빠릿하고 퀄리티 좋은 페이지 로딩 속도를 보여 주는 게 중요하겠지요. 그렇게 되어야 사용자들이 그 검색 결과에 대해서, 그리고 나아가 그 검색 엔진에 대해 신뢰를 가질 수 있을 것입니다. 그런 측면에서 구글은, 인덱싱된 사이트들의 로딩 속도가 얼마나 빠른지를 검색 노출 우선순위를 결정하는 중요한 요소로서 판단한다고 합니다. 

 

블로그 포스팅 이미지 사이즈 줄이는 방법

 

포스팅에서 이미지가 차지하는 비중

 

블로그 포스팅의 로딩 속도를 좌우하는 주요한 요소 중 하나가 바로 이미지의 사이즈입니다. 이미지의 사이즈는 기본적으로 수백 kB 에서 많게는 수 MB 까지 차지할 수 있기 때문에, 텍스트 전체 내용보다도 사진 하나가 훨씬 더 많은 데이터를 소모할 수 있습니다. 그래서 많은 블로그 구루들은, 가급적이면 이미지를 사용하지 않는 것이 좋다고 하시는 분들도 계시고, 꼭 써야 한다면 이미지 퀄리티를 해치지 않는 범위 내에서 가급적이면 최소 용량으로 만들 것을 권하더군요.

 

저도 페이지 로딩 속도의 중요성에 대해 잘 모르던 시절에는 휴대폰으로 찍은 사진의 원본을 그대로 사용하는 편이었는데, 로딩 속도의 중요성을 알고 나서부터는 가급적 이미지의 사이즈를 줄이기 위해 노력하고 있습니다. 

 

TinyPNG 사이트 소개

 

아시는 분은 아시겠지만, 이미지의 사이즈를 줄여 주는 웹 서비스로 TinyPNG 가 가장 유명합니다. 이 사이트는 사용자의 컴퓨터나 모바일 폰 등의 로컬 기기에서 사진을 선택해서 업로드하면, 자체 알고리즘으로 파일 크기를 줄여주는 서비스를 제공하는 곳입니다. 제가 평균적으로 경험했을 때, 원본 크기에서 적게는 60%, 많게는 70% 까지 사이즈를 줄여 주는 것 같았습니다. 

 

이미지 사이즈 감소 원리

 

이미지를 압축하는 원리는, 사용자의 눈으로 감지되기 어려운 정도로 이미지의 색상 계조를 손실시키는 방식입니다. 사용자의 눈이 미세한 색상 차이를 감지하지는 못하지만, 가까운 단계의 색상을 뺌으로써 얻는 파일 사이즈의 이득은 큰, 소위 말하는 가성비 구간이 존재한다면, 약간의 품질저하를 감수하고 용량감소를 꾀하는 일종의 Trade-Off 방식이지요. 대부분의 미디어 파일 (음성, 이미지, 동영상 등)의 압축 방식은 이와 같은 손실압축 방식입니다. 

 

TinyPNG 사용방법

 

TinyPNG 를 사용하는 방법은 다음과 같습니다. 웹브라우저를 통해 TinyPNG.com 에 접속하셔서, 아래와 같은 화면이 뜨면 원하는 파일을 드래그 해서 넣으면 됩니다. 그러면 자동으로 파일이 압축되는데, 오른쪽에 다운로드 버튼을 누르면 압축된 파일이 로컬 컴퓨터에 저장됩니다. 

 

압축하는 과정. (상) TinyPNG 초기화면 (중) 파일 드래그 드롭 (하) 압축된 파일 표시

 

반복 압축하면 더 줄어들까?

 

처음 압축을 진행하면 대략 60~70% 정도 압축이 되고요, 한 번 압축된 파일을 계속해서 반복 압축하면 조금씩 사이즈가 줄어들기는 하는데, 체감할 정도는 아닙니다. 그래도 보통 수백 킬로바이트씩 하는 그림파일의 사이즈가 원본의 3분의1 정도로 줄어든다면, 페이지 로딩 속도와 데이터 소모량은 훨씬 개선될 수 있겠지요.

 

반복 압축에 따른 압축율

 

 

압축 전후 화질 차이

 

압축하기 전후 화질 차이를 잠시 비교해 보겠습니다. 언뜻 저배율 사진을 눈으로 봤을 때는 큰 차이가 나지 않지요. 확대 사진에서는, 완만한 색상 변화 있는 영역을 확대해서 보면 조금 차이가 납니다. 일곱 번 정도 반복해서 압축하면 화질 차이는 조금 더 나는 것 같군요. 이 역시도 저배율로 보면 큰 차이는 체감되지 않았습니다. 사진 전문 포스팅처럼 그림이 아주 중요한 포스팅이 아니라면, 이미지 손실을 감수하고 압축을 하는 게 좀더 좋겠다는 생각이 드는군요. 

 

압축전후 사진비교 (좌) 원본사진 (가운데) 1번 압축한 후 (우) 7번 반복 압축 후

 

마치며

 

오늘은 이렇게 간단한 방법으로 그림 파일의 크기를 획기적으로 줄일 수 있는 팁을 알려 드렸습니다. 아시는 분들은 많이 아시겠지만, 혹시 모르시는 분들이라면 사용자의 데이터도 아껴 드리고, 블로그 로딩 속도도 향상 시킬 겸, 검색엔진 최적화에 한걸음 더 가까이 갈 겸, 여러 가지 목적으로 다양하게 활용해 보시는 것이 좋을 것 같습니다.