웹개발실무

이미지 최적화Image Optimization

DEFINITION

이미지 최적화는 이미지를 화면에 맞는 크기와 형식으로 준비하고, 필요한 시점에 불러오며, 대체 텍스트로 내용을 설명해 속도와 검색 노출을 함께 개선하는 작업입니다.

01이미지는 대부분 페이지에서 가장 무거운 자원이다

같은 사진도 형식과 크기에 따라 용량이 몇 배씩 차이 납니다. 화면에 400px로 보이는 자리에 2,000px 원본을 쓰면 방문자는 보이지도 않는 픽셀을 내려받습니다.

항목	기준	효과
형식	사진은 WebP·AVIF, 로고·아이콘은 SVG	같은 화질에서 용량 감소
크기	실제 표시 크기의 1~2배 (srcset으로 화면별 제공)	불필요한 다운로드 제거
불러오는 시점	첫 화면은 즉시, 아래쪽은 지연 로딩	초기 로딩 단축
자리 확보	width·height 또는 aspect-ratio 지정	CLS 방지

첫 화면의 대표 이미지에 loading="lazy"를 붙이면 화면 배치가 끝난 뒤에야 내려받기 시작해 LCP가 늦어집니다. 대표 이미지는 즉시 불러오고 fetchpriority="high"로 우선순위를 높입니다.
브라우저 기본 지연 로딩은 이미지가 화면에 가까워져야 요청을 시작합니다. 서버나 CDN 응답이 느리면 스크롤로 도착한 뒤에 이미지가 뜨므로, 응답 속도와 캐시를 함께 손봐야 합니다.

alt는 화면을 볼 수 없는 사용자를 위한 설명이자 검색엔진이 이미지 내용을 이해하는 단서입니다. 장식용 이미지는 alt=""로 비워 두는 것이 맞습니다. 자세한 기준은 웹 접근성과 이어집니다.

의미 없는 alt

alt="이미지1" 또는 alt="SEO, 홈페이지, 마케팅, 상위노출"

내용을 설명하지 못하거나 키워드 나열

내용을 설명하는 alt

alt="Search Console 실적 보고서의 노출수·클릭수 그래프"

보이지 않는 사람과 검색엔진 모두 이해

GO DEEPER · NODELIX 가이드

SOURCES · 공식·권위 출처