이미지 최적화를 통한 상위노출, 블로그 페이지를 빨리 로딩하기

이미지 최적화란

SEO(Search Engine Optimization) 이라는 검색 엔진 최적화가 내 글을 검토한 후 검색창에 보여줍니다. 이 때 상위노출에 검토하는 여러 요소가 있겠지만, 그 중 하나가 이미지 로딩 속도 입니다. 이미지를 보여주기 위해서는 사용자가 페이지를 눌렀을 때 다운로드 후 화면에 뿌려줘야합니다. 이 뿌려지는 이미지의 크기가 대용량이라면 로딩속도가 느리겠죠? 이러한 로딩속도를 잘 맞추도록 최적화하는게 바로 이미지 최적화입니다.

 

최적화 방법 1

블로그 페이지를 빨리 로딩하기 위해서는 바로 큰 이미지를 작은 사이즈의 이미지로 바꿔줘야합니다. 위에서 언급한 이미지 최적화이죠.

 

그림판 이미지 크기 조정

아래와 같이 그림판에 크기 조정을 이용하여 이미지를 줄이는 방법이 있습니다.

이렇게 바꿔서 이미지를 줄일 수 있습니다.

 

TinyPNG 사이트 이용하기

https://tinypng.com/ 를 이용하면 아래와 같이 사진 파일을 간편하게 축소할 수 있습니다. 차이가 보이시나요?

왼쪽에 있는 원본파일이 303KB이고 오른쪽에 축소한 페이지가 112KB입니다. 대략 63% 줄였음을 알 수 있습니다. 

 

이렇게 용량을 줄인 파일을 사용한다면 이미지 최적화가 되어, 블로그 페이지의 로딩속도가 빨라지고 구글이나 네이버 다음 등의 검색엔진의 SEO 를 만족시킬 수 있을 것입니다. 워드프레스에 tinypng 에 대한 플러그인도 존재한다고 하니 워드프레스를 이용하시는 분들은 참고하시면 좋을 것 같습니다.

 

최적화 방법 2

alt 태그

두번째로 최적화를 하기 위해서는 alt 태그를 이미지에 넣어줘야합니다. alt 태그를 사용하는 목적은 크게 두가지로 볼 수 있습니다. 기능적으로는 이미지가 나오지 않을 경우 대체 이름으로 이미지를 대신하는 것입니다. 검색 목적으로는 검색 엔진에서 이 데이터를 원하기 때문입니다. 수많은 검색 엔진은 이미지에 대한 정보를 얻는 방법이 alt 속성을 읽는 것입니다. 따라서 이 값을 넣어주는게 상위 노출에 유리하게 됩니다.

 

그럼 티스토리에서 어떻게 넣는지 살펴보도록 하겠습니다. 이미지를 블로그 글에 업로드 후 이미지를 클릭하면 도구상자가 아래와 같이 뜹니다. 그 중 톱니바퀴 모양의 "대체 텍스트 삽입" 버튼을 누르고 대체 텍스트를 넣으면 alt 태그가 완성됩니다. 간단하지만 까먹기 쉬운 방법이니 꼭 한번씩 체크하시기 바랍니다.

이미지 이름

이미지를 넣을 때 이미지 파일의 이름도 대체 텍스트와 마찬가지의 의미가 있는 제목으로 짓는 것을 추천합니다. 이름 자체도 검색시 하나의 정보가 되기 때문입니다. 이미지 내의 정보는 많으면 많을수록 검색엔진에서 좋아하겠죠?