Image Size Infoの使い方。ブログ画像の最適サイズがわかる

この記事のURLとタイトルをコピーする
Chrome拡張機能
Image Size Info って、どうやって使うの?
Image Size Infoの使い方を説明しましょう。ブログ画像の最適サイズを、調べることができますよ!
この記事でわかること
  • Image Size Info とは?
  • Image Size Info の使い方について
  • Image Size Info の設定について
  • Image Size Info 開発サイト

というわけで今回は、Image Size Info の使い方を、解説します。

Image Size Info とは?

Image Size Info とは?

Image Size Info は、Chrome で閲覧しているページの画像について、解像度・ディスプレイサイズ・ファイルサイズを調べることができます。

ざっくりレビュー!

はじめてのブログ運営では、画像の最適なサイズがわからないですよね。そんなときに、Image Size Info をつかえば、参考にしているブログが、どのぐらいの画像サイズで運営しているのか調べられるので、すごく便利なんです。

Image Size Info の使い方【3ステップ】

Chrome extension howto

Image Size Info の使い方を、解説します。

3ステップで、できるだけわかりやすく解説させていただきます。

【ステップ1】Image Size Info をインストール

Step1 howto

ステップ1は、Image Size Info をインストールします。

Image Size Info 拡張機能を、Chrome ウェブストアからインストールしてください。リンクをご用意しましたので、ご活用くださいませ。Chrome 専用の拡張ツールです。

配信サイトからインストール

Chrome

開発サイト

【ステップ2】調べたい画像の上で、右クリック

Step2 howto

ステップ2は、調べたい画像の上で右クリックします。

操作のポイント
Gazounoue rclick

調べたい画像のうえにマウスを移動して、右クリックしてください。

Gazounoue rclick menu

View info をクリックすれば、Image Size Info の情報パネルを表示させることができます。

ここまでできたら、ステップ3にすすんでください。

コメント

Image Size Info のインストールが完了した時点で、機能が有効化されています。Chrome のツールバーに、アイコンが表示されていることを確認してみてくださいね!

【ステップ3】Image Size Info で画像サイズをチェックする

Step3 howto

ステップ3は、Image Size Info で画像サイズをチェックします。

操作のポイント
Gazounoue info

ステップ2のView info をクリックで、Image Size Info の情報パネルが表示されます。

各項目を日本語であらわすと、こんな感じです↓

  • URL:画像のURL
  • Dimensionns:画像サイズ・画像の寸法
  • Display:ディスプレイ上の画像サイズ
  • File Size:画像のファイルサイズ

終了する場合は、Closeをクリックして、情報パネルを閉じてください。

以上で、Image Size Info の基本的な使い方の3ステップ解説は、おわりです。

コメント

画像の上で右クリックしたメニューから使用するってところが、ほかの拡張機能とちがうので勘違いしやすいのでご注意ください。ほかはむずかしいこともないので、どなたでも使える画像の最適サイズ調査ツールですよ

Image Size Info の設定について

Image Size Info の設定について、日本語で解説させていただきます。

Image Size Info アイコンを右クリックして、オプションをクリックするすることで、設定画面をだすことができますよ。

それでは、各項目についてどうぞ↓

General

設定できる項目
  • Info Box Width:情報パネルのサイズを、400px・500px・600pxから選べる
  • Remove "Open in new tab" button:画像URLのリンクを別タブで開くボタンを、非表示にする
  • Remove "Date" field:画像の日付を非表示にする

情報パネルは、600px が見やすいですね。基本的には、デフォルト値で問題ありません。

Dimensions display format

設定できる項目
  • {W}px × {H}px
  • {W} x {H} pixels
  • * Custom:

画像サイズの単位について、カスタムできます。デフォルト値で問題ないでしょう。

設定がおわったら、保存を忘れずに!!

保存ボタンの違い
  • Save:設定を保存 + 設定画面は閉じる
  • Apply:設定を保存 + 設定画面は開いたまま
  • Close:設定を保存せず + 設定画面は閉じる

Image Size Info の設定がおわったら、保存をすることを忘れずに!!

Image Size Info の便利な使い方

Image Size Info って、どんな場面で役立つの?
画像サイズがわかると、便利な場面をご紹介しましょう!

Image Size Info の便利な使い方を、ご提案させていただきます。

参考にしてみてね!

ブログ画像の最適サイズを調べる

ブログ画像の最適サイズを調べるのに、とても便利です。

ブログ画像って、年々大きなサイズが必要になっている印象です。スマホディスプレイの性能がよくなっているので、高解像度に対応する必要がでてきました。

かといって大きければいいというわけでもなく、ちょうどいいサイズを常に追いかけていく必要があります。

そんなときに、大手のサイトやブログ界の先頭をゆく運営状況から、画像サイズを調べることで、今後の動向を理解することができます。

たとえば、以下3つの大きなメディアの画像サイズを、調べてみました↓


【画像サイズ】1310px x 1126px【ファイルサイズ】313.48 KB
【参考】累計利用者数2千人、利用回数4千回突破……本日The Saunaは1周年を迎えることができました!本当にありがとうございます! | 東京のWeb制作会社LIG

【画像サイズ】1600px x 1067px【ファイルサイズ】419.30 KB
【参考】【レビュー】HyperJuice 100W GaN Charger:名刺サイズの100W出力USB急速充電器 | ゴリミー

【画像サイズ】1420px x 798px【ファイルサイズ】42.35 KB
【参考】2019年ブロギングライフ運営ハイライトと2020年取り組み計画 - ブロギングライフ


こうしてみると、いろいろなサイズがあっておもしろいですよね。こんな感じで、平均をとっていけば最適解に近づけますよね。

当メディアの場合は、【画像サイズ】1600px x 1067px【ファイルサイズ】120 KB程度 を目安にしています。

画像の種類によって、ファイルサイズはまちまちになりますが、基本となる数字があると安心できますよね。

Image Size Info は、気になったときに調べられるので、便利ですよね。

削除予定の記事画像のURLを調べられる

削除予定の記事画像 URL を、調べるときに便利です。

残念ながらあまりよまれない記事を、削除することがあると思います。

記事をただ削除しただけでは、サーバーなどに画像が残ったままになり、あとから削除する作業が大変になることがあります。

名前をしっかり分類していれば、さくっと調べて削除することもできるんですけどね。

ブログ運営はじめのころって、写真や画像をリネイムせずにそのままアップしていることもあって...

削除しようにも検索できなくて、困ることあるんですよ。

そんなときに、Image Size Info は役に立ちますよ。

たとえば WordPress の場合、記事を削除する前に画像の URL をチェックしてリスト化しておきましょう。

URL に含まれる画像の名前を、メディアライブラリで検索すれば、サクッと画像を削除することができます。

使っていない画像は、サーバーを逼迫する原因になるので、その都度 Image Size Info をつかって削除することをオススメしたいですね。

まとめ

まとめの画像

「Image Size Info」について、使い方を解説させていただきました。

ブログ画像の最適サイズを、サクッと Chrome ブラウザで調べられるので、かなりおすすめです。動作も軽くて、助かっております。

わたしほしい!ってかたは、ステップ1からどうぞお試しください↓

【挑戦する】【ステップ1】Image Size Info をインストール

そのほか、便利な Chrome 拡張機能について、こちらの記事をどうぞ↓

【関連】【2020年】Google Chrome 拡張機能まとめ

関連する記事

この記事のURLとタイトルをコピーする
記事へのお問い合わせ