이미지 ALT·파일명·크기 최적화｜코어 웹 바이탈 안정화 실전

이미지 ALT 파일명 크기 최적화 -코어 웹 바이탈 안정화 실전

이미지 ALT·파일명·크기 최적화｜코어 웹 바이탈 안정화 실전

핵심: 이미지는 검색·접근성·속도를 동시에 좌우합니다. ALT 한 문장 규칙, 파일명 표준, 픽셀/용량 최적화, 그리고 width/height·srcset·loading 같은 속성 세트만 지켜도 LCP·CLS·INP가 안정화됩니다. 아래 체크리스트와 예시를 그대로 적용해 보세요.

📑 목차

• 왜 중요한가
• ALT 작성 규칙: 정보성 한 문장
• 파일명 규칙: kebab-case·버전·출처
• 크기·용량·포맷(WebP/AVIF)
• HTML 속성 세트(width/height·srcset·lazy)
• 실전 점검표
• FAQ
• 실행 요약

의미(ALT)-->식별(파일명)--> 성능(크기.속성)의 연쇄가 검색과 UX를 동시에 개선합니다

1) 왜 중요한가

ALT는 스크린 리더 사용자에게 내용을 전달하고, 검색 크롤러에 이미지-문맥 연결 신호를 제공합니다. 파일명은 식별성과 관리 편의성을 높여 콘텐츠 일관성을 강화합니다. 크기·포맷 최적화와 width/height 명시는 레이아웃 흔들림(CLS)을 억제하고, 적절한 포맷(WebP/AVIF)은 전송량을 줄여 LCP·INP에도 긍정적입니다.

문맥형 ALT : "무엇+어디/언제+핵심 수치/행동"한 문장, 장식 이미지는 alt=""로 비웁니다

2) ALT 작성 규칙: 정보성 한 문장

• 문맥형 1문장: 무엇(대상)·어디/언제(맥락)·핵심 수치/행동을 한 문장으로.
• 장식은 비우기: 순수 장식은 alt=""로 스크린 리더가 건너뛰게.
• 중복 회피: 캡션/본문과 같은 문구 반복 대신 추가 정보 제공.
• 키워드 남발 금지: 설명성 우선, 나열식 금지.

<!-- 정보성 ALT 예시 -->
<img src="/img/cwv-lcp-trend-2025.webp"
     alt="2025년 모바일 LCP 추이: 2.5초→1.9초 개선 그래프"
     width="1200" height="675" loading="lazy" />

<!-- 장식 이미지는 비움 -->
<img src="/img/divider.svg" alt="" role="presentation" />

팁: 표·그래프 ALT에는 단위와 변화 방향을 포함하세요(예: “월별 CLS 0.21→0.09 개선 막대 그래프”).

3) 파일명 규칙: kebab-case·버전·출처

• 형식: 주제-세부-버전.확장자 (예: tistory-image-alt-v2.webp)
• 문자 세트: 소문자·숫자·하이픈만 사용(공백·특수문자·한글 지양).
• 버전 관리: 반복 수정 이미지 끝에 -v2처럼 표기해 캐시 혼선 최소화.
• 출처 표기: 외부 이미지 사용 시 캡션/본문에 출처·라이선스 명시.

good:  cwv-lcp-hero-1200x630-v3.avif
bad:   IMG_0982_final_final2.PNG

주의: 무단 도용 이미지는 정책 문제를 야기합니다. CC/저작권 조건을 확인 후 사용하세요.

사진은 AVIF/WebP 우선,도표.텍스트 중심 이미지는 PNG 와 비교 후 선택하세요

4) 크기·용량·포맷(WebP/AVIF)

• 대표(공유) 썸네일: 1200×630(16:9), 150~300KB 목표.
• 본문 핵심 이미지: 1200×675(16:9) 또는 1200×900(4:3), 200~350KB 목표.
• 포맷 선택: 사진=AVIF/WebP, 스크린샷/도형=WebP/PNG. 텍스트 많은 도표는 PNG가 유리할 때가 있습니다.
• 품질 설정: WebP Q=70~82 권장, AVIF는 중간~높음. 필요 시 양자화로 링잉 최소화.

<picture>
  <source type="image/avif" srcset="/img/hero-1200x630.avif" width="1200" height="630">
  <source type="image/webp" srcset="/img/hero-1200x630.webp" width="1200" height="630">
  <img src="/img/hero-1200x630.jpg" alt="대표 썸네일 예시" width="1200" height="630">
</picture>

팁: 동일 이미지를 600/900/1200px로 리사이즈해 srcset으로 제공하면 다운로드 낭비를 줄이고 선명도를 보장합니다.

5) HTML 속성 세트(width/height·srcset·lazy)

• width/height를 명시해 CLS 방지.
• loading: 첫 화면 이미지는 eager(또는 속성 제거), 폴드 아래는 lazy.
• srcset·sizes로 뷰포트별 최적 리소스 제공.

<img
  src="/img/tutorial-step1-1200.webp"
  srcset="/img/tutorial-step1-600.webp 600w, /img/tutorial-step1-900.webp 900w, /img/tutorial-step1-1200.webp 1200w"
  sizes="(max-width:640px) 92vw, (max-width:900px) 820px, 900px"
  alt="튜토리얼 1단계: 설정에서 이미지 최적화 메뉴 열기"
  width="1200" height="675" loading="lazy" decoding="async" />

6) 실전 점검표

항목	권장 규칙	합격 기준
ALT	문맥형 1문장, 장식은 alt=""	정보 전달·중복 없음
파일명	kebab-case, 주제-세부-버전	재현성·정리 용이
포맷	AVIF/WebP 우선, 도표는 PNG 비교	품질 대비 용량 최소
크기	대표 1200×630, 본문 1200×675	<350KB, 선명도 유지
속성	width/height, srcset, eager/lazy 구분	LCP·CLS 안정화

FAQ

Q1. ALT에 키워드를 많이 넣으면 더 유리한가요?

A. 아니요. 설명성이 우선입니다. 나열식 키워드는 품질 신호를 해치고 접근성에도 불리합니다.

Q2. 첫 화면 이미지도 lazy로 두면 안 되나요?

A. 권장하지 않습니다. 히어로/대표 이미지는 지연 로딩을 피해야 LCP 저하를 막을 수 있습니다.

Q3. 모든 이미지를 AVIF로만 제공해도 되나요?

A. 브라우저 호환성 때문에 AVIF/WebP/JPEG 폴백 전략 또는 최소 WebP+JPEG 병행을 권장합니다.

오늘부터 바로 할 수 있는 실행 요약

• ALT: “무엇+맥락+핵심 수치/행동” 한 문장, 장식은 alt="".
• 파일명: 주제-세부-버전.ext로 규격화(소문자·하이픈·영문).
• 포맷: AVIF/WebP 우선, 도표는 PNG 비교 후 결정.
• 크기: 대표 1200×630, 본문 1200×675, 200~350KB.
• 속성: 모든 이미지에 width/height·srcset 적용, 히어로는 lazy 제외.

작성자 ｜ 티스토리 정보저장소

티스토리 블로그 운영에 필요한 필수 정보를 체계적으로 제공합니다. 본 글은 제목·요약문을 의도 기반으로 표준화하는 실무 가이드입니다.

최종 수정: 2025-11-19 · 문의: 댓글