블로그에 사용하는 이미지 용량 줄이기

블로그를 운영하면서 자신의 블로그 검색 노출을 위해 외부 스크립트 소스 코드를 이곳 저곳에서 가져와 HTML/CSS 편집에 집어 넣거나 사이드바에 설치하고 계실 겁니다.

제 블로그에도 많은 외부 스크립트가 적용되어 블로그 로딩 속도에 영향을 주는 것 같아 👉블로그 로딩속도 측정도 해보고 최적화에 신경을 쓰곤 있지만 잘 안되는 것 같습니다.

더블어 오늘은 블로그 페이지 로딩 속도 개선을 위해 글쓰기에서 삽입되는 이미지 용량을 줄이는 쉬운 팁을 공유해 볼까 합니다.

저는 그동안 어떤 웹사이트를 소개할 때 그 홈페이지 전체를 캡쳐하면 이미지가 너무 커 포토샵으로 페이지의 중요한 부분만 오려내어 👉손으로 찢은 듯한 효과를 줘 이미지 첨부를 하곤 했는데요.

이런 이미지의 포맷 파일은 찢겨나간 듯한 부분의 투명도를 보장받고 jpg 파일보다 해상도에서 선명한 png파일로 지정해 사용했습니다.

그러나 png 파일은 jpg 파일보다 고용량으로 1개의 페이지에서 많은 이미지를 사용해 글 작성을 완료하고 그 페이지를 열어보면 늦은 속도로 페이지가 열릴 텐데...포토샵으로 만든 png 파일의 용량을 획기적으로 줄여 주는 인터넷 사이트가 있습니다.

위 사이트는 회원 가입없이 최대 5mb 이하의 png 파일을 20개까지 한번에 업로드할 수 있는데요.

이 사이트를 이용하려면 웹 브라우저의 버전이 IE 10, 크롬 7, 파이어폭스 4, 사파리 5, 이상이여야 이용할 수 있다고 합니다.

사이트에 들어가서 이런 경고 메세지가 보이면 이용할 수 없구요.

Drop your .png files here! 문구가 보여야 이용할 수 있습니다.

따라서 윈도우 XP 사용자나 7에서 IE 10이하 버전을 사용하시분은 크롬으로 접속하셔야 할 듯...

🪶TinyPNG에서 png 용량줄이기

TinyPNG에 접속하셨다면 빨간 체크 박스로 표시된 부분에 저장되어 있는 png 파일을 드래그 & 드롭이나 클릭으로 파일을 불러 옵니다.

파일을 갖다 놓으면 자동으로 압축을 하구요. 제가 불러 온 원본 파일 용량이 276.9kb였는데 77.5kb로 압축되고 72%의 압축율로 나타났군요. 압축된 이미지를 저장하려면 download로 표시된 부분을 누르면 지정된 폴더로 저장됩니다.

이렇듯 사이트 이용법은 간단하구요.

제가 만든 원본 이미지와 압축 이미지를 비교하는 것으로 포스팅을 마치겠습니다.

포토샵으로 만든 원본

압축본