小平淳一の共有ノート

ニッチな発見をディープな視点でお届け。Apple(Mac、iPhone、iPad)成分が多めです。

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

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

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

大まかな流れ

  • Google Chromeで[検証]を選ぶ
  • [Apptication]タブを表示
  • [Flame]→[top]→[Images]と階層をたどる
  • 目当ての画像を探して保存

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