img 태그를 입력하면 lazy loading, picture 태그, srcset을 자동으로 생성합니다
img 태그를 붙여넣거나 직접 입력하세요. 여러 개 입력 가능합니다. (Ctrl+Enter로 생성)
loading="lazy" 속성으로 지연 로딩
decoding="async" 속성으로 비동기 디코딩
fetchpriority="low" 속성 추가
반응형 이미지용 picture 태그로 감싸기
picture 태그 내 WebP source 추가
다양한 화면 크기용 srcset 생성
Lazy Loading(지연 로딩)은 웹 페이지의 성능을 향상시키는 핵심 기술입니다. 화면에 보이는 이미지만 먼저 로드하고, 사용자가 스크롤할 때 나머지 이미지를 순차적으로 로드하여 초기 로딩 속도를 크게 개선합니다. 이 도구를 사용하면 기존 img 태그에 Lazy Loading 속성을 자동으로 추가할 수 있습니다.
Largest Contentful Paint 시간을 단축하여 Core Web Vitals 점수를 향상시킵니다.
필요한 이미지만 로드하여 데이터 사용량을 최대 50% 이상 줄일 수 있습니다.
srcset과 sizes 속성으로 기기별 최적 이미지를 제공합니다.
페이지 속도 개선으로 검색 순위에 긍정적 영향을 줍니다.
loading="lazy" 속성만 추가해도 기본적인 Lazy Loading이 작동합니다. 추가로 decoding="async", srcset, picture 태그를 사용하면 더욱 효과적입니다.
| 옵션 | HTML 속성 | 설명 | 브라우저 지원 |
|---|---|---|---|
| Lazy Loading | loading="lazy" |
브라우저 네이티브 지연 로딩 | Chrome 77+, Firefox 75+, Safari 15.4+ |
| Async Decoding | decoding="async" |
이미지 디코딩 비동기 처리 | 모든 최신 브라우저 |
| Fetch Priority | fetchpriority="low" |
로딩 우선순위 낮춤 | Chrome 101+, Edge 101+ |
| Srcset | srcset="..." |
화면 크기별 이미지 제공 | 모든 최신 브라우저 |
| Picture 태그 | <picture> |
포맷별 대체 이미지 제공 | 모든 최신 브라우저 |
기존 HTML의 img 태그를 입력란에 붙여넣습니다. 여러 개의 img 태그를 한 번에 입력할 수 있습니다.
Lazy Loading, Async Decoding, Picture 태그, WebP 소스, Srcset 등 필요한 옵션을 선택합니다.
"코드 생성" 버튼을 클릭하면 최적화된 HTML 코드가 생성됩니다. 복사하여 웹사이트에 적용하세요.
페이지 상단의 중요한 이미지(Hero 이미지, 로고 등)에는 lazy loading을 적용하지 마세요. 오히려 LCP를 저하시킬 수 있습니다. 이런 이미지에는 fetchpriority="high"를 사용하세요.
구글봇은 JavaScript를 실행하고 Lazy Loading 이미지도 크롤링할 수 있습니다. 네이티브 lazy loading(loading="lazy")을 사용하면 SEO에 문제가 없습니다.
반응형 웹사이트에서 다양한 화면 크기에 최적화된 이미지를 제공하려면 srcset을 사용하세요. 모바일에서는 작은 이미지, 데스크톱에서는 큰 이미지를 로드합니다.
srcset은 같은 이미지의 다른 크기를 제공하고, picture 태그는 다른 포맷(WebP, AVIF 등)이나 아트 디렉션(다른 구도의 이미지)을 제공할 때 사용합니다.