이미지의 크기 변화 없이 용량 조절로 로드시간 단축 하기

인터넷을 이용해 싸이트에 접속을  하다 보면 어떤 싸이트는 아주 빠르게 로딩이 되는 반면 어떤 싸이트의 경우에는 한참동안 타이틀 몇줄 외에는 콘텐츠가 보이지 않아  기다리다 그만 접속을 포기 하고 나와 버리는 경우를 왕왕 경험 해 보았을 것 입니다.

여러가지 요인이 있어 로드시간이 길어 질수가 있습니다만 오늘은 같은 조건일 경우 이미지의 포멧이나 용량에 따라 로딩 시간의 차이가 있음에 대해 알아 보도록 하겠습니다.

그리고 이렇게 로드시간을 많이 잡아먹는 이미지에 변화를 주어 최대한 빠르게 로드 되도록 하는 방법에 대해서 정리 해 보았습니다.

포스팅을 하는데 이미지나 동영상은 필수라고 해도 과언이 아닐 만큼 중요하기 때문에 이미지 사용은 불가피 합니다.

그럼에도 이미지나 동영상 파일 때문에 차칫 저품질에 걸릴수도 있거나 블로그 지수에 영향을 미칠수 있습니다.

블로그 방문자수에 비해 방문 유지 시간이 짧아서 이탈율이 현저히 높거나 전환율이 낮게 되면 어뷰징으로 간주 할수도 있기 때문입니다.

방문자의 유지시간을 향상 시키기 위해서 싸이트 로딩시간의 단축은 상당히 중요한 것이죠

처음 사진이나 스크랩으로 만들어진 이미지의 경우 확장자는 JPEG파일이 됩니다.

이 파일은 원본 파일로 포멧을 하지 않을 경우 화질은 고화질이지만 로드시간이 엄청 길기 때문에 포멧 또는 용량줄이기를 통해 로드시간을 단축 하지 않으면 안됩니다.

이미지 포멧을 위해 알씨가 보편적으로 많이 사용 되는 툴인것 같아 알씨를 이용 한 방법에 대해 알아 보겠습니다.

그러기 위해 자신의 PC에 알씨툴 설치를 필히 해야 겠지요

알씨는 네이버 검색으로 다운을 무료로 간단하게 받을수 있습니다.

화질도 좋고 로드 시간도 빠르게 하고 싶다면 이미지 크기를 최소화 하면 간단 하지만 그러나 이미지의 화질은 다소 떨어 지드래도 크기를 유지 하는것 또한 중요한 일이므로 포멧변환 하기와 크기는 그대로 두고 이미지 용량만을 줄이는 방법을 정리 해 보겠습니다.

이미지 용량은 사진접사 거리나 색의 다양성에 의해 결정 되며 기기의 픽셀용량에 따라 서도 파일의 크기에 영향을 많이 미치게 되는 것 같습니다.

일반적으로 제가 가지고 촬영하는 노트3의 경우 원거리 촬영은 4~5MB크기의 PNG 또는JPG 파일로 자동 포멧되어 저장이 되드군요

스크린 샷으로 이미지를 저장 하게 되면 PNG파일로 자동저장 되는 것 같고요 사진은 JPG파일로 자동 변환 저장 되는 것 같습니다..

자동포멧이 되어도 용량이 그다지 줄어 들지 않았을 경우에 용량줄이기를 실시 해주도록 합니다.

 

위사진은 스샷으로 포맷변환전 1.31MB크기의 png파일 입니다.

 

 

파일을 콤퓨터에 이동저장 한후 알씨를 구동 하고 알씨 메인툴바에서 도구를 클릭합니다.

 

도구를 클릭하면 다운해서 내려오는 부메뉴에서 포멧변환하기 를 클릭합니다.

 

이미지의 포맷 변환에 체크하고 다음 버튼을 클릭합니다. 

변경할 파일 포맷에서 원하는 파일 포맷을 선택한후 저장할 위치를 지정 하고 시작버튼을 눌러줍니다. 

그런후 변환 전과 변환후의 저장된 용량크기를 비교해 보시면 알겠지만 PNG파일을 JPG파일로 포맷 한것 만으로도 용량이 현저히 줄어든것을 확인 할수 있습니다.

 

포맷 변환전의 파일 크기는 1.31MB입니다.

포맷변환후 0.57MB로 용량이 약 3분의1정도로 줄어 든것을 확인 할수가 있습니다.

 

 

처음부터 JPG파일로 저장된 파일의 경우 용량의 크기로 변환을 하도록 해야 겠습니다.

위의 사진의 경우 원거리에서 촬영한 것으로 5.04MB크기의 JPG파일 입니다.

 

먼저 사진기나 폰의 사진을 컴퓨터로 이동 저장 해야 겠지요

그런후 알씨를 구동 하고 알씨의 메인툴바에서 파일 불러오기 한후

 

선택한 파일을 드래그로 아래 부분의 사진 보관함 쪽으로 끌어 놓습니다.

 

그리고 상단의 메인 툴바의 도구를 클릭 합니다.

 

용량으로 조절 하기에서 499KB정도가 화질도 무난하고 로드속도에도 적당한 용량이니 저는 499KB로 조정 했습니다.

확인버튼을 클릭 합니다.

용량으로 조정하기를 하면 이미지크기는 그대로 두고 픽셀의 용량으로 조절 하기 때문에 이미지크기를 그대로 이용할수가 있어 포스팅시 큰무리없이 뜻을 전할수가 있게 되겠지요

알씨 보관 함에다  여러 개의 이미지를 끌어 놓은후 하단부 우측 끝부분에 있는 일괄 편집기능을 이용 해 한꺼번에 여러장의 이미지도 포맷변환이나 용량 줄이기를 할수가 있습니다.

이제 이렇게 변환한 이미지를 포스팅에서 불러 사용하면 되겠습니다.

 

전후의 사진을 비교 해봐도 큰 차이를 느낄수 없을 정도 이지만 속도는 10배 이상이나  빨라진것을 확인 할수 있었습니다.

일반적으로 블로그나 싸이트에서 스크립트로 온로드를 설정 하지 않고 사용 하는 경우가 많은데요 그럴경우 모든 이미지가 로드 되기 까지 텍스터는 로드 되지 못하고 이미지가 전부 로드 되기 까지 기다리게 됩니다.

이미지는 텍스터에 비해 로딩속도가 매우 길기 때문에 텍스터를 먼저 로드한후 이미지를 로드 하게 되면 사용자가 글을 읽는 동안에 이미지가 차례로 로드 되기 때문에 방문자의 유지 시간을 훨씬 용이 하게 이끌어 낼수가 있는 것입니다. 

자바스크립트를 이용하여 이미지 온로드를 먼저 하는 방법에 대해 다음시간에는 포스팅을 해보려 합니다.

도움이 되셨다면 아래 공감 버튼으 한번 눌러 주시면 너무너무 감사 하겠습니다.