背景画像の取得方法

 背景画像が取得できない！ 

Mangled Momentum Event Timing & Management

mangledmomentum.com

■先日、調べ事をしていると、背景にモニュメントバレーの写真を用いたウェブサイトを発見。 どんな背景画なのか全体が見たくなった。 しかし、背景画だけを表示しようとプロパティを見ても、画像ファイルが表示されない。

通常なら、画像ファイルのURLをコピーしてブラウザのアドレスバーに貼り付ければ画像が表示される。 プロパティに画像ファイル名が表示されない場合は、ソース(IEは”表示”のメニュー内にある)を表示し、この中にある画像ファイル拡張子のファイルを探せば見つかる。 相対パスの場合は、これをコード前文を参照して絶対パスにする。

■今回のサイトは、画像ファイル拡張子の付いたファイルが見つからない。 Cascading Style Sheets (CSS)もさっぱり分からない。 そこで、ブラウザをグーグルクロームに変更し、”デベロッパーツール”で分析してみた。

■Webサイトに使われている背景画像を取得する手順：Chromeデベロッパーツール

デベロッパーツール → Application → Frames → Images

”Images”の中の画像を一つ一つチェックしていくと、背景画が見つかる。

背景画像のURLは、ウェッピー”***.webp”だった。

表示するだけなら、これで終了。 画像を再利用するならjpg等のファイルに変換しなければならない。 オンラインで画像変換する‎”Convertio”というサイトがあるので、これを利用。 jpgファイルにすると、webpよりも多少ファイルサイズが大きくなる。

<参考ウェブサイト>

　ascii.jp 競合サイトのCSSとJavaScriptを丸裸にする方法

　jkodaira.info Webサイトに使われている背景画像を取得する方法

　news.mynavi.jp Webページの画像をまとめて保存する方法 (Firefoxの場合)

　pc.beginners-luck.net CSSに書かれた背景画像をゲットする方法 (Firefoxの場合)

　bamka.info ウェブページ上にある画像を一括保存できるChrome拡張

　　「Image Downloader」が超便利

　shurey.com リンクと画像の抜き出しツール

　love-guava.com 拡張子「WebP」のファイルをJPEGやPNGなどに変換する方法

END