Webサイトの背景画像を保存する方法｜Chrome編

Web Creation
2017.11.08

Webサイト上で見えているのに、ドラッグできないし保存もできない…。そうした画像の多くは、Webのコーディングでしばしば「背景」として配置されています。Google Chromeでそんな画像を保存する手順をご紹介しましょう。

※2023年5月21日：最新の状況に合わせて内容を更新しました。

Google Chromeの「デベロッパーツール」を表示

この記事は、Windows 11でGoogle Chromeを使っています。Mac版のGoogle Chromeは見た目が若干異な理ます、やり方自体はまったく同じです。

Mac版Safariでの方法は、以前に書いた記事をご覧ください。
→Webサイトの背景画像を取得する方法｜Safari編

google Chromeで検証を選択
例えばアップルのWebサイトでは、画像が「背景」として配置されているケースが多いです。そんなとき、まずはページのどこでもいいので右クリックして、コンテキストメニューから［検証］を選びましょう。
デベロッパーツール
ウインドウの右側に「デベロッパーツール」が表示されました。デベロッパーツールとは、ページのソースコードなどを確認できるツールです。しかし、画像を取り出すだけであれば、ソースコードの理解は特に必要ありません。
デベロッパーツールフロート
デベロッパーツールはそのままウインドウの左側に表示させておいてもいいのですが、僕は別ウインドウに切り離して使っています。切り離す操作は、歯車アイコンの横にある［…］ボタンから行います。

デベロッパーツールで画像を表示

Applcationタブを選ぶ
デベロッパーツールのパネルの上のほうに、表示を切り替えるためのタブがあります（一見タブに見えませんが）。そこから［Application］を選びましょう。パネルが狭いとすべてのタブが表示されていませんが、その時は右端にある「>>」を押すと表示しきれない項目が表示されるはずです。
これがApplicationタブに切り替えたところです。この画面の左側、下のほうに［Frames］という項目があると思います。そこから［Top］→［Images］と階層をたどりましょう。
Applecaitonタブで画像を選ぶ
「Images」の横にある三角マークを押して展開すると、そのWebページに使われている画像がすべて表示されます。あとはそこから目当ての画像を見つけて、右クリックして［Save image as…］などから保存します。

なお、デベロッパーツールで画像を選択すると、下側に画像のデータサイズやピクセルサイズ（この例の981×496と書かれている部分）が表示されています。似たような画像が複数あったときは、一番サイズの大きなものをダウンロードするといいでしょう。

以上、ステップバイステップでご紹介してきましたが、慣れてしまえば案外簡単です。ぜひお試しください。

Thumbnail photo by Luca Micheli on Unsplash

タイトルとURLをコピーしました