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)に詳しくなると、こういった対応を自分で思いついて試すことができます。

📂-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 より:

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

comment

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

関連記事

Web

HSTS が原因で、ウェブサイトが勝手にhttps接続しないようにする

HSTSが原因で、サイトが勝手にhttps接続されないようにする方法について説明します。

Web

Cookie使用の同意を求めるポップアップを表示する (Cookie Consent by Osano)

Cookie Consent by Osano の使い方について説明します。

Glitch

Glitch で PHP を使う方法

Glitch は正式にPHPをサポートしていませんが、ほんの少しの設定変更により、PHPが使えるようになります。

Web

YouTube でコメントが表示されないときの対処法

YouTube でコメントが表示されないときの対処法を紹介します。

Web

CORPヘッダーを使って、自分のサイトの画像を他のサイトから直リンクさせない方法

自分のサイトの画像を他のサイトから直リンクさせない方法について説明します。