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)で行われますので、
      何かしら他の情報がサーバーに送られることはありません。
      ご安心ください。

comment

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

関連記事

Google

Google マップの便利な機能

目次1. はじめに2. Googleマップの便利な機能3. 経路検索(ルート検索)経路をホーム画面に追加4. 運転モード5. マイプレイス6. 印刷 1. はじめに Googleマップ はとても便利な …

ICTリテラシー

無料レンタルサーバーとDokuWiki で作る自分用情報サイト

本サイトに パソコン内に自分専用の情報データベースをつくる というページがあります。詳細はリンク先を見て頂くとして、本ページではこれに関連して、「自分専用の情報サイトを作る」ためのオススメの方法につい …

Web

GitHub 上の Jupyter Notebooks を Binder で(実行可能な状態で)共有する

GitHub 上の Jupyter Notebooks を Binder で(実行可能な状態で)共有する方法について説明します。

Web

Firefox で DNS-over-HTTPS (DoH) を有効にする方法

Firefox で DNS-over-HTTPS (DoH) を有効にする方法について説明しています。

WordPress

WordPress の推奨環境

WordPress を動作させるための推奨環境については、以下のページに載っています。 About » Requirements — WordPress 最初に、 To run WordPress w …