이미지 최적화: 형식, 반응형 크기와 지연 로딩

이미지 최적화가 중요한 이유

크거나 늦게 로드되는 이미지는 주요 콘텐츠 표시를 늦추고 LCP를 악화시킬 수 있습니다. 실제로 요청되는 이미지부터 확인하고 영향을 측정하세요. 전송량을 줄이면 로딩이 개선될 수 있지만 검색 순위나 특정 전환 증가를 보장하지는 않습니다.

이미지 형식 선택

대표적인 이미지에서 허용할 수 있는 품질로 JPEG, PNG, WebP, AVIF를 비교하세요. 최소 파일 크기는 이미지, 인코더, 설정에 따라 달라집니다. 대상 브라우저를 확인하고 필요하면 대체 형식을 제공하세요. 적합한 벡터 그림에는 SVG를 사용할 수 있습니다.

형식	장점	주의점	일반적인 용도
JPEG	사진 압축에 효율적인 경우가 많음	손실 압축, 알파 투명도 없음	사진
PNG	무손실 인코딩과 투명도	사진 파일이 커질 수 있음	세부 표현을 보존할 그래픽
WebP	손실·무손실 압축과 투명도	구형 대상 브라우저와 실제 크기 확인	사진, 그래픽, 애니메이션
AVIF	적절한 품질에서 잘 압축될 수 있음	인코딩 비용과 호환성 확인	사진과 그래픽
SVG	확대·축소 가능한 벡터 형식	래스터 사진을 대체하지 않음	아이콘, 로고, 일러스트

반응형 이미지: `srcset`과 `sizes`

srcset에 파일 후보를 나열하고 sizes에 레이아웃에서의 표시 너비를 설명합니다. 브라우저는 이 정보와 기기 조건으로 파일을 선택합니다. 아래 너비는 예이므로 실제 CSS에 맞추세요. 화면 밖 이미지의 예이며 대체 텍스트와 가로세로 비율을 실제 파일에 맞게 바꿔야 합니다.

<img
	src="example-400w.jpg"
	srcset="example-400w.jpg 400w, example-800w.jpg 800w, example-1200w.jpg 1200w"
	sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
	alt="산속 호수"
	width="1200"
	height="800"
	loading="lazy"
/>

화면 밖 이미지의 지연 로딩

loading="lazy"는 이미지가 표시 영역에 가까워질 때까지 로딩을 미룰 수 있게 합니다. 보이기 전에 요청이 시작될 수도 있으며 정확한 시점은 브라우저와 조건에 따라 달라집니다.

중요하지 않은 이미지를 미루면 초기 전송량과 경쟁 요청을 줄일 수 있습니다.
첫 화면의 주요 이미지, 특히 LCP 후보는 지연 로딩하지 마세요. 오히려 LCP가 나빠질 수 있습니다.
올바른 크기나 비율로 공간을 확보해 레이아웃 이동을 줄이세요.

첫 화면 아래에 있는 이미지의 예입니다. 크기는 설명용이므로 실제 파일 크기를 사용하세요.

<img src="example.webp" alt="산속 호수" width="1200" height="800" loading="lazy" />

최적화를 위한 도구 및 서비스

도구	설명	링크
TinyPNG	PNG 및 JPEG 압축을 위한 온라인 서비스	TinyPNG
ImageOptim	macOS의 이미지 최적화	ImageOptim
Squoosh	Google의 강력한 도구	Squoosh

실용적인 팁과 예시

허용할 수 있는 품질로 형식을 비교하고 필요하면 대체 형식을 제공합니다.
srcset과 sizes를 실제 레이아웃과 기기에 맞춥니다.
화면 밖 이미지에 loading="lazy"를 사용하고 LCP 후보는 정상 로딩합니다. 브라우저 기본 지연 로딩에는 보통 Intersection Observer가 필요 없습니다. 사용자 정의 로직은 구체적인 요구를 해결할 때 사용하세요.
빌드나 배포 과정에서 크기 변경과 압축을 자동화하고 결과물을 확인합니다.
비슷한 조건에서 수정 전후의 PageSpeed Insights와 필요한 Web Vitals를 비교합니다. LCP와 CLS도 확인하세요.