パッと簡単にバナー画像のサイズを調べる方法

ブラウザ上の画像のサイズを測れる便利なアドオンはいくつも存在しますが、アドオンをインストールしなくても簡単にブラウザ上の画像のサイズを調べる方法です。

WEB上の画像のサイズの調べ方

webブラウザ毎に方法が異なりますので、ブラウザ別に説明してきますね。

 

Firefoxの場合(簡単)

1、調べたい画像ファイルの上で右クリック→「画像の情報を表示」をクリック
2、画像サイズが表示されます

Firefox画像サイズの調べ方

IEの場合(簡単)

1、調べたい画像ファイルの上で右クリック→「プロパティ」をクリック
2、画像サイズが表示されます

IE画像サイズの調べ方

Google Chormeの場合

1、調べたい画像ファイルの上で右クリック→「検証」をクリック

クローム画像サイズのはかり方

2、「Elements」タブに画像のソースが青く表示されます。図③の「width=”800″ height=”320″」とあるのが画像の元のサイズです。図②の数値が表示サイズです。注意が必要なのは、レスポンシブサイトの場合は図②の数値がブラウザの大きさによって変わってきてしまうということです。ここの数値は今実際に表示されている画像のサイズということなりますので注意してください。

クローム画像サイズのはかり方

「Elements」のソースに「width=”” height=””」がない場合もあります。(その場合でも図②は表示されています。)
元の画像サイズを調べるには画像を保存してサイズを調べます。
Chormeは画像を右クリックで保存ができません。そこで下記の方法で画像を保存することができます。

1、調べたい画像ファイルの上で右クリック→「検証」をクリック
2、今度は先ほどの「Elements」の横並びにある①「Application」タブを見ます。すると②「Frames」のImages に Web ページで読み込まれている画像が全部一覧で表示されています。その中から該当の画像を見つけると右に表示されるので、右クリックで③[Save]します。ローカルの適当なところに保存したら、続きは下の「パソコン上の画像のサイズのはかり方」をみてください↓

クローム画像サイズのはかり方

Safariの場合(簡単)

1、調べたい画像ファイルの上で右クリック→「イメージを別名で保存」をクリック
2、ローカルの適当なところに保存したら、続きは下の「パソコン上の画像のサイズのはかり方」をみてください↓

Safari画像の保存

 

パソコン上の画像のサイズのはかり方

1、計りたい画像ファイルの上で右クリック
2、windows「プロパティ」、Mac「情報を見る」をクリック
3、windowsは「詳細」又は「概要」タブをクリック
イメージのところに画像サイズが表示されています。

PC上の画像のサイズ

以上、簡単に画像のサイズを調べる方法でした。

SNSでもご購読できます。

コメント

コメントを残す

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>