글을 작성하면서 글로만 설명이 안 되는 부분도 있기 때문에 글 내용의 전달과 이해를 돕기 위해서 사진을 넣기도 합니다. 백 마디 글보다 한 장의 사진이 더 전달력이 높습니다. 또, 텍스트만으로 이루어진 페이지는 읽는데 지루함을 줄 수가 있어서 중간중간에 관련 사진을 넣어서 읽는 즐거움을 주어야 합니다.
그런데, 티스토리에 첨부 파일 용량의 10MB 제한이 20MB로 상향되었다는 공지가 있었다는 것을 뒤늦게 알게 되었습니다.
저는 티스토리 블로그에 사진을 올리면 자동으로 사이즈가 자동 조절되면서 올라가는 줄 알았습니다. 그리고 무제한으로 올릴 수 있다고 생각했었습니다. 그래서 그동안 포스팅해오면서 신경도 안 썼습니다.
페이지 로딩 속도의 중요성
페이지에 글과 함께 사진을 올릴 때 고화질 이미지를 올려서 방문자들에게 만족도를 높이려고만 했지, 페이지 로딩 속도는 생각도 하지 못했습니다. 그래서 이미지 용량이 페이지에 어떤 영향을 주는지도 모르고 포스팅해 왔습니다.
실제로 구글 애널리틱스의 검사보고서에 따르면 '페이지 속도가 중요하다. 페이지 로드 시간이 20초에서 2초로 줄어들면 사용자가 사이트를 떠날 확률이 50% 감소하는 것으로 나타났다.'라고 합니다.
그래서 포스팅할 때 낮은 속도의 데이터로 접속하는 방문자들을 위해 이미지 용량을 줄이는 작업을 해주어야 한다는 것을 알았습니다. 특히, 요리·맛집 관련, 여행, 제품 리뷰 등을 테마로 하는 블로그는 이미지가 많이 들어가기 때문에 해당될 것 같습니다.
애드센스 수입은 검색자가 내 블로그에 들어와 정보글을 보다가 노출된 광고를 클릭해서 본다거나 구매로 이어지는 경우에 수익이 발생되는 구조입니다.
하지만, 이미지 로딩 시간이 길어지면 그로 인해 페이지 중간에 이탈하는 방문자들이 생길 것입니다. 이를 방지하기 위해서 할 수 있는 것 중에 하나는 이미지 용량을 수동으로 줄여서 올리는 방법입니다. 현재로는 개인들이 각자 이미지 용량을 줄여 올리는 수 밖에는 없는 것 같습니다. 그럼, 블로그에 올릴 이미지를 어느 정도로 줄여야 할까요?
그래서 블로그에 글을 쓸 때, 업로드할 사진의 크기와 용량을 어떻게 최적화해야 하는지 알아보겠습니다. 먼저, 그전에 몇 가지 용어부터 살펴보겠습니다.
이미지 해상도
해상도의 단위는 'dpi'라고 하며, 'Dot Per Inch'의 약자입니다. 즉, 1인치의 폭 안에 얼마만큼 많은 점이 있는지 수치로 나타낸 것입니다. 인치(inch)는 대각선 길이를 말하며, 1인치는 가로세로 2.54cm을 뜻합니다. 따라서 수치가 높을수록 고해상도가 됩니다.
수치가 높을수록 이미지의 정밀도가 높아지는 것은 사실이지만, 웹(Web)이나 모바일 같은 디스플레이는 72 dpi이상 구현이 어렵기 때문에 주로 웹용 해상도 표준은 72 dpi가 됩니다. 하지만, 인쇄용 파일은 출력해서 사용하기 때문에 300 dpi 이상이어야 합니다.
그러므로 블로그에 사용할 목적으로 하기 때문에 웹용인 72dpi로 작업하는 게 좋겠죠.
이미지 크기
이미지를 블로그에 올리려면 얼마나 줄여야 할까요? 기준이 없어서 저는 블로그의 가로폭에 맞춰볼까 합니다. 그래서 먼저 사용하고 있는 스킨의 글 영역 가로폭이 얼마인지 알아보겠습니다. 참고적으로 제가 사용하는 스킨은 'Book Club' 스킨입니다.
1. '스킨 편집'을 클릭합니다.
2. 'html 편집'을 클릭합니다.
3. 상단의 'CSS' 탭을 선택한 다음, 마우스 커서를 HTML 본문 아무 곳이나 클릭합니다.
4. 키보드에 ctrl+F(찾기)를 누르면 상단에 입력란이 나타납니다. 'max-width'라고 입력합니다. 아래에 검색 결과가 나타납니다.
제가 사용하는 'Book Club' 스킨의 가로폭은 1080px입니다. PC에서 글을 작성할 때의 본문의 가로 크기인 1080px보다 큰 사이즈의 이미지는 용량을 1080px까지 줄여야겠습니다. 이제 기준이 생겼네요.
그런데, 'px'라는 단위가 나옵니다. 이것은 이미지의 크기를 나타내는 단위인 픽셀(Pixel)의 약자입니다. 픽셀은 그림 요소(Picture Element)를 줄여서 만든 용어입니다.
참고적으로 네이버 블로그의 가로폭 크기는 966px라고 합니다. 아무리 크게 이미지를 올려도 다른 사람들에게는 966px로 보인다고 합니다.
이미지 용량
스마트폰 카메라의 고화수 이미지 파일을 아무런 편집 없이 그대로 쓰는 경우에는 10MB가 넘는 경우가 대부분이어서 문제가 된 것 같습니다. 한번 확인해 보겠습니다.
예전에 찍은 사진입니다. 사진을 오른쪽 마우스 클릭한 후, 팝업 메뉴에서 맨 밑에 있는 '속성'을 선택합니다.
이미지 파일 크기가 4.92MB로 나옵니다. 따라서, 첨부할 파일 용량의 제한이 20MB이므로 이미지 업로드 시 용량×개수를 계산해서 20MB를 넘지 않도록 해야 할 것 같습니다.
20MB ÷ 4,82MB = 4.14MB
즉, 원본 상태로라면 사진 4장밖에 못 올린다는 결론입니다. 따라서 필요한 사진을 많이 올릴 생각이라면 사진 용량을 줄여야 합니다. 이미지 용량은 대략 300~500KB 정도면 적당하다고 합니다. 용량을 작게 만들면 만들수록 페이지의 로딩 속도를 빠르게 할 수 있습니다.
원본 사진을 그대로 업로드해 보겠습니다.
티스토리 블로그에서는 3000px 이상인 이미지는 업로드 시, 자동으로 3000px로 줄여주네요.
용량을 줄이겠다고 단순히 이미지 크기를 확 줄여버리면 크기에 비례하여 용량도 줄어들어 이미지의 노출 퀄리티를 보장할 수 없습니다. 따라서 위에서 살펴본 기준으로 삼아서 줄이면 됩니다. 해상도는 72 dpi, 크기는 1080px, 용량은 크기를 줄이면 자동으로 따라서 줄어듭니다.
이미지 해상도는 유지하면서 사진 용량만 줄이는 방법
사진의 크기 및 용량을 줄이는 방법은 많이 있습니다. 윈도우에서 기본으로 제공하는 그림판, 사진 프로그램, 윈도우 캡쳐 도구 등을 이용할 수도 있고, 외부 전용 프로그램을 다운로드하여서 사용할 수도 있으며, 사진 사이즈를 줄여주는 웹사이트를 이용할 수도 있습니다.
하지만, 저는 가장 쉬운 방법으로 윈도우 '그림판'을 이용해서 크기와 용량을 줄여보겠습니다.
1. 먼저 줄이고자 하는 사진 파일에서 오른쪽 마우스 클릭해서 팝업 메뉴가 나타나면, '연결 프로그램'의 '그림판'을 선택합니다.
2. 그림판 메뉴에서 '크기 조정'의 '픽셀' 선택합니다.
3. 가로 입력란에 1080을 입력하면 '가로 세로 비율 유지'가 체크되어 있기 때문에 세로는 자동으로 표시됩니다. 그러고 나서 '확인'을 클릭합니다.
그럼 이렇게 크기가 줄어든 것을 볼 수 있습니다. 크기를 다 줄였으면 이제 사진을 저장합니다.
크기를 줄인 사진과 원본 사진은 모니터상에서 비교했을 때, 육안으로는 큰 차이를 못 느낍니다.
원본 사진의 용량이 4.92MB였는데, 568KB로 줄어들었고, 사진 크기도 4000×2252픽셀에서 1080×608픽셀로 줄어들었습니다. 해상도는 그대로 72 DPI입니다.
그럼, 한 번 계산해 보겠습니다.
20,000kb(20mb) ÷ 568kb = 35.2kb, 즉 한 포스팅에 이미지 35장 정도는 올릴 수 있다는 겁니다. 실제로 업로드한 사진들을 모두 선택하면 용량이 얼마인지 탐색창 왼쪽 밑에 나타납니다. 현재 이 포스팅 글에 15장의 이미지가 올라갔으며, 총용량은 7.99MB밖에 안됩니다.
당연히 처음 이미지보다는 미세하게 이미지 손실이 있을 수 있겠지만, 웹에 올려서 보면 어차피 비슷해 보이기 때문에 큰 화질 손상을 느낄 수 없습니다.
이렇게 파일 크기를 줄여서 올린 사진이 훨씬 더 빨리 뜨는 효과를 줄 수 있고, 또한 데이터 소모도 적기 때문에 블로그 방문자가 사진이 뜨기를 기다릴 필요도 없습니다.
오늘은 해상도를 유지하면서 사진 크기와 용량을 줄이는 방법에 대해서 알아보았습니다. 이미지의 크기와 용량을 줄이는 방법은 상당히 많기 때문에 한 번씩 사용해보고 제일 편한 방법을 선택하면 되겠습니다.
그럼, 다음 시간에 뵙겠습니다.
감사합니다.
블로그에 올릴 이미지에 테두리선 넣는 방법
블로그에 사진이나 이미지를 업로드할 때, 경우에 따라서는 테두리를 넣어줘야 할 때가 있습니다. 일반 사진은 테두리선을 넣을 필요가 거의 없지만, 편집된 이미지, 특히 바탕이 흰 이미지를
makemoney8282.tistory.com
'블로그로 돈벌기' 카테고리의 다른 글
| 블로그에 이미지 업로드 시, '대체 텍스트' 꼭 입력해주세요 (0) | 2023.01.04 |
|---|---|
| 블로그에 올릴 이미지에 테두리선 넣는 방법. 포토스케이프 X (0) | 2023.01.03 |
| 수익형 구글 블로그(Blogspot) 레이아웃 설정하기 (2) | 2023.01.01 |
| 애드센스 승인 후 해야 할 일들 2부. 애드센스 광고 수동 설정 (14) | 2022.12.31 |
| 애드센스 승인 후 해야 할 일들 1부. 개인 정보 보호 설정 (6) | 2022.12.30 |
댓글