이미지 하나가 블로그 속도를 죽인다
블로그를 운영하다 보면 이상한 경험을 한 번쯤은 하게 된다. 글을 잘 썼는데 유입이 안 오거나, 들어온 독자가 금방 빠져나가거나. 원인을 추적하다 보면 꽤 자주 나오는 게 이미지 문제다.
스마트폰으로 직접 찍은 사진을 그대로 올리면 파일 크기가 5MB, 10MB를 넘기는 경우도 있다. 그 이미지가 한 포스트에 5장 들어가면 페이지 하나 로딩에 50MB가 넘을 수도 있는 셈이다. 느린 네트워크 환경에서 이 블로그를 접속한 독자는 그냥 뒤로가기를 누른다. 구글도 이 신호를 본다 — 빠르게 이탈하는 사람이 많으면 검색 순위가 내려간다.
사실 블로그 SEO를 이야기할 때 키워드 배치나 내부 링크만 집중하는 경우가 많은데, 이미지 최적화가 생각보다 큰 비중을 차지한다. 페이지 속도는 구글이 Core Web Vitals 지표로 직접 측정하는 SEO 팩터다.
블로그 이미지가 느린 이유
원인은 크게 두 가지다. 하나는 크기, 하나는 형식이다.
카메라나 스마트폰으로 찍은 원본 사진은 인쇄용으로 설계돼 있다. 해상도가 3000×4000픽셀짜리 사진은 웹에서 보여줄 때 실제로는 800픽셀 너비로 표시되는데, 불필요한 픽셀을 전부 들고 있는 셈이다. 거기다 카메라 RAW 파일이나 무압축 PNG로 저장하면 용량이 폭발적으로 커진다.
형식도 중요하다. JPG, PNG, WebP 각각의 특성이 다르기 때문이다. JPG는 사진 계열에 강하고, PNG는 투명 배경이 필요할 때 쓰고, WebP는 이 두 가지를 아우르면서 용량도 작다. 사진을 PNG로 저장하거나, 로고를 JPG로 저장하면 용량이 필요 이상으로 커질 수 있다.
플랫폼별 권장 사이즈
블로그 플랫폼마다 이미지가 표시되는 최대 너비가 다르다. 티스토리나 네이버 블로그의 본문 너비는 보통 700~800px 수준이고, 워드프레스도 테마에 따라 다르지만 대부분 1200px 이내다. 그 이상으로 큰 이미지를 올려도 표시되는 크기는 같다 — 그냥 불필요하게 큰 파일만 올리는 셈이 된다.
일반적으로 블로그 본문 이미지는 너비 1200px 이하로, 파일 크기는 200KB 이하로 맞추는 게 적당하다. SNS 플랫폼별 권장 이미지 사이즈는 조금 다르긴 하지만, 기본 원칙은 비슷하다 — 표시 크기보다 훨씬 큰 이미지를 올릴 이유가 없다.
대표이미지(썸네일)는 예외다. 1200×630px을 기준으로 잡아두는 게 좋다. 이 비율은 Open Graph 규격이기 때문에, 카카오톡이나 SNS에 블로그 링크를 공유했을 때 미리보기 이미지가 제대로 나온다. 크기가 맞지 않으면 잘리거나 찌그러져서 나오는 경우가 있다.
형식은 뭘 써야 하나
이미지 형식 선택은 용도를 보면 된다. 사람이 찍은 일반 사진은 JPG가 낫다. 용량 대비 품질이 가장 잘 나오는 형식이다. 그래프나 스크린샷, 선이 많은 이미지는 PNG가 더 선명하다. 투명 배경이 필요한 로고나 아이콘도 PNG를 쓴다.
최근에는 WebP를 권장하는 경우가 많다. 크롬, 사파리, 파이어폭스 모두 지원하고, 같은 품질에서 JPG 대비 25~35% 정도 용량이 줄어드는 편이다. 블로그 플랫폼이 WebP를 지원한다면 WebP로 변환해서 올리는 게 유리하다.
이미지 SEO — 파일명과 alt 텍스트
이미지도 검색에 걸린다. 구글 이미지 검색으로 유입이 생기기도 하고, 본문 SEO에도 영향을 준다.
파일명은 의미 있게 짓는 게 좋다. IMG_3847.jpg 대신 blog-image-optimization-example.jpg 같은 식으로. 구글은 파일명도 크롤링하기 때문에 키워드가 자연스럽게 들어가면 된다.
alt 텍스트는 이미지가 로드 안 됐을 때 표시되는 텍스트이기도 하고, 스크린 리더가 읽는 텍스트이기도 하다. "이미지"라고만 쓰거나 비워두는 경우가 많은데, 이미지가 담고 있는 내용을 자연스럽게 설명하는 문장으로 쓰는 게 맞다. 억지로 키워드를 쑤셔 넣을 필요는 없다 — 오히려 역효과가 나기도 한다.
Pixkit으로 이미지 최적화하는 법
Pixkit의 이미지 크기 조절 기능을 쓰면 설치 없이 브라우저에서 바로 이미지를 최적화할 수 있다. Pixkit 리사이즈 페이지에 접속해서 이미지를 드래그하거나 클릭해서 올린다. 너비를 1200px로 입력하면 높이는 비율에 맞게 자동으로 계산된다. 품질 슬라이더를 80~85 정도로 맞추면 눈으로 봤을 때 큰 차이 없이 파일 크기를 크게 줄일 수 있다. 용량 줄이는 구체적인 방법이 궁금하다면 여기서 자세히 다루고 있다.
WebP로 변환하려면 변환 도구를 따로 쓰면 된다. JPG나 PNG 파일을 올리고 WebP를 선택하면 끝이다. 파일이 로컬에서만 처리되기 때문에 이미지가 서버에 올라가지 않는다는 점도 편하다.
대표이미지를 잘 쓰는 법
대표이미지는 SEO뿐 아니라 클릭률에도 직접적인 영향을 준다. 검색 결과에서 블로그 제목 옆에 이미지가 뜰 때, 어떤 이미지냐에 따라 클릭할지 말지가 갈리는 편이다.
블로그 글 내용과 연관된 이미지를 쓰는 게 기본이다. 너무 일반적인 스톡 사진은 눈에 띄지 않는다. 텍스트를 이미지 위에 올릴 거라면 가독성을 꼭 확인하고 — 작은 화면에서도 읽힐 수 있어야 한다. 대표이미지 파일 크기도 최적화 대상이다. 아무리 잘 찍어도 1MB가 넘으면 로딩에 영향을 준다.
1200×630px로 만들고, JPG나 WebP로 저장하고, 200KB 이하로 압축한다 — 이 세 가지만 지켜도 웬만한 블로그보다 빠르고 SEO에 유리해진다.