MyBlogTool

내가 쓰려고 만든 블로그 툴 모음

블로그 이미지 최적화 완벽 가이드

사진이 무거우면 페이지가 느려지고, 느린 페이지는 방문자와 검색 순위를 모두 잃습니다. 화질을 지키면서 용량만 줄이는 이미지 관리의 원칙을 단계별로 정리합니다.

왜 이미지 최적화가 검색에도 영향을 줄까

검색엔진은 "페이지가 얼마나 빨리 뜨는지"를 순위 요소로 봅니다. 블로그 글에서 가장 무거운 요소는 대부분 이미지입니다. 스마트폰으로 찍은 사진 한 장이 5~10MB인데, 이런 사진을 열 장 넣으면 페이지가 수십 MB가 되어 모바일에서 로딩이 몇 초씩 걸립니다. 로딩이 3초를 넘으면 상당수 방문자가 뒤로가기를 누르고, 이 이탈은 다시 순위에 부정적으로 반영됩니다.

적정 크기와 용량 기준

  • 가로 폭: 본문 삽입 이미지는 1,000~1,600px면 대부분 화면에서 선명합니다. 그 이상은 사용자가 볼 수 없는 픽셀을 내려받게 하는 낭비입니다.
  • 파일 용량: 장당 200~500KB를 목표로 합니다. 풍경처럼 디테일이 많은 사진도 800KB를 넘기지 않는 것이 좋습니다.
  • 대표(썸네일) 이미지: 가로세로 비율 1.91:1(예: 1200×630)이 SNS 공유 시 잘리지 않습니다.

파일 형식 선택

JPG

사진, 그러데이션이 많은 이미지에 적합합니다. 손실 압축이라 용량이 작습니다. 블로그 사진의 90%는 JPG로 저장하면 됩니다.

PNG

로고, 스크린샷, 글자가 많은 이미지, 투명 배경이 필요한 경우에 씁니다. 무손실이라 선명하지만 용량이 큽니다. 사진을 PNG로 저장하면 용량만 몇 배 커지고 화질 이득은 없습니다.

WebP

같은 화질에서 JPG보다 25~35% 가볍습니다. 최신 브라우저는 모두 지원하지만, 일부 블로그 에디터는 업로드를 막습니다. 플랫폼이 허용하면 우선 고려하세요.

올바른 작업 순서

  1. 원본 보관. 편집 전 원본을 따로 복사해 둡니다. 압축은 되돌릴 수 없습니다.
  2. 리사이즈 먼저. 가로 폭을 목표 크기로 줄입니다. 픽셀 수가 줄면 용량도 크게 감소합니다.
  3. 압축 다음. 리사이즈한 이미지를 압축해 남은 용량을 더 줄입니다. 이미지 압축 도구는 화질 저하가 눈에 띄지 않는 수준으로 자동 조정합니다.
  4. 파일명 정리. 업로드 전 파일명을 내용과 관련된 영문·숫자로 바꿉니다(예: jeju-cafe-view.jpg). 한글 파일명은 환경에 따라 깨질 수 있습니다.

같은 이미지를 여러 번 압축하면 화질이 계속 나빠지므로, 항상 원본에서 한 번만 압축하세요.

중복 이미지 문제

협찬으로 받은 공용 이미지나, 여러 채널에 반복 게시하는 이미지는 "중복 이미지"로 인식되어 노출에 불리할 수 있습니다. 사용 허락을 받은 이미지라면 이미지 미세 자르기로 가장자리를 조금 잘라 파일을 다르게 만들 수 있습니다. 다만 근본적인 해결책은 직접 촬영한 이미지를 쓰는 것입니다.

대체 텍스트(alt) 넣기

이미지에 alt 텍스트를 넣으면 검색엔진이 이미지 내용을 이해하고, 화면 낭독기 사용자도 정보를 얻을 수 있습니다. "이미지1" 같은 무의미한 값 대신 "제주 애월 카페 통유리 창가 자리"처럼 실제 내용을 간결하게 적으세요.

체크리스트

  • 가로 폭 1,600px 이하로 리사이즈했는가
  • 장당 500KB 이하로 압축했는가
  • 사진은 JPG, 스크린샷·로고는 PNG로 저장했는가
  • 파일명을 영문·숫자로 바꿨는가
  • alt 텍스트를 넣었는가

이 글과 함께 쓰면 좋은 도구

함께 읽으면 좋은 글

← 다른 가이드 보기