[블로그 성장하기] 5. 티스토리 초보 이미지 최적화 2가지 방법

[블로그 성장하기] 5. 티스토리 초보 이미지 최적화 2가지 방법

 

오늘은 오랜만에 블로그 성장하기 내용으로 글 써볼께요.

 

우리는 대부분 글을 쓰면 올린 글에만 최적화를 신경쓰는 편이다. 하지만 이미지도 최적화 할 수있다.

보통은 스마트폰으로 촬영을 한뒤 이미지를 올리는 편이다. 그런데 스마트폰으로 촬영한 이미지는 사이즈나 용량이 엄청 크다.

 

사진을 그대로 올리는 분들이 많을꺼라 생각한다. 이미지를 수정이나 조절을 안하고 말이다.

그런데 문제가 뭐냐면 이미지 용량때문에 늦게 뜨면서 그 사이에 블로그에 포스팅한 내용을 보러 들어왔다가 이탈이 발생하게 된다. 왜냐하면 로딩속도가 느려지기 때문이다.

 

그래서 이미지 최적화를 준비하자!

 

1. 이미지 사이즈와 용량을 조절하라. 

 

알씨프로그램 다운받아서 이용

 

2. 사이즈는 용도에 맞게 가로 최대 1920 최소 800(px) 권장한다. 

 

사이즈 = 용량 

(즉, 사이즈를 줄이면 용량도 줄어든다.)

 

기준은 가로사이즈를 줄이면 세로도 같이 조절이 된다. 

 

검색엔진은 2자리 KB 용량을 좋아하지만, 이미크기상 3자리 KB가 주로 된다. 

최대한 2자리에 가까운 수로 용량을 조절하면 좋다. 

 

웹페이지상에서 1MB 넘어가면 고용량이라고 보면 되는데, 이것을 꼭 업로드해야된다면 이미지는 파일로 업로드하는 걸 권장한다.

 

3. ALT속성 추가방법

"이미지 파일명" alt="넣고 싶은 내용"

 

 

 

1번 2번 실천해보기

 

① 알씨 프로그램 다운로드 후 업로드할 이미지 선택 (이미지를 클릭하면 좌측 하단에 용량이 나옴, 큰 용량은 1MB 넘어감)

② 우클릭 

③ 이미지 위에 뜨는 항목확인 ( 예 : 2880 X 2160 X 24 b )

④ ▶ 이미지 크기 변경하기 클릭 

⑤ ⊙ 해상도로 조절하기

⑥ 박스안에 변경할 이미지 용량 넣기 ( 예 : 800 )

⑦ 이때 크기에 비례에 체크될 걸 확인후 확인 클릭( 그럼 크기에 비례에 세로도 비율에 맞게 600으로 바뀜)

⑧ 완료 클릭

 

파일명 ( 예 : 크기변환 )이 다르게 이미지 크기 조절된 후 새로 생성됨.

 

이렇게 제 사진으로 해보니 기존 1.36Mb 가 136 Kb 로 용량 및 사이즈가 줄어듬.

이렇게 되면 변환완성.

 

사이즈 조절 전 이미지

사이즈 조절 후 이미지

 

보통 티스토리 본문 넓이가 950px 정도인데, 가로 800px사이즈로 줄인 상황이다.

 

이것이 이미지가 한두장이면 괜찮지만 10장이 넘어가는 경우라면 로딩속도가 느려져서 검색엔진이 안 좋게 판단한다.

그러니 귀찮더라도 이미지 사이즈 조절해서 용량 줄이는 습관을 들여놓으면 편하다.

이탈률이 적고 체류시간이 길어져야 우리에게 유리하니까.

 

고해상도의 퀄리티 높은 사진이라 꼭 업로드 하고 싶다면, 로딩이 느려져 페이지를 닫게 될 수도 있으니 업로드용 이미지를 올리고 난뒤 원본을 파일로 들어가 원래 고해상도 이미지를 첨부해주면 된다.

 

그렇게 하면 사진이 맘에 든다면 아래 원본 파일을 클릭한뒤 고해상도 이미지를 볼 수도 있다.

이렇게 하면 페이지로딩도 빠르고, 고해상도 이미지도 보게 할 수 있다.

 

 

3번 실천해보기

 

① html 모드 들어간다.

② 변환된 이미지 예를 들어 "크기변환.jpg" 이렇게 있다고 치면 한 칸 띄우고, alt="이미지를 설명하는 텍스트삽입"

 

저 같은 경우는 "크기변환.jpg" alt="핑크스카이"

요런 식으로 바꿔도 된다.

 

주의사항 -

내용을 아무거나 집어넣어도 상관이 없다. 그러나 파일의 제목과 alt속성의 제목의 내용과 동일하면 안된다. 또 alt 속성의 내용과 페이지 안에 있는 다른 alt 속성들과 이름이 겹치지 않게 하는 것이 좋다. 각각의 고유한 alt 속성을 넣어준다고 생각하자.

 

각각의 이미지 옆에다가 이미지 파일옆에다가 항상 alt 속성을 넣자는 이야기.

 

그 이유는? alt 속성이라는 이 내용, 즉 쌍따옴표 안의 내용은 사람이 보는게 아니고 검색엔진이 이미지를 수집이 원활하게끔 이미지가 어떤 거인지를 알려준다는 의미.

 

다시 기본모드로 돌아오면 아무변화가 없지만 html모드에서 검색엔진이 최적화할 수 있도록 도와준것이다.

 

조금이나마 도움이 되었으면 한다.