作業効率化

WEBサイトで使われている画像のサイズや容量を表示【Chrome拡張機能】

画像のサイズと容量の表示

WEBサイトで使われている画像の「サイズ」や「容量」などを簡単表示できる方法の紹介です。

以下の用途で役立ちます。

  • 自分のブログの画像サイズチェック
  • 他人のサイトの画像を参考にする

 

こんな人のお役に立てる記事です

小豆
大きすぎる画像を、気づかずにそのままブログにUPしてしまうことがある。
これって、後から簡単に確認できないの?
それと、他人のブログで使われている画像の詳細も確認してみたい。

Chrome拡張機能WEBページ内の画像のサイズや容量を簡単に表示する

WEBページ内で使われている画像の「サイズ」や「容量」が気になることって、けっこうあります。

例えば、以下のような場合。

  • 画像サイズを自分のブログでも参考にしたい
  • 鮮明に表示されている画像の容量が気になる
  • 自分のブログで使用した画像のサイズに間違いがないか調べたい

ちなみにこれらは、画像を一旦保存すれば確認することが可能です。

名前をつけて画像を保存

画像を右クリック → 名前をつけて画像を保存 → プロパティ

小豆
確かにそうなんだけど・・。
この「一旦保存」ってのが、すごく手間なんだよなぁ。
わかる。
何枚もの画像をチェックするとなると、相当面倒くさいよね。
大福

 

そこで便利なのが、Google Chrome拡張機能の利用です。

面倒な手間は一切なし!

クリック一つで簡単に画像の詳細を一発表示することができます。

 

Chrome拡張機能【Image Size Info】

画像の詳細情報を表示

Image Size Infoで確認できる項目

  • 画像のファイル名
  • 画像の拡張子
  • 画像のサイズ
  • 画像の容量

操作方法は、目的の画像をクリックするだけ。

めちゃくちゃ簡単ですね。

ブロガーには「必須レベル」のツールです。

Image Size Infoの使い方

拡張機能のインストール~使い方を解説していきます。

手順

  1. Chromeウェブストアからインストール
  2. Image Size Infoの使い方

 

step
1
Chromeウェブストアからインストール

Image Size Info

Chromeウェブストア → Image Size Info → Chromeに追加

Chromeウェブストア【Image Size Info】はこちら

 

step
2
Image Size Infoの使い方

Image Size Infoの使い方

画像の上で右クリック → View Info

画像の詳細情報一覧

① URL 画像のURL(語尾に拡張子が表示)
② Dimensionns オリジナル画像のサイズ
③ Display ディスプレイ上での表示サイズ
④ File Size ファイルサイズ(容量)

画像の詳細表示で便利になる3つのこと

画像のサイズや容量、URLの表示により「便利になること」を3つ紹介します。

画像の詳細表示で便利になること

  • 自分のブログで使用した画像の間違いに気づける
    ぱっと見「一緒に見える画像」も実は・・
  • 参考にしているブログで使われている画像の詳細がわかる
    このブログ内で使われている画像のサイズは?拡張子は?
  • 自分のブログ内から目的の画像を探しやすくなる
    この記事内で使用している画像を、別の記事でも使いたい

 

① 自分のブログで使用した画像の間違いに気づける

まずは、こちらの2枚の画像を見比べてみてください。

画像 A

画像サイズ小

画像 B

画像サイズ大

一見全く同じ用に見える2枚の画像ですが、実は・・。

画像 A 画像 B
画像Aのサイズ 画像Bのサイズ
サイズ:640 × 427  サイズ:1280 × 853
容量:47.85KB 容量:392.62KB

画像はクリックで拡大できます

Image Size Infoを使用してみると、画像のサイズも容量も全く違うことがわかります。

ツールなしでは、さすがにぱっと見でこの違いに気づくことは難しそうですね。

小豆
容量の大きなオリジナル画像を、間違えてそのままUPしてしまった・・。

記事UP後に「Image Size Info」を使用すれば、こういったミスにもすぐに気付けますね。

 

② 参考にしているブログで使われている画像の詳細がわかる

いくつかのWEBサイトやブログを見ていると、以下のように思うことがありますよね。

  • この画像って、JPG? PNG?
  • 画像がすごく鮮明できれいだけど、容量はどうなってるの?

 

こんなときは、すぐに「Image Size Info」で確認。

拡張時の確認

知りたい情報を、すぐに表示することができます。

 

③ 自分のブログ内から目的の画像を探しやすくなる

大福
過去に使った「あの画像」をもう一度使用したい。

記事を書いていると、こんなふうに思うことがあります。

 

WordPressメディア内から目的の画像を探し出すには「画像のファイル名」が必要です。

メディアライブラリーから画像を検索

ただし、過去に使用した画像のファイル名なんて、いちいち覚えているはずもありません。

そんな時も、Image Size Infoが活躍します。

 


  • 目的の画像を表示

    Image Size Infoの使い方

    目的の画像が使われているページを表示 → Image Size Infoを起動


  • 画像を新しいタブで開く

    画像を別タブで開く

    Open image in new tab をクリック


  • 画像のファイル名を確認

    表示されたファイル名をコピー

    表示されたファイル名を確認 → WordPressメディアライブラリで検索


 

まとめ:記事内の画像チェックを癖にしよう

大きすぎる画像の使用は、サイトの読み込み速度の遅延に繋がります。

これは、SEO的にもあまりよろしくないですね。

というわけで、ブログ記事UP後は「画像のチェック」を癖にしたいところ。

【Image Size Info】なら、効率よく画像のチェックを行うことができます。

 

  • 関連記事

 

こちらの記事もよく読まれています

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴4年目。当ブログのアクセス数は月6万PVほど。月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。 人懐っこい性格ですが、人見知りです。

-作業効率化

© 2021 大福日記