1. 「名前を付けて画像を保存」ができない画像
ウェブページに載っている画像をダウンロードしたい場合、通常は画像を右クリックして「名前を付けて画像を保存」などといった項目を選択します(文言はブラウザによって違います)。
しかし時々この「名前を付けて画像を保存」という項目が表示されない場合があります。
※ [名前を付けて保存] では、このウェブページが保存されます(画像ではなく)。
わざとそのように作られている場合もありますし、画像表示ライブラリを使用した結果そうなってしまったという場合もあります。
本記事では、こういった場合であっても画像を保存する方法を紹介します。
2. この手の画像を保存する方法
Chrome を使って説明します。
(1) 画像を右クリックし [検証] を選択します。
(2) 画像URLを指定しているHTML要素を探します。
デベロッパーツールの [Elements]タブが開きますので、その中から目的の画像のURLが指定されているHTML要素を探します。img
要素の src
属性や、a
要素の href
属性にセットされているでしょう。
(3) その部分を右クリックし [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…] を選ぶと画像ファイルを保存することができます。
デベロッパーツールを使用した本記事を大変興味深く拝見しました。ありがとうございます。
ところで、この記事の反対、Webページの「検証」からデベロッパーツールを使用して「名前を付けて保存」の表示を出来なくする方法はありますか?
ある画像にHTML編集を行い、「oncontextmenu=”return false;」を挿入して右クリックそのものを出来なくしましたが、その画像をクリックして表示された拡大した画像では「右クリックで保存」が可能になってしまいます。この拡大した画像に対し、「検証」からデベロッパーツールを使用して、右クリックそのものを出来なくしたいのですが方法が分かりません。
この「コメント」欄でもしご教示いただけるなら、教えていただきたいのですが。
コメントありがとうございます。
ウェブサーバー上にある画像ファイルをダウンロードさせたくないというお話しでしょうか?
例えば、本記事「2の(2)」の画像には、デベロッパーツール内に画像ファイルのURLが表示されていますが、このURLが分かってしまった時点で「ユーザーがこの画像ファイルをダウンロードすること」を止めることはできません。本記事で紹介した方法以外にも、デベロッパーツールの[Network]タブから画像ファイルのURLを探すこともできます。
また、ウェブブラウザから画像ファイルのURLに直接アクセスして画像を表示する場合(本記事内にある「Open in new tab」がこれです)に、右クリックを禁止することもおそらくできないのではないかと思います。
(デベロッパーツールは、そのパソコンにダウンロードされたHTMLを編集するだけです)
興味深い内容ありがとうございます。
上記の方法で画像を保存した場合、保存先のパソコンのアカウント情報が画像が掲載されているWebページを管理している人に記録されることはありますでしょうか?
ご教授いただければ幸いです。
宜しくお願い致します。
画像を保存する際、その画像にアクセスして(画像を)取得することになりますが、
このアクセスは、Webページにアクセスするのと同じ仕組み (HTTP)で行われますので、
何かしら他の情報がサーバーに送られることはありません。
ご安心ください。
はじめまして。
open in new tabで開いても真っ黒で写真が出てこない場合はどうしたら良いのか
教えていただけましたら幸いです。
宜しくお願いします。
どのようなWebページと画像なのでしょうか?
具体的に教えて頂ければ、こちらでも試してみます。
ありがとうございます。
不動産会社の物件を家を建てる際の参考にとっておきたいと思っています。
URLを載せますのでそこだけ削除しての公開にお願いします。
情報ありがとうございます。
まず、頂いたページの中央にあるスライド(カルーセル)部分ですが、
ここに表示されている画像を右クリックし、
[名前を付けて画像を保存…]を選択することで問題なく画像を保存することができました。
そして、次の画像にスライドさせた上で同じ操作を行うと
この「スライド内の2つ目の画像」も保存できました。それ以降のスライド画像も同様です。
また、ページの右側にある建物画像も同じ手順で保存できました。
ですので、このページ上の画像を保存する場合、本記事で説明している面倒なやり方を行う必要はないようです(やろうと思えばできますが)。
※ こちらの環境は、OS が Windows 10 で、ブラウザは Chrome です。
ほんとですね、できました。
一枚ずつ写真を表示させなくても良いのですね。
表示させるとできなかったので。
ありがとうございます!
画像が保存できたとのことで、安心しました。
アニメの公式サイトの画像などは拾うことは可能でしょうか。
自分でやってみたのですが、うまくリンクが表示されないので、もしよければ教えてもらえると幸いです。
具体的な情報を教えて頂ければ試してみますよ。
(情報が公開されたくなければ、問い合わせページから送って頂いてもOKです)
https://sao-p.net/
https://anime.fate-go.jp/ep7-tv/
などになります
https://5th.fate-go.jp/
このサイトだと、デベロッパーツールを使っても出なかったです。
やり方を詳しく教えてもらえないでしょうか
本文の最後に、別の方法を追記しましたので、そちらを参考にしてください。
初めまして。
Chrome のデベロッパーツールを使った別の方法を興味深く拝見しました。
そして、実際にあるサイトで試してました。
Chrome のデベロッパーツールを使った別の方法の赤い④のようにファイルの名前が出て、その右に画像が出ました。
ただし、ファイルの名前が.jpgではなく、.txtでした。
おかしいと思いながら、ご教示いただいた方法のとおり、保存しました。
保存したファイルを開いたところ、意味不明の文字列が出てきただけでした。
この画像は、いつもあるわけではないものでした。(チャットで、チャットの相手方が示す画像なので
チャットが閉じられると、その画像もなくなります。)
保存できる方法がわかれば、ご教示いただけますと幸いです。
以上の情報だけではわからないということでしたら、その旨お示しいただけると、幸いです。
お手数おかけしますが、よろしくお願いいたします。
詳細は分かりませんが、ファイルの拡張子を「画像の拡張子( .jpg や .png など)」に変えてみてはどうでしょうか。
ご回答ありがとうございます。
↑の「(6) 目的の画像が見つかったら、[Preview] に表示されている画像を右クリックし、[Save image as…] を選ぶと画像ファイルを保存することができます。」のところで、「.txt」を「.jpg」に変えてみるということですね。
やってみます。
ありがとうございました。