본문 바로가기
티스토리/· 운영

티스토리 운영 기본 - 이미지를 최적화 하자!

by 닐기 2022. 12. 27.

블로그를 운영하며 지키면 좋은 것. '이미지 최적화'

 

이미지 최적화는 로딩 시간을 단축시켜 사용자의 이탈률을 줄여준다. 고사양 컴퓨터와 빠른 인터넷 속도로 옛날보다 좋은 환경이 되었지만 여전히 용량이 큰 이미지와 영상 등은 페이지 로딩 속도에 영향을 준다.

구글은 로딩 시간이 불필요하게 긴~ 글에 좋은 점수를 주지 않는다. '로딩 시간=이탈률'이다. 나부터도 로딩 시간이 긴 글은 로딩이 끝나기 전에 나와버린다.

 

 

• 이미지 최적화 하는 방법.

1. 본문 가로 크기보다 큰 이미지는 올리지 말 것.

이 블로그의 본문 가로 최대 크기는 809px이다. 항상 808px로 올린다.

본문보다 가로길이가 큰 이미지를 올리면 원본을 보기 위해 이미지를 클릭해야 하는 불편함이 있다. 클릭 한 번 덜 하게 하는 건 중요하다. 귀찮으니까.

 

 

2. 이미지에 alt="설명" 꼭 쓰기.

구글 SEO는 이미지에 alt태그 쓰는 걸 아주 좋아한다. SEO는 구글 상단 노출의 기본이다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/img 

 

<img>: 이미지 삽입 요소 - HTML: Hypertext Markup Language | MDN

HTML <img> 요소는 문서에 이미지를 넣습니다.

developer.mozilla.org

 

 

3. 이미지 용량 줄이기.

티스토리-운영-기본-이미지-최적화티스토리-운영-기본-이미지-최적화

▲ 825kb / 165kb ▲

 

두 이미지는 눈으로 보기에 딱히 차이가 없지만 용량은 차이가 크다.

용량이 적으면 페이지 로딩 속도는 당연히 빨라진다.

'이미지 최적화', '이미지 용량 줄이기' 등으로 검색하면 최적화 사이트가 많다. 대표적으로...

https://tinypng.com/

 

TinyPNG – Compress WebP, PNG and JPEG images intelligently

Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG images by 50-80% while preserving full transparency!

tinypng.com

 

 

4. 직접 만든 이미지나 찍은 이미지를 사용하자.

흔한 이미지는 딱히 눈에 들어오지 않는다. 그런 이미지는 불필요하고 본문의 공간만 차지한다.

 

 

5. 필요한 이미지만 최소한으로 넣기.

3번의 연장이라고 할 수 있겠다.

 

 

6. 플로그인 - 반응형 웹스킨 이미지 최적화 사용.

티스토리-운영-기본-이미지-최적화

 

 

7. '로딩 중' 사용하지 않기.

블로그를 방문해 보면 '로딩 중'이라는 효과가 나오는 경우를 자주 볼 수 있다. 이건 개인적인 생각인데 좋지 않아 보인다.

왠지 기다리는 시간이 더 길게 느껴진다. 약간의 흥미는 줄 수 있으나 몇 번 보다 보면 불필요하게 느껴진다.

블로그와 이미지를 최적화하여 그런 안내가 필요 없어야 하겠다.

 

 

이미지 최적화는 생각보다 귀찮다. 그러나 익숙해지면 안 하면 불안하다.

그리고 무엇보다 블로그에 유익한 습관이다.

 

- - - 

 

오래전에 쓴 글인데 스스로가 안 지키는 것 같아 다시 써본다. (ง •̀_•́)ง