ブログに適した画像サイズを調べる方法

ブログを書いている人なら必ずお世話になっているであろう画像。

そんな画像ですが、むやみやたらにサイズなども意識せずにポンポンと貼り付けてはいませんか?

そのような画像を貼り続けていると、容量を圧迫するだけでなく、表示速度まで低下させてしまいます。

結果的にユーザビリティにも影響してくるかもしれません。

そこで今回は、コンテンツに見合った画像を探すときに便利なGoogleChromeの拡張機能である「View Image Info」を紹介したいと思います。

この拡張機能を使えば、自分のブログに画像を貼り付ける際に、どれくらいのサイズを用意すればいいのか分かるようになりますよ!

「View Image Info」って?

web上にある画像の詳細情報を調べることができるツールです。

ですから、他のブログに貼られている画像の情報も知ることが可能です。

初心者ブロガーの方なら、参考にしているブログの画像の情報を知ることで自分のブログにインプットすることが出来ますね。

「View Image Info」をインストールする

GoogleChromeの拡張機能になりますので、Chromeウェブストアからインストールすることになります。

「View Image Info」のインストール

View Image Infoをインストールする

ウェブストアを開いたら右上の「Chromeに追加」をクリックします。

View Image InfoをChromeに追加した画面

Chromeに追加されたらこのような画面になります。

「View Image Info」を使う

導入できたら早速使ってみましょう。

気になる画像を用意しておいてください。僕は、例として自分のブログに投稿してある画像をチェックしてみます。

View Image Infoの使い方1

目的の画像を表示させたら、画像の上で右クリックします。

すると「View Image Info(properties)」という項目が追加されていると思います。こちらをクリックしてみましょう。

View Image Infoの使い方2

上の赤枠内に注目してください。下にある赤枠は元々の画像の中で囲っているものなので無視してください。ややこしくてすいません。

上の方に画像の情報が表示されたと思います。

Location:投稿されている画像のURL

Dimenision:画像のサイズ(ピクセル)

File Type:画像の形式(pngなのかjpgなのか等)

File Size:画像のサイズ

Alt/Tiltle:画像のタイトル(wordpressでは代替テキストに入力したコメントの部分)

僕の画像からは、PNG形式で幅が540px、高さが927px、画像サイズが62.28KBということが分かります。まぁ可もなく不可もなくといった感じでしょうか。

ちなみに、Demensionsの()内に表示されている画像サイズですが、これは実際に表示されている画像のサイズになります。

つまり、アップロードした画像は540×927pxですが、実際に表示されているサイズは369×633pxということになります。

自分のブログに適した画像のサイズとは

ここからは少し応用になります。

View Image Infoの使い方3

先ほどと別の画像を用意しました。

記事内容部分の最大幅として画像を投稿していますが、「View Image Info」で画像の情報を確認してみると・・・

View Image Infoの使い方4

実際の画像は680×378pxになっています。

つまり、僕の使っているSimplicity2で画像を投稿しようと思うなら幅については最大でも680pxで十分ということになります。

これは、使っているブログのテーマによって画像の適したサイズが違うと思うのでテーマごとに「View Image Info」を利用して適したサイズを調べる必要がありますね。

最後に

お気づきの方も多いと思いますが、最大値と同じ画像を投稿する場合、クリックした際に拡大されることがないんですよね~。

しかし、適した画像にしないとページの表示速度にも影響を与えますし・・・

どちらを優先するのかが難しいところだとは思います。

特に拡大する必要がないような画像の場合は、リサイズして適した画像サイズにするべきでしょうね。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク