블로그 속도를 빠르게 - 이미지 용량 줄이기

블로그나 웹페이지 속도를 빠르게 하는 방법으로 CSS Sprites 하는 법을 알려 드렸는데요. 여러 이미지를 하나로 합쳐서 서버에 요청하는 횟수를 줄여서 사이트 로딩 속도를 빠르게 하는 방법입니다. 자세한 내용은 이전글을 참고하세요. 블로그 로딩 속도를 빠르게 - CSS Image Sprites, 블로그 추천, 구독 버튼 넣기 - CSS Image Sprite

이번에는 하나로 합치지 않고 이미지 자체의 용량을 줄이는 방법입니다. 설치 프로그램 하나와 웹사이트 하나에요. 두가지 모두 사용법이 매우 쉽습니다. 이렇게 용량을 줄인 이미지를 CSS Sprites로 합치면 블로그 로딩 속도를 더 빠르게 할 수 있습니다.

 

Shrink O'Matic

http://toki-woki.net/p/Shrink-O-Matic

Adobe AIR(http://get.adobe.com/kr/air/)를 먼저 설치하고 나서 Shrink O'Matic을 설치해야 합니다.

설치한 뒤에는 시작 메뉴의 프로그램 - Shrink O'Matic을 선택해서 프로그램을 실행시킵니다. 그리고 용량을 줄일 이미지를 드래그 드롭하면(끌어놓기) 됩니다. 한 번에 여러 개를 줄일 수 있습니다.

이미지 용량을 줄이는 것 외에, 크기를 바꾸거나 파일 형식을 바꿀 수도 있습니다. 크기나 형식을 바꾸려면 파일을 드래그하기 전에 창 위쪽에 있는 설정들을 수정해야 합니다.

Yahoo! Smush.it

http://www.smushit.com/ysmush.it/

파일을 올리거나 이미지의 웹 주소를 입력하면 용량을 줄이고, 결과를 보여줍니다. 결과는 압축파일로 되어 있어서 내려받아서 사용해야 합니다.

크기나 파일 형식을 바꾸는 기능은 없고, 이미지 용량만 줄 일 수 있습니다.

이 사이트는 파이어폭스에 YSlow(https://addons.mozilla.org/ko/firefox/addon/5369)을 설치하면 더욱 편하게 사용할 수 있습니다.

 

Shrink O'Matic은 컴퓨터에 설치되어 있기 때문에 실행하기가 쉽고 드래그 드롭이라는 간단한 방식으로 할 수 있어서 좋고요. Smush.it은 얼마나 줄었는지 결과를 볼 수 있고, 웹에 올려져 있는 이미지를 바로 변환할 수 있어서 좋습니다. 이미지마다 조금 차이는 있지만 같은 이미지더라도 대부분은 Smush.it의 결과물이 용량이 더 적습니다.

주의. 움직이는 gif나 배경이 투명한 png는 사용할 때 주의하세요. 만들어진 파일이 움직이지 않거나 배경이 하얀색으로 바뀝니다.

 

관련글

블로그 로딩 속도를 빠르게 - CSS Image Sprites
블로그 추천, 구독 버튼 넣기 - CSS Image Sprite