블로그를 운영하면서 이미지를 많이 사용하게 되는데, 이미지의 용량에 대해 제대로 파악하고 업로드하셨나요?
블로그 글 하나 즉 하나의 웹페이지에 대해, 구글에서 추천하는 용량이 있는데, 그 용량을 초과할 경우 SEO에 안좋은 영향을 줄 수 있기에, 특히 웹페이지의 용량에서 가장 큰 부분을 차지하고 있는 이미지를 업로드할 때 용량조절에 신경 쓰는 것이 필요하겠습니다.
이 글에서는 티스토리 블로그를 운영하면서 실제로 겪었던 실수를 분석하고, 구글에서 추천하고 있는 웹페이지 용량을 알아보고, 이미지 용량을 조절하는 방법에 대해 정리해보았습니다.
1. 이미지 업로드에 관한 실수
티스토리 블로그를 운영하면서 이미지 업로드에 관해 아래와 같은 두가지 실수를 범하여, 정성껏 작성한 블로그인데도 노출이 제대로 되지 않고, 유입도 적었던 경험이 있습니다.
1-1. 고화질 이미지
블로그 방문자들이 최대한 고화질 이미지를 볼수 있게끔 하기 위해, 고화질 대용량 이미지 파일을 그대로 업로드했었습니다.
여행후기 글을 작성하다보면은, 이쁘고 멋지게 찍은 사진들을 최대한 그대로 블로그 방문자들에게 보여주고자, 또한 용량을 줄일 경우 화질이 나빠지지 않을가 우려되어 그대로 블로그에 업로드하는 경우가 많겠습니다.
핸드폰으로 찍은 사진이더라도 대부분 한장에 2MB이상 하는데, 10여장 심지어 수십여장 업로드했으니, 블로그 글 하나에만 용량이 수십 심지어 수백MB가 되기도 했습니다.
그 결과, 아무리 열심히 작성한 글이더라도 구글 검색에 노출이 잘 되지 않았었고, 뒤늦게 이미지 파일의 용량이 클 경우 페이지 표시속도에 영향을 주게 되어, 결국 SEO에 좋지 않다는 것을 알게 되어, 작은 사이즈라고 생각했던 1MB이하로 줄여 바꾸어주었지만, 역시 효과는 미미했습니다.
1-2. 작은 이미지 파일의 개념
이미지 파일의 용량이 얼마 되어야 작다고 인식하나요?
중학교 때부터 컴퓨터를 접하면서, 너무나도 당연히 1MB이하의 이미지 파일이면 충분히 작은 사이즈라고 생각했는데, 완전 잘못된 인식이었습니다.
실제 블로그에 추천되는 이미지 파일의 용량은 200KB좌우로, 사진 파일의 용량을 잘 알고 있는 분들이라면 깜짝 놀랄만한 사이즈가 되겠습니다.
200KB가 어떻게 계산이 되었는지 아래 계속 정리해보겠습니다.
2. 블로그 이미지 파일 용량의 기준 200KB좌우
구글은 블로그 이미지 파일의 용량크기에 대해, 명확한 기준을 제시하고 있지 않았지만, 웹페이지의 사이즈에 대해서는 아래와 같은 언급이 있습니다.
2-1. 구글이 추천하는 웹페이지 용량
페이로드 크기를 줄이는 방법
총 바이트 크기를 1,600KiB 미만으로 유지하는 것을 목표로 합니다. 이 목표는 10초 이하의 상호작용 시작 시간을 달성하면서 이론적으로 3G 연결에서 다운로드할 수 있는 데이터의 양을 기반으로 합니다.
출처: 방대한 네트워크 페이로드 방지
구글에서는 웹페이지의 사이즈를 1,600KiB 즉 1.6MB로 추천하고 있습니다.
그 이유를 요약하자면, 웹페이지의 용량에 따라 표시속도에 영향을 주게 되는데, 스마트폰 3G의 속도로 계산했을 때, 1.6MB미만일 경우 웹페이지 표시에 소요되는 시간이 사용자의 편리성에 영향을 주지 않는다는 것이겠습니다.
결국 웹페이지 사이즈가 너무 크면 SEO에 안 좋은 영향을 준다는 것이고, 검색의 노출순위에도 영향을 준다는 것으로 이해해도 되겠습니다.
KiB와 KB는 기본적으로 동일하지만, 상황에 따라 다르게 받아들이는 사람들이 있어, 정확하게 표현하기 위해 KiB라는 단위가 사용되고 있습니다.
1 KiB = 1,024B
1 KB = 1,024B 또는 1 KB = 1,000B
2-2. 구글이 추천하는 이미지 용량 산출
구글이 추천하는 웹페이지의 사이즈를 알수 있기에, 블로그에 업로드해야 할 이미지의 용량크기도 쉽게 산출이 되겠습니다.
블로그 글 하나에 10개의 이미지를 업로드 한다면, 이미지 하나의 크기가 100KB정도가 좋다는 것이고, 5개의 이미지를 업로드 한다면, 이미지 하나의 크기가 200KB정도가 좋다는 것이겠습니다.
즉 블로그에 업로드하는 이미지 파일의 용량이 작으면 작을 수록 좋다는 것이고, 블로그 하나에 이미지 5개정도 업로드한다고 가정했을 때, 이미지 파일당 200KB 좌우로 유지하는 것이 좋겠다는 결론을 얻을 수 있다는 것입니다.
물론 이것은 추천기준이 되겠으며, 또한 인터넷속도가 많이 빨라진 상황에서 무조건 이렇게 해야 한다는 것은 아니겠으나, 너무 큰 이미지 파일은 업로드 하지 않는 것이 좋다는 것이겠습니다.
결국 이미지 파일의 용량을 가능한 줄여야 한다는 것인데, 이미지 파일들은 어떻게 용량에 대해 차이를 가지는지 알아볼 필요가 있겠습니다.
3. 워드프레스 블로그에 추천하는 이미지 파일
이미지 파일에는 여러가지 형식이 있는데, 파일형식에 따라 이미지에 포함된 정보가 다르게 되며, 그에 따라 이미지의 용량에도 많은 차이가 있겠습니다.
깊게 파악할 필요는 없지만, PNG 형식은 기본적으로 용량이 크기에 그대로 업로드하는 것은 절대로 추천하지 않고, 가장 추천하는 것은 JPEG 형식이 되겠습니다.
3-1. 가장 일반적인 이미지 파일형식
가장 많이 사용되는 이미지 파일형식은 PNG와 JPEG가 되겠는데, 위 캡쳐에서 알 수 있다싶이, 똑같은 이미지가 PNG 형식일 경우 용량이 1.83MB, JPG형식일 경우 용량이 261KB로, 즉 PNG형식보다 JPEG형식의 이미지 파일 용량이 더 작다는 것으로, 블로그에는 JPEG형식을 더 추천할 수 있다는 것이겠습니다.
JPG와 JPEG는 똑같은 것이고, 예전에 파일 확장명을 문자 3개로 정해야 했었기에 JPG로 하다가, 지금은 파일 확장명에 문자 4개까지 가능해져 JPEG를 사용하게 되었는데, 결국 똑같은 파일형식이 되겠습니다.
또한 일반적으로 사진보다 일러스트의 용량이 더 작기에, 가능한 일러스트를 사용하는 것도 좋겠습니다.
3-2. 이미지 업로드 전 압축 추천
기본적으로 JPEG 형식의 용량이 작고, 일러스트의 용량도 작지만, 직접 찍은 사진 또는 인터넷에서 구한 무료 소재들은 기본적으로 용량을 줄이는 프로그램을 사용하는 것이 좋겠습니다.
핸드폰으로 찍은 사진의 용량은 기본적으로 2MB이상이 되고, 무료 소재들도 500KB~10MB 정도 되기에, 추천 용량 200KB보다 압도적으로 크겠습니다.
그래서 블로그에 이미지를 업로드 하기 전에, 꼭 이미지 파일의 용량을 줄여야 한다는 것인데, 이미지 파일의 용량을 줄이게 되면은 확실히 화질이 떨어지는 것은 맞지만, 현대의 압축 기술은 일반적으로 눈에 띄지 않는 수준의 화질 손실로 파일 크기를 효과적으로 줄일 수 있기에, 크게 걱정하지 않아도 되겠습니다.
4. 이미지 압축 사이트 Squoosh 추천
이미지 용량을 줄여주는 사이트 및 프로그램은 엄청 많지만, Squoosh를 가장 추천해봅니다.
4-1. Squoosh 추천 이유
(1) Google Chrome Labs에서 개발하고 제공
(2) 무료 사용
(3) 압축된 화질과 원본 이미지의 화질을 비교하면서 압축률 선택가능
(4) 이미지를 서버에 전송하여 처리하는 것이 아니어서 보안적인 면에서 안심
무엇보다 가장 평가할만한 것이, 이미지를 서버에 전송하지 않고 압축을 할 수 있다는 것인데, 비밀스러운 이미지들 또는 민감한 이미지들을 압축할 때도 걱정이 없다는 것이겠습니다.
4-2. Squoosh 사용법
Squoosh 사이트에 접속하여, 이미지 파일을 끌어넣으면 바로 위처럼 압축화면이 나타나게 됩니다.
왼쪽이 압축 전의 이미지 내용이고, 오른쪽이 압축 후의 이미지 내용으로, 압축 후의 파일형식을 선택할 수도 있고, 사이즈도 변경할 수 있고, 압축률도 변경할 수 있겠습니다.
중간에 좌우 표시가 있는 부분을 마우스로 움직일 수 있는데, 왼쪽이 압축 전의 이미지 화질이고, 오른쪽이 압축 후의 이미지 화질로, 이미지 화질을 비교하면서 압축률을 변경할 수 있겠습니다.
압축 후의 화질을 확인하고 문제가 없다면은, 오른쪽 하단의 다운로드 버튼을 클릭하면 이미지 파일의 용량 줄이기가 끝난 것이겠고, 다운한 이미지를 블로그에 업로드 해주면 되겠습니다.
이미 블로그에 업로드된 이미지에 대해, 플러그인을 사용할 수도 있고, 하나하나 수동으로 이미지 파일을 바꿔줄 수도 있겠습니다.
5. 블로그에 삽입한 이미지 파일 바꾸기
블로그에 업로드한 이미지 파일이 많을 경우, 플러그인을 통하여 일괄적으로 이미지 파일의 용량을 줄일 수 있겠으며, 이미지 파일이 아직 많지 않다면은 수동으로 하나하나 바꿔주는 것이 좋겠습니다.
플러그인은 많으면 많을 수록 블로그의 퍼포먼스에 안 좋은 영향을 주기에, 수동으로 이미지 파일을 바꿔주는 것을 추천해봅니다.
블로그에 업로드한 이미지 파일의 용량은 미디어 라이브러리에서 위 캡쳐에서처럼 확인이 가능하겠는데, 파일 크기가 MB단위로 나타나는 것은 너무 큰 용량이 되기에, 위에서 언급한 Squoosh를 통해 용량을 줄여주는 것이 좋겠습니다.
용량을 줄인 이미지는 블로그 글에 들어가서 기존의 이미지를 하나하나 바꿔주고, 미디어 라이브러리에서 기존의 이미지를 삭제해주어야 하겠습니다.
주의해야 할 것은 미디어 라이브러리에 있는 이미지만을 삭제할 경우, 기존 글에 삽입했던 곳에 이미지가 표시되지 않는 문제가 발생하기에, 미디어 라이브러리의 이미지는 잘 확인하면서 작업을 해야 하겠습니다.
6. 마무리
블로그를 작성하면서 이미지의 삽입은 아주 기본적인 사항이 되겠지만, 구글에서 웹페이지의 사이즈를 1.6MB미만으로 가장 추천하고 있기에, 이미지의 용량크기를 줄여서 업로드하는 것이 좋겠습니다.
이미지 파일의 용량에 대한 명확한 규정은 없으나, 대략 200KB를 기준으로 하는 것이 좋지 않나 싶으며, 이미지 압축하는 방법은 많겠으나, 구글에서 개발한 Squoosh를 가장 추천해봅니다.
기존에 블로그에 업로드된 이미지 파일들이 많을 경우, 플러그인을 사용하여 용량을 일괄로 줄이는 것을 추천하지만, 이미지 파일이 많지 않을 경우 수동으로 하나하나 바꿔주는 것을 추천해봅니다.
직접 찍은 사진 또는 인터넷에서의 무료 소재를 그대로 블로그에 업로드하는 것은 웹페이지의 속도에 영향을 줄 수 있으니, 꼭 용량을 줄이고 업로드하는 것이 좋겠습니다.
인터넷의 이미지들은 저작권과 초상권 문제가 있을 수 있어, 함부로 사용하는 것은 추천하지 못하고, 저작권이 없는 무료 이미지 사이트를 이용하는 것이 좋겠습니다.
댓글