BLOG

ブログ

Chromeでweb上の画像サイズを手軽に調べる方法2つ

webデザインネットTips
Chromeでweb上の画像サイズを手軽に調べる方法2つ

みなさんは普段どのブラウザを使っていますか?Chrome?Edge?Firefox?

私はWindowsでもMacでもスマホでも、Chromeを使っています。

webデザイナーをやっていると、サイトで使われている画像のサイズを手軽に調べたいときってありますよね。小さく表示されてるけど、ほんとは何pxなんだ?とか。このサイトと同じサイズで作ってって言われたけど、何pxなんだ??とか。

そんな時にパパっとサイズを調べられる方法が2つあります。どちらも2クリックで済みます。


【方法1】画像を新しいタブで開く

実際の画像サイズを知りたいだけなら、拡張機能はいりません。画像を右クリック → 新しいタブで開けば、サイズが表示されます。


①画像を右クリック
②「新しいタブで画像を開く」をクリック


Chromeのタブに画像サイズが表示されます。\簡単!/


【方法2】拡張機能「Image Size Info」を使う

実際の画像サイズだけでなく、ページ上何pxで表示されているのかを調べるには、Chrome拡張機能の「Image Size Info」が便利です。

Chromeウェブストアから追加しましょう。
Chromeウェブストア「Image Size Info」

追加すると、画像を右クリックしたときに、サイズ情報を見る選択肢が出るようになります。


①画像を右クリック
②「View Info」をクリック


・Dimensions … 実際のサイズ
・Displayed … 表示上のサイズ

が表示されます。\簡単!/


以上、Chromeでweb上の画像サイズを手軽に調べる方法2つでした。