반응형 이미지 생성기
더 빠른 웹 페이지를 위한 srcset 이미지 크기 생성
반응형 레이아웃을 위한 여러 이미지 너비를 일괄 생성합니다. 일반적인 중단점을 내보내고 HTML 또는 Next.js 코드를 프로젝트에 직접 복사하여 붙여넣으세요.
로컬 처리 — 업로드 없음반응형 이미지 생성
이미지를 업로드하고 출력 크기를 선택하세요. 스케일 비율, 중단점 너비 또는 사용자 정의 크기를 추가할 수 있습니다.
팁: 모든 크기에서 가장 선명한 결과를 얻으려면 고해상도 소스 이미지로 시작하세요.
이미지 업로드 또는 드롭
PNG, JPG, WebP 파일을 각 25MB까지 지원합니다. 파일은 브라우저 밖으로 나가지 않습니다.
이미지를 드래그 앤 드롭하거나 클릭해 탐색
PNG, JPG, WebP
원본 크기 대비 다양한 스케일 계수로 이미지 생성
srcset용 일반적인 뷰포트 너비 — 필요한 크기를 선택하세요
5 sizes selected
반응형 이미지를 사용하면 브라우저가 각 기기에 맞는 크기를 선택할 수 있어 로딩 시간과 Core Web Vitals가 개선됩니다. 이 도구는 단일 소스 이미지에서 일반적인 너비 변형을 생성합니다.
한 번 업로드하면 320px부터 1920px까지 크기를 내보내고 바로 사용할 수 있는 srcset 마크업을 얻을 수 있습니다. 모든 처리는 로컬에서 수행되어 이미지가 비공개로 유지됩니다.
한 번에 여러 중단점
단일 일괄 내보내기로 320, 640, 960, 1280, 1920px 너비를 생성합니다.
복사하여 붙여넣기 가능한 코드 스니펫
코드베이스에 바로 삽입할 수 있는 HTML srcset 또는 Next.js Image 마크업을 받으세요.
LCP 최적화
적절한 크기의 이미지를 제공하여 Largest Contentful Paint 점수를 향상시킵니다.
권장 반응형 중단점
모바일, 태블릿, 데스크톱 뷰포트를 포괄하는 일반적인 너비입니다.
반응형 이미지 생성 방법
몇 단계만으로 srcset용 최적화된 이미지 변형을 생성합니다.
소스 이미지 업로드
고해상도 JPG, PNG 또는 WebP를 선택하세요. 더 큰 소스는 더 선명한 축소 결과를 제공합니다.
반응형 크기 추가
다중 크기 내보내기를 사용하여 320, 640, 960, 1280, 1920px 너비를 추가합니다.
모든 크기에서 원래 비율을 유지하려면 가로세로 비율을 잠금 상태로 유지하세요.
처리 및 다운로드
크기 조정을 클릭하여 모든 변형을 생성한 다음 각 파일을 개별적으로 또는 한 번에 다운로드합니다.
srcset 스니펫 복사
생성된 HTML 또는 Next.js 스니펫을 사용하여 페이지에 반응형 이미지를 추가합니다.
반응형 이미지를 사용해야 할 때
히어로 및 배너 이미지
데스크톱에는 1920px를, 휴대폰에는 작은 파일을 제공하여 모바일 사용자의 로딩 시간을 대폭 단축합니다.
블로그 및 기사 썸네일
여러 너비를 생성하여 모든 기기의 독자가 빠르고 선명한 미리보기를 받을 수 있도록 합니다.
이커머스 제품 사진
적절한 크기의 리스팅 이미지를 제공하여 페이지 속도와 전환율을 향상시킵니다.
기능
일괄 다중 크기 내보내기
여러 너비를 추가하고 단일 소스에서 한 번에 모두 생성합니다.
가로세로 비율 유지
높이가 비례적으로 조정되어 이미지가 늘어나거나 찌그러지지 않습니다.
바로 사용 가능한 코드
HTML srcset 또는 프레임워크별 스니펫을 프로젝트에 직접 복사합니다.
비공개 및 로컬
모든 처리는 브라우저에서 수행됩니다. 이미지가 서버에 업로드되지 않습니다.
반응형 이미지 FAQ
sizes 속성은 어떻게 작성하나요?
sizes 속성은 각 뷰포트에서 이미지가 얼마나 넓게 표시될지 브라우저에 알려줍니다. 예를 들어 `(max-width: 640px) 100vw, 50vw`는 작은 화면에서는 전체 뷰포트 너비, 큰 화면에서는 절반을 의미합니다. CSS 레이아웃에 맞게 조정하세요.
몇 개의 중단점을 사용해야 하나요?
모바일부터 데스크톱까지 포괄하는 5~7개의 너비가 좋은 기본값입니다. 크기가 많을수록 유연성이 증가하지만 스토리지도 증가합니다. 320, 640, 960, 1280, 1920으로 시작하고 분석을 기반으로 조정하세요.
2x 레티나 이미지는 어떻게 하나요?
브라우저는 뷰포트 너비와 픽셀 밀도 모두로 srcset에서 선택합니다. 가장 큰 소스가 1920px인 경우 레티나 휴대폰은 충분한 픽셀을 얻기 위해 1280px 버전을 선택할 수 있습니다. 선명한 레티나 렌더링이 중요하다면 더 큰 너비를 제공하세요.
이것이 Largest Contentful Paint(LCP)에 어떻게 도움이 되나요?
LCP는 가장 큰 가시적 요소가 얼마나 빨리 로드되는지 측정합니다. 모바일에 더 작은 이미지를 제공하면 더 적은 바이트를 전송하고 히어로를 더 빠르게 렌더링하여 Core Web Vitals 점수를 직접 향상시킵니다.
Next.js Image 컴포넌트에서 이 이미지를 사용할 수 있나요?
네. 셀프 호스팅하는 경우 파일을 /public에 배치하고 이미지 소스를 그에 맞게 설정하세요. 더 많은 제어가 필요하면 Next.js 내장 로더도 즉석에서 크기를 생성할 수 있지만 사전 생성은 서버 부하를 줄일 수 있습니다.
WebP 또는 AVIF로 변환해야 하나요?
현대적인 형식은 파일 크기를 더욱 줄입니다. 별도의 단계에서 변환하거나 이 생성기와 함께 squoosh 도구를 사용할 수 있습니다. 형식을 지원하는 브라우저는 더 작은 파일을 로드하고 다른 브라우저는 JPG/PNG로 대체됩니다.