画像スクレイパー：ウェブサイトから画像をバッチでスクレイピングする方法

Isabella Garcia

Web Data Collection Specialist

30-Jun-2026

TL;DR:

src属性は画像を見つけるための信頼性の低い場所です。 現代のページでは、実際のURLがsrcset、data-srcに入っているか、遅延読み込みが発火した後にのみ設定されます — srcだけでなく、currentSrcやデータ属性を読み取ってください。
遅延読み込みされた画像は、スクロールするまで存在しません。 まずページを自動スクロールして、ローダーがプレースホルダーを本物のURLに入れ替えるようにしてから収集してください。
すべてのURLを絶対パスに解決し、メタデータを保持します。 new URL(src, location.href)は相対パスやプロトコル相対パスを修正し、alt、naturalWidth、naturalHeightはURLと一緒に捕捉する価値があります。
ページを通じてダウンロードし、裸のHTTPクライアントは使わないでください。 レンダーされたセッション内での同一オリジンのfetch()は、CDNが期待するクッキーやリファラーを保持するため、ホットリンク保護された画像が403エラーではなく戻ってきます。
実際のブラウザで実行され、これが全てのポイントです。 Scrapeless Scraping Browserはギャラリーを構築するJavaScriptをレンダリングし、住宅的な出口を提供するため、画像が訪問者にとって表示されるのと同じように読み込まれます。
無料で始められます。 新しいScrapelessアカウントには無料のScraping Browserランタイムが含まれています — app.scrapeless.comでサインアップしてください。

はじめに：「imgタグを取得するだけ」ではうまくいかない理由

画像をスクレイピングするのは一行のように聞こえます — すべての<img>を選択し、srcを読み取って終わり。しかし、実際のサイトではすぐに崩壊します。ギャラリーは遅延読み込みを行うため、ほとんどの画像はsrcにプレースホルダーがあり、実際のURLはdata-srcに入っています。レスポンシブ画像はsrcsetに複数の候補を置き、ブラウザは実行時に1つを選びます。URLは相対のものやプロトコル相対のものがあります。そして、URLがある場合でも、CDNは実際のページビューのために期待されるクッキーとリファラーがないと、普通のHTTPダウンロードを拒否します。

したがって、信頼性のある画像スクレイパーは本当に4つのステップです：実際のブラウザでページをレンダリングし、遅延画像を読み込むようにスクロールし、解決された画像URL（生の属性ではなく）とそのメタデータを読み取り、レンダリングされたセッションを通じてバイトをダウンロードします。

このガイドは、Scrapeless Scraping Browserでこの4つを実行します — Puppeteerに接続された検出防止クラウドブラウザ — そして下記のすべてのスニペットは、実際の画像が豊富なページに対して実行されました。公開画像のみ。

できること

ページ上のすべての画像をバッチで収集 し、その解決されたURL、altテキスト、および寸法を取得します。
遅延読み込みされた無限スクロールのギャラリーを処理 し、収集する前にスクロールします。
レスポンシブ画像を引き出すためにcurrentSrcを読み取ります（ブラウザが実際に選んだ候補）。
ページを通じて一括でダウンロード し、ホットリンク保護されたCDNがファイルを提供します。
サイズでフィルタ し、自然の寸法を使用してアイコン、スペーサー、トラッキングピクセルをスキップします。

なぜScrapeless Scraping Browserなのか

Scrapeless Scraping Browserは、ウェブクローラーやAIエージェント向けに設計されたカスタマイズ可能な、検出防止クラウドブラウザです。特に画像のスクレイピングのために、以下を提供します。

独自開発のChromium — ギャラリーを構築するJSをレンダリングし、遅延ローダーを発火させるため、実際のURLが表示されます。
検出防止のフィンガープリンティング — セッションは実際のブラウザとして読み取られるため、画像重視のページとそのCDNは通常通り提供します。
195カ国以上の住宅プロキシ — ページとその画像CDNが信頼するIPからの出口。
セッションの持続性 — クッキーを温かく保持し、ページ内でのダウンロードに正しい認証情報を持たせます。
標準的なPuppeteer接続 — Puppeteer.connect()は通常のBrowserを返します；収集コードは通常のPuppeteerです。

app.scrapeless.comで無料プランのAPIキーを取得してください。

前提条件

Node.js 18以上
ScrapelessアカウントとAPIキー — app.scrapeless.comでサインアップしてください
Puppeteerの基本的な知識

インストール

bash Copy

npm install @scrapeless-ai/sdk puppeteer-core

bash Copy

export SCRAPELESS_API_KEY="your_api_token_here"

ステップ1 — 接続してページを読み込む

javascript Copy

import { Puppeteer } from '@scrapeless-ai/sdk';

const browser = await Puppeteer.connect({
  apiKey: process.env.SCRAPELESS_API_KEY,
  sessionName: 'image-scraper',
  proxyCountry: 'US',
  sessionTTL: 300,
});

const page = await browser.newPage();
await page.goto('https://books.toscrape.com/', {
  waitUntil: 'networkidle2',
  timeout: 60000,
});

networkidle2は、初期の画像リクエストが安定するまで待ちますので、フォールド内の画像はすでにDOMにあります。

ステップ2 — スクロールして遅延読み込み画像をトリガーする

フォールド下の画像は、通常はプレースホルダーのまま、スクロールして表示されるまで待ちます。ページをステップで下にスクロールし、ローダーが本物のURLに入れ替えるために一時停止します：

javascript Copy

await page.evaluate(async () => {
  for (let y = 0; y < document.body.scrollHeight; y += 600) {
    window.scrollBy(0, 600);

次の英語のテキストを日本語に翻訳します：

無限スクロールギャラリーの場合は、document.body.scrollHeight が増えなくなるまでループします — それが、読み込む画像がもうないというシグナルです。

無料プランでAPIキーを取得するには: app.scrapeless.com

ステップ3 — 解決されたURLとメタデータを収集する

ブラウザが実際に解決したURLを読み取り、一般的な遅延読み込み属性を考慮しながら絶対URLに変換します：

javascript Copy

const images = await page.evaluate(() => {
  const abs = (u) => { try { return new URL(u, location.href).href; } catch { return null; } };
  return [...document.querySelectorAll('img')]
    .map((img) => {
      const src =
        img.currentSrc ||           // ブラウザが選んだ候補 (srcsetを処理)
        img.src ||
        img.getAttribute('data-src') ||
        img.getAttribute('data-lazy-src');
      return {
        src: abs(src),
        alt: img.alt || null,
        width: img.naturalWidth,
        height: img.naturalHeight,
      };
    })
    .filter((i) => i.src);
});

console.log(images.length, 'images');
console.log(images[0]);
// 20 images
// {
//   src: 'https://books.toscrape.com/media/cache/2c/da/2cdad67c44b002e7ead0cc35693c0e8b.jpg',
//   alt: 'A Light in the Attic',
//   width: 125,
//   height: 155
// }

currentSrc が重要です：srcset画像のレスポンシブな候補は、現在のビューポートでブラウザが選んだものを提供します。naturalWidth と naturalHeight を取得することで、後でアイコンやスペーサーを簡単なサイズフィルターで除去できます。

ステップ4 — ページを通じて画像をダウンロード

裸のHTTPクライアントを通してダウンロードするのは、ホットリンク保護の影響を受ける場所です — CDNは参照元やクッキーを見ることができず、403エラーを返します。代わりにページのコンテキスト内で各画像をフェッチし、セッションの資格情報を保持してローカルでbase64をデコードします：

javascript Copy

import { writeFileSync } from 'node:fs';

const url = images[0].src;
const out = await page.evaluate(async (u) => {
  const res = await fetch(u);
  const bytes = new Uint8Array(await res.arrayBuffer());
  let binary = '';
  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
  return { status: res.status, type: res.headers.get('content-type'), b64: btoa(binary) };
}, url);

writeFileSync('./image-0.jpg', Buffer.from(out.b64, 'base64'));
console.log({ status: out.status, type: out.type, bytes: Buffer.from(out.b64, 'base64').length });
// { status: 200, type: 'image/jpeg', bytes: 9876 }

集めたimagesに対してこれをループさせてバッチダウンロードし、リクエスト間に小さな遅延と控えめな並行性を保つことでCDNを快適な状態に保ってください。

返ってくるもの

収集された各画像はフラットなレコードです — 解決されたURLとメタデータが含まれています：

json Copy

[
  {
    "src": "https://books.toscrape.com/media/cache/2c/da/2cdad67c44b002e7ead0cc35693c0e8b.jpg",
    "alt": "A Light in the Attic",
    "width": 125,
    "height": 155
  }
]
// books.toscrape.comからの実際のキャプチャ (ホームページに20枚の画像)。値はページの変更に伴い変動します。

いくつかの正直な観察：

小さなサイズは通常、コンテンツではありません。 アイコン、スプライト、トラッキングピクセルを除外するために、閾値（たとえば50×50）以下のものをフィルタリングします。
srcset は複数の解像度が存在することを意味します。 currentSrc はビューポートに適したものを提供します。特に最大サイズを欲しい場合は生のsrcsetを解析してください。
背景画像は<img>タグではありません。 CSSのbackground-image URLは計算されたスタイルに存在します — ギャラリーがそれを使用している場合は別途収集してください。
参照元をチェックするCDNに対しては、ページを通じてダウンロードします。 裸のリクエストでは403エラーになります。

結論：信頼性のあるバッチ画像スクレーパー

信頼できる画像スクレーパーは、描画 → スクロール → 解決されたURLの読み取り → ページを通じてダウンロードの流れです。スクロールをスキップすると遅延画像を見逃し、currentSrcの代わりに生のsrcを読むとプレースホルダを取得してしまい、裸のクライアントでダウンロードするとホットリンク保護されたCDNに拒否されます。Scrapeless Scraping Browserを利用すれば、ギャラリーを最初に読み込むための実ブラウザと住宅の出口を提供します。画像ではなくページURLを収集するには、Etsyスクレーパーガイドをご覧ください；Scraping Browser製品ページとドキュメントは完全なSDKサーフェスをカバーしています。最初にスクロールし、currentSrcを読み取り、メタデータを保持し、セッションを通じてバイトをフェッチしてください。

AIを活用したデータパイプラインを構築する準備はできましたか？

コミュニティに参加して、無料プランを取得し、画像およびメディアパイプラインを構築している開発者とつながりましょう: Discord · Telegram。

app.scrapeless.com にサインアップして、無料のスクレイピングブラウザランタイムを利用し、上記のパターンをギャラリーやCDNに適応させてください。スケールについては、料金をご覧ください。

FAQ

Q: ウェブサイトから画像をスクレイピングするのは合法ですか？
公開されている画像を収集することは一般的に許可されていますが、著作権やサイトの利用規約は、使用方法に適用されます。公共の画像のみをスクレイピングし、ライセンスを尊重し、利用規約を確認し、ご自身の利用ケースについて弁護士に相談してください。

Q: 私のスクレイピングされたsrc値が空か小さなプレースホルダーになっているのはなぜですか？
画像がレイジーロードされているためです。ページをまずスクロールして、ローダーがプレースホルダーを実際のURLに置き換えるようにし、srcだけではなくcurrentSrcやdata-srcを読むようにしてください。

Q: 無限スクロールのギャラリーをどう処理すればよいですか？
document.body.scrollHeightが増加し続ける限りスクロールステップをループし、その後収集します — それがもはや画像が読み込まれないという信号です。

Q: ダウンロードが403エラーになるのに、URLはブラウザで機能しているのはなぜですか？
CDNがリファラー/クッキーをチェックしているため（ホットリンク保護）。ページ内でfetch()を使ってダウンロードすることで、リクエストがレンダリングされたセッションの資格情報を持つようになります。

Q: 最高解像度のバージョンを取得するにはどうすればよいですか？
生のsrcsetを解析し、最も大きな候補を選択してください。currentSrcは現在のビューポートを反映するためです。

Q: プロキシは必要ですか？
公共の画像ページの場合は、しばしば必要ありません — しかし、proxyCountryを設定することで、画像が多いページとそのCDNが通常の訪問者として扱う一貫した住宅IPが得られます。

Q: AIエージェントなしでこれを実行できますか？
はい。Scrapelessセッションに対する単なるPuppeteerです — エージェントは必要ありません。

Scrapelessでは、適用される法律、規制、およびWebサイトのプライバシーポリシーを厳密に遵守しながら、公開されているデータのみにアクセスします。このブログのコンテンツは、デモンストレーションのみを目的としており、違法または侵害の活動は含まれません。このブログまたはサードパーティのリンクからの情報の使用に対するすべての責任を保証せず、放棄します。スクレイピング活動に従事する前に、法律顧問に相談し、ターゲットウェブサイトの利用規約を確認するか、必要な許可を取得してください。