티스토리 블로그 사진 용량 줄이기 파일 변경 필요성과 방법 차세대 형식을 사용해 이미지 제공하기

티스토리를 하면서 HTML 변경부터 자바스크립트등 손볼게 참 많습니다. 사이트 속도에 따라서 구글에서 뒤로 밀리수도 앞으로 올 수도 있는 상황이다 보니 티스토리를 시작하시는 분들은 처음부터 손보고 하는 게 좋습니다. 그중에 가장 간단하면서 생각보다 많은 영향을 받는 부분이 사진 올리는 방법입니다. 방법도 다양하고 많은데 제가 쓰고 있는 방법을 말씀드리겠습니다.

티스토리 블로그 사이트 속도확인

https://pagespeed.web.dev/?hl=ko

PageSpeed Insights

이 사이트를 통해서 URL을 입력하면 티스토리나 내가 쓴 글에 대해 속도가 나오게 됩니다. 그중에 쉽게 손볼 수 있는 부분이 차세대 형식을 사용해 이미지 제공하기입니다. 빨간색으로 되면 안 좋다는 건데 이미지만 바꿔줘도 4.20초에서 로딩속도를 줄일 수 있는 겁니다.

차세대 형식을 사용해 이미지 제공하기

반응형

사진파일 줄이기

기본적으로 많이 사용하는 JPG 파일입니다. 용량을 보게 되면 174kb로 나오는데 구글에서는 총 500kb를 넘는 것도 좋아하지 않습니다. 그래서 사진을 등록하기 전에 용량도 줄이고 파일크기도 수정을 해야 합니다.

JPG파일 크기

사진파일 변경

여러 장의 사진을 한 번에 수정하는 게 가장 편한데 꿀뷰를 이용하여 사진크기도 640으로 바꾸고 파일형식도 구글이 좋아하는 WEBP로 변경하고 화질은 100으로 유지하여 변경을 해 줍니다. 

WEBP 파일변경

같은 사진일 때 JPG파일 그리고 WEBP파일로 바꾼 후에 사진크기가 3배 정도 줄어든 게 확인이 가능합니다. 여기서 끝이 아닙니다. 최대한 줄여주는게 좋은데 한번 더 줄여보도록 하겠습니다.

WEBP변경후 파일크기

사진파일 압축

아래 사이트를 이용하면 사진파일 압축을 통해서 18k까지 줄어든게 확인이 가능합니다. 처음 JPG 파일일 때 174kb 단위에서 18k까지 확 줄어든 모습이 확인이 가능한데 이렇게 해야 로딩속도등이 줄어들어 쾌적한 환경을 제공하게 됩니다.

https://tinypng.com/

TinyPNG – Compress WebP, PNG and JPEG images intelligently

저도 아직 수정할게 많고 실행 중인데 이미 많은 글이 쌓여 있으면 문제가 생깁니다. 모바일을 기준으로 보면 대략 30개 정도의 글이 로딩되는데 썼던 글을 수정하는 거보다는 30개를 다시 써서 아래로 내려보내는 게 더 좋다고 보여집니다. 블로그나 티스토리글을 자주 수정하게 되면 저품질될 확률이 높아 수정보다는 시간을 두고 조건에 맞지 않는 글을 내려보내는게 더 좋다고 느껴집니다.
 
2023.11.22 - [일상 취미] - 티스토리 블로그 구글 노출 잘되게 글 쓰는법 잘쓰는 방법

티스토리 블로그 구글 노출 잘되게 글 쓰는법 잘쓰는 방법