Web

ウェブ上の「名前を付けて画像を保存」ができない画像をダウンロードする方法

投稿日:2019年1月9日 更新日:

1. 「名前を付けて画像を保存」ができない画像

ウェブページに載っている画像をダウンロードしたい場合、通常は画像を右クリックして「名前を付けて画像を保存」などといった項目を選択します(文言はブラウザによって違います)。

名前を付けて画像を保存
名前を付けて画像を保存

しかし時々この「名前を付けて画像を保存」という項目が表示されない場合があります。

[名前を付けて画像を保存]がない!
[名前を付けて画像を保存]がない!

※ [名前を付けて保存] では、このウェブページが保存されます(画像ではなく)。

わざとそのように作られている場合もありますし、画像表示ライブラリを使用した結果そうなってしまったという場合もあります。

本記事では、こういった場合であっても画像を保存する方法を紹介します。

2. この手の画像を保存する方法

Chrome を使って説明します。


(1) 画像を右クリックし [検証] を選択します。

[検証] を選択します
[検証] を選択します


(2) 画像URLを指定しているHTML要素を探します。

デベロッパーツールの [Elements]タブが開きますので、その中から目的の画像のURLが指定されているHTML要素を探します。img要素の src属性や、a要素の href属性にセットされているでしょう。

デベロッパーツールの [Elements]タブ
デベロッパーツールの [Elements]タブ


(3) その部分を右クリックし [Open in new tab] を選択します。

[Open in new tab] を選択します
[Open in new tab] を選択します


(4) 画像を右クリックして保存します。

画像単体が新たなタブで表示されますので、画像を右クリックし [名前を付けて画像を保存] を選択して画像をダウンロードします。

[名前を付けて画像を保存] を選択します
[名前を付けて画像を保存] を選択します

3. おわりに

今回例として取り上げたのは、以下のページです。

預金通帳型の「読書の記録」導入 大分・杵築市立図書館 – 毎日新聞

毎日新聞のサイトに限らず、今回のような画像にときどき遭遇することがあります。Twitter に載せられた画像も、[名前を付けて画像を保存] が表示されないことがありますね。

Web の仕組み(今回の場合 HTML)に詳しくなると、こういった対応を自分で思いついて試すことができます。

4. Chrome のデベロッパーツールを使った別の方法(追加:2021-08-04)

Chrome のデベロッパーツール を使った別の方法を紹介します。

(1) Chrome で目的のページを開きます。

(2) Chrome の右上のアイコンから [その他のツール] – [デベロッパーツール] を開き、[Network] パネルを表示します。

(3) [Disable cache] にチェックを入れ(入っていなかった場合)、[Img] のところを選択状態にします。

(4) Ctrl + R キーなどで画面を再読込します。

(5) デベロッパーツールの左下の枠に、ダウンロードされた画像ファイルが表示されるので、その中から目的の画像ファイルを探します。

  • 画像ファイル名のところをクリックすると右側に詳細が表示され、その中にある [Preview] をクリックすると画像が表示されます。この状態で、ファイル名を順番に選択していくと、画像プレビューも連動されるので目的の画像を探しやすいです。

(6) 目的の画像が見つかったら、[Preview] に表示されている画像を右クリックし、[Save image as…] を選ぶと画像ファイルを保存することができます。

Chrome デベロッパーツールの [Network] パネルを使った方法

📂-Web

執筆者:labo


  1. 加藤嘉章 より:

    デベロッパーツールを使用した本記事を大変興味深く拝見しました。ありがとうございます。
    ところで、この記事の反対、Webページの「検証」からデベロッパーツールを使用して「名前を付けて保存」の表示を出来なくする方法はありますか?
    ある画像にHTML編集を行い、「oncontextmenu=”return false;」を挿入して右クリックそのものを出来なくしましたが、その画像をクリックして表示された拡大した画像では「右クリックで保存」が可能になってしまいます。この拡大した画像に対し、「検証」からデベロッパーツールを使用して、右クリックそのものを出来なくしたいのですが方法が分かりません。
    この「コメント」欄でもしご教示いただけるなら、教えていただきたいのですが。

    • labo より:

      コメントありがとうございます。
      ウェブサーバー上にある画像ファイルをダウンロードさせたくないというお話しでしょうか?
      例えば、本記事「2の(2)」の画像には、デベロッパーツール内に画像ファイルのURLが表示されていますが、このURLが分かってしまった時点で「ユーザーがこの画像ファイルをダウンロードすること」を止めることはできません。本記事で紹介した方法以外にも、デベロッパーツールの[Network]タブから画像ファイルのURLを探すこともできます。
      また、ウェブブラウザから画像ファイルのURLに直接アクセスして画像を表示する場合(本記事内にある「Open in new tab」がこれです)に、右クリックを禁止することもおそらくできないのではないかと思います。
      (デベロッパーツールは、そのパソコンにダウンロードされたHTMLを編集するだけです)

  2. 匿名 より:

    興味深い内容ありがとうございます。
    上記の方法で画像を保存した場合、保存先のパソコンのアカウント情報が画像が掲載されているWebページを管理している人に記録されることはありますでしょうか?
    ご教授いただければ幸いです。
    宜しくお願い致します。

    • labo より:

      画像を保存する際、その画像にアクセスして(画像を)取得することになりますが、
      このアクセスは、Webページにアクセスするのと同じ仕組み (HTTP)で行われますので、
      何かしら他の情報がサーバーに送られることはありません。
      ご安心ください。

  3. みみずく より:

    はじめまして。
    open in new tabで開いても真っ黒で写真が出てこない場合はどうしたら良いのか
    教えていただけましたら幸いです。
    宜しくお願いします。

    • labo より:

      どのようなWebページと画像なのでしょうか?
      具体的に教えて頂ければ、こちらでも試してみます。

      • みみずく より:

        ありがとうございます。
        不動産会社の物件を家を建てる際の参考にとっておきたいと思っています。
        URLを載せますのでそこだけ削除しての公開にお願いします。

        • labo より:

          情報ありがとうございます。
          まず、頂いたページの中央にあるスライド(カルーセル)部分ですが、
          ここに表示されている画像を右クリックし、
          [名前を付けて画像を保存…]を選択することで問題なく画像を保存することができました。
          そして、次の画像にスライドさせた上で同じ操作を行うと
          この「スライド内の2つ目の画像」も保存できました。それ以降のスライド画像も同様です。
          また、ページの右側にある建物画像も同じ手順で保存できました。

          ですので、このページ上の画像を保存する場合、本記事で説明している面倒なやり方を行う必要はないようです(やろうと思えばできますが)。

          ※ こちらの環境は、OS が Windows 10 で、ブラウザは Chrome です。

          • みみずく より:

            ほんとですね、できました。
            一枚ずつ写真を表示させなくても良いのですね。
            表示させるとできなかったので。
            ありがとうございます!

      • labo より:

        画像が保存できたとのことで、安心しました。

  4. AkiRA より:

    アニメの公式サイトの画像などは拾うことは可能でしょうか。
    自分でやってみたのですが、うまくリンクが表示されないので、もしよければ教えてもらえると幸いです。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

Webサイトに使用されている色のコントラストをチェックする

目次1. はじめに2. Webコンテンツで推奨されるコントラスト比3. コントラスト比をチェックすることができるサービス4. コントラスト比の問題を自動的に検知する 1. はじめに 本ページでは、We …

Google App Engine

GAE (PHP 7) で Cloud Firestore を使う手順

Google App Engine で Firestore を使う手順について説明します。

Web

インストールが可能になるための最低限のウェブサイト(PWA)を作る

インストールが可能になるための最低限のウェブサイト(PWA)を作る方法について説明します。

Web

window.opener を使って元ウィンドウの情報が取得できるかどうかの実験

ウェブブラウザでウェブページを表示している場合、ブラウザのウィンドウを表す window というオブジェクトが存在しており、JavaScript から利用することができます。 window.opene …

Firefox

Firefox のコンテンツブロッキング (Enhanced Tracking Protection)

Firefox の コンテンツブロッキング 機能について説明します。