티스토리 블로그 이미지 최적화 완벽 가이드 (초보자 꼭 보세요!)

워드프레스나 티스토리 블로그를 운영하다보면 많은 이미지들을 사용합니다. 이런 이미지들 생각없이 넣으면 구글 랭킹이 떨어진다는 것을 알고 계셨나요? 워프는 자동 세팅하면 되지만, 티스토리는 생각보다 많은 분들이 이미지를 어떻게 넣어야 하는지, 모르고 계시는 것 같아서 정리해보았습니다.

티스토리 블로그 이미지 최적화

티스토리 블로그에서 이미지를 넣는 방법은 다양합니다. 에디터에서 파일을 직접 올릴 수도 있고, 그냥 클립보드로 캡쳐한 이미지를 Ctrl+C, V 하면 바로 삽입가능합니다.

그런데, 이런 이미지를 아무 생각없이 올리게 되면 다음과 같은 안 좋은 현상이 발생하게 됩니다.

1. 이미지의 용량이 생각보다 커서 티스토리 블로그의 속도가 느려지게 된다.
2. 구글에서 블로그 평가를 할 때 사용되는 PSI 점수가 깎이게 되어, 장기적으로 블로그의 검색결과 순위가 떨어지게 된다.

위와 같은 현상을 방지 하기 위해서, 이미지 제대로 넣는 방법 알아보도록 하겠습니다. 생각보다 유용하고, 편하니까 잘 따라오시기 바랍니다.

티스토리 블로그 이미지 용량 줄이기

이제부터는 블로그에 올라가는 이미지를 아무렇게나 넣지 않겠다고 다짐해주세요! 한가지 기억 할 것은 블로그 이미지 용량은 확장자에 따라서 달라진다는 것 입니다. 많은 분들이 .png나 .jpg는 잘 알고 계시리라 생각합니다. 하지만, 여러분이 오늘 알아야 할 확장자는 .webp 확장자 입니다.

webp 파일이란?

webp 파일은 웹 이미지를 작은 파일 크기로 압축하여 웹 페이지 로딩 속도를 높이고, PNG와 유사한 투명 이미지 지원을 제공하는 이미지 파일 형식입니다. 이는 웹 개발자들에게 효과적인 이미지 최적화 파일로서 유용하며, 사용자 경험을 개선하기 위해 빠른 이미지 로딩을 가능하게 합니다.

즉, 웹에 이미지를 올릴 때 사용하는 전용 확장자라는 말입니다. 따라서 앞으로는 티스토리 블로그에 이미지 파일을 올릴 경우 무조건 이미지 파일을 webp 파일로 변환 후 올리시기 바랍니다. 그냥 이미지 파일을 변환없이 올리게 되면 성능 저하가 나타나고, 구글 PSI 성능 점수도 낮아지게 됩니다. (아래 그림 참조)

이미지 압축 쉽게 하기

이미지를 압축 파일로 변환하는 방법을 2가지 알려드릴텐데, 일반 사용자는 첫번째 방법으로, 챗GPT PLUS (유료버전) 사용자는 두번째 방법을 사용하시기 바랍니다.

• 일반 사용자: ShortPixel 이미지 변환 사이트 이용하기 (압축 PNG)
• 챗GPT 유료 사용자: 브리마 사용하기 (webp 파일 변환기)

ShortPixel 이미지 변환 사이트

숏픽셀은 제가 워드프레스 사이트 초기 세팅 할 때 애용하는 이미지 최적화 플러그인 제작 회사입니다. 워드프레스에서는 이미지를 티스토리에서 처럼 복붙으로 넣어도 자동으로 파일 용량을 조절해주는 플러그인과 조절 된 이미지들을 webp 파일로 변환해주는 플러그인이 존재합니다. 따라서 상대적으로 티스토리보다 훨씬 제대로 포스팅하기엔 쉬운 면이 있죠.

이미지 변환기 사용방법

숏픽셀의 이미지 변환 사이트로 이동합니다. 그림파일들을 준비하고, Pictures를 선택한 다음, 원하는 압축 레벨을 설정 후 변환을 누르면 끝입니다. 50개 파일까지 한번에 변환 가능합니다. (예: 480kb -> 88kb)

이미 티스토리 블로그에 올라간 파일들은 어떻게 하냐구요? Website 를 누를 다음 최적화가 필요한 웹사이트 주소를 넣어주면 알아서 주소에 들어있는 이미지 파일들을 압축 파일 형태로 변환해 줍니다.

그 다음 조금 기다리면 아래 그림과 같이 변환된 파일을 다운로드 할 수 있는 링크들이 나옵니다. 다운 받아 교체해주세요!

브리마 이미지 변환 챗GPT

브리마는 제가 만든 챗GPT 봇입니다. 워프로 작업 할 때 항상 사용하는 내용들을 챗GPT 커스터마이제이션을 거쳐서 학습시켜놓았습니다. 다른 분들도 사용 가능하도록 공개해놓았으니 다들 한번 써보시기 바랍니다. 숏픽셀이나 다른 압축 프로그램보다 성능도 좋을 것이라 생각합니다.

심지어 챗GPT는 화면 캡쳐 후에 복붙이 되거든요? 그래서 엄청 편합니다. 이미 어떻게 작동할지 학습이 되어있기 때문에 아무 말없이 그냥 그냥 캡쳐 한 후 복붙하고, 그냥 다른거 필요없이 업로드 하면 바로 나옵니다. 많이 애용해주세요! 🙂

이미지 삽입 제대로 하기

변환을 마친 이미지들을 티스토리에 삽입해주면 되는데요, 이때 주의 할 사항이 2개가 있습니다.

1. 대체 텍스트(Alt)를 꼭 작성한다.
2. 가로 크기를 꼭 지정해준다. 50 단위로 끊어서 설정 (예: 770px -> 750px)

위 그림에서 오른쪽 상단 톱니바퀴를 눌러 대체 텍스트를 입력해주고, 왼쪽 상단 두번째 버튼을 눌러서 크기 조정해주면 됩니다.

썸네일 이미지 파일 (주의사항)

앞에서 살펴 본 이미지 파일의 경우 본문에 들어가는 이미지들을 webp로 바꿔주면 로딩 속도가 빨라진다는 이야기입니다. 하지만, 이 webp 파일을 사용하면 안되는 경우가 있는데, 바로 글에 특성이미지, 혹은 썸네일 파일입니다.

• 썸네일 파일은 항상 jpeg를 사용합니다.

썸네일 파일로 webp 확장자 대신 jpeg 파일(png도 안됨)을 사용해야 하는 이유는 SNS에 글을 공유할 시 지원하는 이미지 확장자로 jpeg가 공통파일 확장자이기 때문입니다. 쉬운 예로, 썸네일 파일을 webp로 설정해놓는 경우, 페이스북에 공유할 때 이미지가 뜨지 않는 현상이 발생합니다.

따라서, 썸네일의 경우, 꼭 jpeg 파일로 변환해서 집어넣어주세요!

마치며

오늘은 티스토리에서 이미지를 제대로 업로드하는 방법에 대하여 알아보았습니다. 워낙 티스토리 블로그의 성능을 저하하는 요소가 많지만, 그래도 안하는 것보다는 낫죠! 이미지 최적화를 통해서 좀 더 빠르고, 구글 검색 결과도 좋게 만들어보시기 바랍니다.

워플에서는 워드프레스를 사용해 블로그를 처음 시작하시는 분들을 위한 워드프레스 초기 세팅 서비스를 운영하고 있습니다. 워프 블로그 초반 많이 하시는 실수 없이 블로그에만 집중할 수 있도록 도움드리고 있습니다. 많은 관심 부탁드립니다!