티스토리 이미지 최적화하기

<목차>
1. 티스토리 블로그 이미지 최적화를 해야 하는 이유
2. 티스토리 블로그 이미지 최적화하는 방법
2-1. 이미지 사이즈 및 용량 줄이기
2-2. 본문 제목 썸네일 사용하지 않기

---

1. 티스토리 블로그 이미지 최적화를 해야 하는 이유

안녕하세요, 오늘은 티스토리 블로그 이미지 최적화하는 방법에 대해 알아보려고 합니다. 블로그를 시작하고 글을 작성할 때 글뿐만 아니라 글과 관련된 이미지를 사용하기도 합니다. 하지만 원본 이미지를 블로그에 그대로 올리게 되면 용량이 커서 로딩하는데 오랜 시간이 소요될 수 있습니다.

질문: 로딩 속도가 크게 상관이 있나요?
답변: 네! 로딩 속도는 블로그를 운영하는 데 있어 기본이 되는 요소입니다.

티스토리 블로그 같은 경우 다음 노출뿐만 아니라 구글 노출도 신경을 써야 하는데요. 구글 같은 경우 로딩 속도가 느린 웹페이지에 좋은 점수를 주지 않습니다. 저 같은 경우 블로그를 이용할 때 로딩이 길면 기다리는 것이 싫어 창을 닫고 나가는 경우가 많습니다. 로딩 속도가 느려 나가 버리는 사람이 많은 블로그는 구글에서 이탈률이 심하다고 판단하여 좋은 점수를 주지 않아 상위 노출도 어려워지게 됩니다. 이런 이유로 이미지를 최적화하여 로딩 속도가 빨라질 수 있도록 해야 합니다.

2. 티스토리 블로그 이미지 최적화하는 방법

2-1. 이미지 사이즈 및 용량 줄이기

로딩 속도를 빠르게 하여 이미지를 최적화하는 방법에는 이미지 사이즈 및 용량을 줄이는 방법이 있습니다. 이미지 사이즈 및 용량을 줄이는 방법에는 여러 가지가 있지만 저는 알씨를 이용하는 편입니다.

· 알씨 다운로드하기
· 내 사진 보관함을 열어 사진 선택
· 우클릭 후 편집 메뉴 선택
· 이미지 크기 변경
· 용량으로 조절하기
· 원하는 용량으로 설정 (300 - 500 KB 적당)

알씨 같은 경우 용량으로 조절하기 외에도 비율로 조절하기, 해상도로 조절하기, 특정 축으로 조절하기도 있으니 편하신 방법을 선택하시면 됩니다.



2-2. 본문 제목 썸네일 사용하지 않기

북클럽 스킨 같은 경우 글 제목 배경에 이미지가 들어가 있습니다. 원하는 이미지가 들어가면 좋겠지만 대부분 확대되어 보기 불편하고 로딩 속도에도 영향을 미칩니다. 이런 현상을 없애기 위해 본문 제목 썸네일을 없애보도록 하겠습니다.

· HTML 편집 선택
· 컨트롤 F를 눌러 post-cover을 검색
· 코드를 아래와 같이 변경

[수정 전 코드]

<div class="post-cover notice"<s_notice_rep_thumbnail> style="background-image: url();"<s_notice_rep_thumbnail>>

[수정 후 코드]
<div class="post-cover"<s_article_rep_thumbnail> style="background-color:B4B4B4; "<s_article_rep_thumbnail>>

코드를 수정했으면 꼭 저장하기 버튼을 눌러주세요.

저장하기 버튼을 눌러 다시 블로그에 들어가 보면 배경 사진이 없는 썸네일을 확인할 수 있습니다. 제목도 잘 보이고 훨씬 깔끔하죠?

---

오늘은 티스토리 블로그 이미지 최적화하는 방법에 대해 알아보았습니다. 다음에서뿐만 아니라 구글에서 상위 노출이 되려면 이미지 최적화가 꼭 필요합니다. 위 2가지 방법을 통해 내 블로그가 이미지 최적화가 될 수 있도록 노력해 봅시다. 그럼 다음 시간에는 alt 속성을 이용해서 내가 올린 이미지가 검색엔진에 잘 노출되는 방법을 알아보겠습니다.