블로그·웹사이트 이미지 최적화 완전 가이드
속도·SEO·화질 모두 잡기

1. 이미지 최적화가 왜 중요한가?

페이지 속도와 사용자 경험

Google 연구에 따르면 페이지 로딩이 3초를 넘으면 모바일 방문자의 53%가 이탈합니다. 이미지 최적화는 로딩 시간을 줄이는 가장 효과적인 방법입니다. 최적화되지 않은 이미지 10장을 최적화하면 로딩 시간이 2~5초 단축되는 경우가 흔합니다.

검색 순위(SEO)

구글은 2021년부터 Core Web Vitals를 검색 순위 결정 요소로 공식 도입했습니다. 그 중 LCP(Largest Contentful Paint)는 가장 큰 콘텐츠(보통 이미지)의 로딩 시간입니다. 이미지 최적화는 LCP를 직접적으로 개선해 검색 순위에 영향을 줍니다.

서버 비용 절감

이미지 크기를 50% 줄이면 동일 트래픽에서 서버 대역폭 비용도 50% 절감됩니다. 트래픽이 많은 사이트일수록 최적화의 금전적 효과가 큽니다.

2. 올바른 포맷 선택

3. 적정 이미지 크기

이미지는 실제로 표시되는 크기보다 크게 올릴 필요가 없습니다. 블로그 본문 너비가 800px이라면 800~1200px 이미지로 충분합니다. 4000px짜리 원본을 그대로 올리면 4~10배의 불필요한 데이터가 전송됩니다.

용도별 권장 최대 너비

• 블로그 본문 이미지: 1200px
• 블로그 썸네일: 800~1200px
• 히어로 배너: 1920px
• 제품 이미지: 1000~1500px
• 아이콘, 버튼 이미지: SVG 또는 100~200px

4. 압축 수준 설정

대부분의 블로그·웹사이트에는 JPG 80% 또는 WebP 75%가 최적의 균형점입니다.

5. 파일명 최적화

검색엔진은 이미지 파일명으로 이미지 내용을 파악합니다. IMG_20260629_123456.jpg 같은 파일명은 검색엔진에 아무 정보를 주지 못합니다.

좋은 파일명의 원칙

• 이미지 내용을 설명하는 단어 사용
• 단어 구분은 하이픈(-) 사용 (언더스코어_ 대신)
• 소문자만 사용
• 한글보다는 영문 권장 (URL 인코딩 문제 방지)
• 핵심 키워드를 앞에 배치

6. alt 태그 작성법

HTML img 태그의 alt 속성은 이미지를 볼 수 없을 때 대체 텍스트를 제공합니다. 시각장애인용 스크린리더와 검색엔진 모두 alt 태그로 이미지를 이해합니다.

좋은 alt 태그 작성 원칙

• 이미지를 눈으로 보지 못하는 사람에게 설명한다고 생각하고 작성
• 구체적이고 설명적으로 — "사진" "이미지"보다 구체적인 내용
• 핵심 키워드를 자연스럽게 포함 (과도한 키워드 삽입은 금물)
• 100자 이내로 간결하게
• 장식용 이미지는 alt=""로 비워두기

7. 이미지 최적화 체크리스트

웹사이트에 이미지를 올리기 전에 아래 항목을 확인하세요.

• 이미지 포맷이 용도에 맞는가? (사진 → WebP/JPG, 로고 → SVG/PNG)
• 이미지 너비가 표시 크기의 2배 이하인가?
• JPG/WebP 품질을 75~85%로 낮췄는가?
• 파일 크기가 200KB 이하인가? (hero 이미지 제외)
• 파일명이 내용을 설명하는 영문 소문자 하이픈으로 작성되었는가?
• alt 태그가 이미지 내용을 구체적으로 설명하는가?
• 불필요한 메타데이터(EXIF)를 제거했는가?

8. 실전 최적화 워크플로

블로그에 이미지를 올리기 전 권장 작업 순서입니다.

1. 원본 이미지 확인 — 크기, 포맷 확인
2. 리사이즈 — 표시 크기의 1.5~2배로 줄이기 (예: 1200px)
3. 포맷 변환 — WebP 또는 JPG로 변환
4. 품질 압축 — 75~80% 품질 설정
5. 결과 확인 — 파일 크기 200KB 이하 목표
6. 파일명 변경 — 내용 설명하는 영문 파일명으로
7. 업로드 후 alt 태그 작성