img 태그를 입력하면 lazy loading, picture 태그, srcset을 자동으로 생성합니다
img 태그를 붙여넣거나 직접 입력하세요. 여러 개 입력 가능합니다. (Ctrl+Enter로 생성)
loading="lazy" 속성으로 지연 로딩
decoding="async" 속성으로 비동기 디코딩
fetchpriority="low" 속성 추가
반응형 이미지용 picture 태그로 감싸기
picture 태그 내 WebP source 추가
다양한 화면 크기용 srcset 생성
Lazy Loading(지연 로딩)은 웹 페이지의 성능을 향상시키는 핵심 기술입니다. 화면에 보이는 이미지만 먼저 로드하고, 스크롤 시 이미지를 순차적으로 로드하여 초기 로딩 속도를 크게 개선합니다.
Largest Contentful Paint 시간을 단축하여 Core Web Vitals 점수를 향상시킵니다.
필요한 이미지만 로드하여 데이터 사용량을 줄입니다.
srcset으로 기기별 최적 이미지를 제공합니다.
페이지 속도 개선으로 검색 순위에 긍정적 영향을 줍니다.
loading="lazy" 속성만 추가해도 기본적인 Lazy Loading이 작동합니다. 추가로 srcset, picture 태그를 사용하면 더욱 효과적입니다.
| 옵션 | 설명 | 효과 |
|---|---|---|
| loading="lazy" | 브라우저 네이티브 지연 로딩 | 모든 최신 브라우저 지원 |
| decoding="async" | 이미지 디코딩 비동기 처리 | 메인 스레드 차단 방지 |
| fetchpriority | 로딩 우선순위 설정 | LCP 이미지 우선 로드 |
| srcset | 화면 크기별 이미지 제공 | 반응형 이미지 최적화 |
페이지 상단의 중요한 이미지(Hero 이미지 등)에는 lazy loading을 적용하지 마세요. 오히려 LCP를 저하시킬 수 있습니다.