Webサイトに掲載されているバナー画像のサイズを調べたい時、「右クリック保存できない」「ソースを見ても分からない」と困ることがあります。最近のホームページでは画像保護やCSS背景画像を使っているケースも多く、単純に右クリックだけでは画像情報が取得できないことも珍しくありません。この記事では、ホームページ上のバナー画像サイズを調べる方法を、初心者向けに分かりやすく解説します。
右クリック保存できなくても画像サイズは調べられる
まず知っておきたいのは、画像のダウンロードが禁止されていても、画像サイズ自体は確認できる場合が多いということです。
最近のサイトでは以下のような理由で右クリック制限されています。
- JavaScriptによる右クリック禁止
- 背景画像として配置
- CSSで表示
- Canvas表示
- 画像保護プラグイン利用
そのため、画像サイズ確認は「開発者ツール」を使う方法が非常に有効です。
最も簡単なのは「検証ツール」を使う方法
ChromeやEdgeなどのブラウザには、Webページ解析機能が標準搭載されています。
パソコンで以下を試してみてください。
- 画像上で右クリック
- 「検証」または「Inspect」を選択
- HTMLコードが表示される
すると、対象画像のHTML要素が自動選択されることがあります。
例えば以下のようなコードが見つかります。
<img src="banner.jpg" width="1200" height="400">
この場合、画像サイズは1200×400pxです。
画像が見つからない場合はCSS背景画像の可能性
最近のホームページでは、画像を<img>タグではなくCSS背景画像として表示していることがあります。
その場合は以下のようなコードになります。
background-image:url("banner.jpg")
この場合、HTMLではなくCSS側に画像情報があります。
特に企業サイトやLPでは背景画像方式がかなり多いです。
Chrome開発者ツールで画像サイズを調べる手順
初心者でも比較的分かりやすい方法として、Chromeの「Network」機能があります。
手順
- F12キーを押す
- 「Network」タブを開く
- ページ再読み込み
- 「Img」を選択
- 画像一覧を確認
すると、読み込まれている画像一覧が表示されます。
画像をクリックすると、実際のサイズや容量も確認できます。
| 確認できる情報 | 内容 |
|---|---|
| 画像URL | 実際の画像場所 |
| 解像度 | 横×縦サイズ |
| 容量 | KB・MBサイズ |
| 形式 | jpg/png/webpなど |
表示サイズと実画像サイズは違う場合がある
Webサイトでは、実際の画像サイズと画面表示サイズが異なることがあります。
例えば、実画像が1920pxでも、画面では600px表示されるケースがあります。
つまり以下2種類があります。
- 表示サイズ
- 元画像サイズ
バナー制作の参考にする場合は、元画像サイズを見る方が重要です。
スマホだけで確認したい場合
スマホ単体でも確認できる方法はあります。
例えばChromeアプリの「PC版サイト表示」を使う方法です。
また、画像長押しで「新しいタブで開く」が表示される場合、画像URLからサイズ確認できることがあります。
ただし、スマホは開発者ツールが使いにくいため、基本的にはパソコン利用がおすすめです。
画像保存禁止サイトでもサイズ確認できる理由
画像はWebページ表示時に必ずブラウザへ送信されています。
つまり、表示されている時点でブラウザ内部には画像データがあります。
そのため、保存制限があっても、通信情報やHTML解析からサイズ確認できるケースが多いのです。
どうしても分からない場合の確認ポイント
画像サイズが見つからない場合は、以下を確認してみましょう。
- iframe表示か
- Canvas利用か
- JavaScript生成か
- SVG画像か
- CDN配信か
特にJavaScript生成画像はHTMLソースだけでは見つけにくいことがあります。
まとめ
ホームページのバナー画像サイズは、右クリック保存できなくても調べられる場合がほとんどです。
特にChromeやEdgeの開発者ツールを使うと、画像URLや実際のサイズを確認しやすくなります。
最近はCSS背景画像やJavaScript表示も多いため、「ソースを見ても画像が見つからない」ケースも珍しくありません。
その場合は、検証ツールやNetworkタブを使って画像通信情報を確認する方法がおすすめです。
コメント