← 기능 섹션으로 돌아가기
Free

이미지 추출

Extract Images는 웹 페이지를 스캔하여 모든 이미지를 브라우저블 갤러리로 보여줍니다. 썸네일, 원본 크기, 파일 크기, 소스 URL을 확인한 후 개별 이미지를 선택하거나 한 번에 모두 다운로드할 수 있습니다. img 태그, CSS background-image 속성, picture/source 요소, 인라인 data URI까지 모두 감지합니다.

웹 페이지에 있는 수십 개의 이미지를 하나씩 저장하는 작업(오른쪽 클릭 → 다른 이름으로 저장 → 폴더 선택 반복)은 매우 번거롭습니다. 게다가 일반 img 태그만 가능하고, CSS background-image, 반응형 picture 요소, data URI 이미지는 이 방법으로 저장할 수 없습니다. Extract Images는 페이지 전체 DOM과 계산된 스타일을 스캔하여 구현 방식과 관계없이 모든 이미지를 찾아 깔끔한 갤러리 패널로 제시합니다. 각 이미지에는 썸네일 미리보기, 원본 크기(너비 × 높이), 파일 형식, 대략적인 파일 크기, 소스 URL이 표시됩니다. 개별 이미지를 선택하여 다운로드하거나 "Download All"로 한 번에 모두 저장할 수 있습니다. 크기 필터를 사용하면 작은 추적 픽셀과 파비콘을 제외하고 콘텐츠와 관련 있는 이미지만 볼 수 있습니다.

라이브 미리보기
example.com/portfolio
12 images found | Min size: 100 × 100 Download All
hero-banner.jpg
1920 × 1080 · 245 KB
product-shot.png
800 × 600 · 128 KB
team-photo.jpg
640 × 480 · 89 KB
logo-dark.svg
200 × 60 · 4 KB
feature-1.png
400 × 300 · 67 KB
bg-pattern.png
1200 × 800 · 156 KB
icon-set.svg
48 × 48 · 2 KB
avatar-default.jpg
150 × 150 · 12 KB
2 selected · Total: 373 KB Download Selected
주요 기능

완전한 이미지 갤러리

페이지에 있는 모든 이미지가 썸네일 그리드 갤러리로 표시됩니다. 한 번에 8개, 20개, 또는 100개 이상의 이미지를 볼 수 있으며 스크롤하여 원하는 이미지를 찾을 수 있습니다. 각 썸네일은 이미지 내용을 식별하기에 충분한 크기입니다.

모든 이미지에 대한 메타데이터

각 이미지에 원본 크기(예: 1920×1080), 파일 형식(PNG, JPG, WebP, SVG), 대략적인 파일 크기(예: 245 KB), 소스 URL 또는 CSS 속성이 표시됩니다. 이미지 품질이나 크기에 대해 추측할 필요가 없습니다.

최소 크기 필터

최소 크기 기준(예: 100×100)을 설정하여 추적 픽셀, 스페이서 GIF, 파비콘 같은 작은 이미지를 필터링할 수 있습니다. 실제 콘텐츠와 관련 있는 이미지만 집중해서 볼 수 있습니다.

선택 및 벌크 다운로드

개별 이미지를 클릭하여 선택(보라색 체크마크 표시)한 후 선택한 이미지만 다운로드하거나, "Download All"을 클릭하여 페이지의 모든 이미지를 한 번에 기기에 저장할 수 있습니다.

다중 소스 감지

일반 img 태그, CSS background-image 속성, picture/source 반응형 요소, 인라인 SVG, data URI 인코딩 이미지 등 모든 소스에서 이미지를 찾아냅니다. 아무것도 놓치지 않습니다.

선택 카운터 및 총 크기

상태 바에 선택된 이미지 수와 선택한 파일들의 총 크기가 표시됩니다. 다운로드 버튼을 누르기 전에 정확히 얼마나 많은 용량을 다운로드할지 미리 알 수 있습니다.

주요 활용 사례

전자상거래 사이트에서 상품 이미지 저장

카탈로그 페이지의 모든 상품 이미지가 필요한가요? Extract Images가 반응형 변형과 CSS background 히어로 이미지까지 모두 찾아 한 번에 다운로드해줍니다. 오른쪽 클릭으로 저장할 수 없는 이미지들도 포함됩니다.

디자인 참고 이미지 수집

무드보드를 만들거나 디자인 영감 사이트에서 시각적 참고 자료를 수집할 때? 갤러리를 둘러보고 원하는 이미지를 선택한 후 한 번에 배치로 다운로드하세요. 하나씩 저장할 필요가 없습니다.

자신의 사이트 이미지 자산 감사

페이지의 모든 이미지를 검토하여 파일 크기가 너무 큰지, WebP 대안이 누락되었는지, 사용되지 않는 background 이미지가 있는지 확인하세요. 크기와 파일 크기 정보가 최적화가 필요한 이미지를 식별하는 데 도움이 됩니다.

웹 콘텐츠 아카이빙

오프라인 참고용으로 페이지를 저장할 때? HTML과 함께 모든 이미지를 추출하여 완전한 시각적 콘텐츠를 확보하세요. 문서, 디자인 참고 자료, 변경되거나 오프라인될 수 있는 페이지를 아카이빙할 때 유용합니다.

숨겨진 background 이미지 찾기

많은 현대 사이트가 히어로 섹션, 카드 배경, 장식 요소에 CSS background-image를 사용합니다. 이러한 이미지는 오른쪽 클릭으로 저장할 수 없습니다. Extract Images는 일반 img 요소와 함께 이들도 감지하고 다운로드해줍니다.

사용법
1

Extract Images 활성화

DevSuite Pro 플로팅 독을 열고 Extract Images 아이콘을 클릭하세요. 도구가 페이지 DOM과 계산된 스타일을 스캔하여 모든 이미지를 찾습니다.

2

이미지 갤러리 탐색

갤러리 패널에 발견된 모든 이미지가 썸네일 그리드로 표시됩니다. 각 이미지에는 파일명, 크기, 파일 크기가 표시됩니다. 스크롤하여 페이지의 모든 이미지를 살펴보세요.

3

크기 필터 적용 (선택사항)

최소 크기 필터를 사용하여 아이콘이나 추적 픽셀 같은 작은 이미지를 숨길 수 있습니다. 100×100으로 설정하면 콘텐츠와 관련 있는 이미지만 표시됩니다.

4

이미지 선택

개별 이미지를 클릭하여 선택하세요. 보라색 체크마크가 나타납니다. 상태 바가 선택된 이미지 수와 총 크기로 업데이트됩니다.

5

다운로드

"Download Selected"를 클릭하여 선택한 이미지를 저장하거나 "Download All"을 클릭하여 페이지의 모든 이미지를 한 번에 저장하세요. 파일은 기기의 다운로드 폴더에 저장됩니다.

시작할 준비가 되셨나요? 이미지 추출?

DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.

Chrome에 추가 Edge에 추가 Firefox에 추가