ブログ運営を応援するブログ「ぶろやる」

ブログに使う適切な画像サイズを調べる超簡単な方法(ツール)

この記事のまとめ
  • ブログに使う適切なサイズを調べる方法
  • 有名WordPressテーマのサイズ

 

今回はブログに貼る画像の適切なサイズの調べ方を紹介していきます。

適切なサイズの画像を使用しないとブログの読み込み速度は遅くなり、検索ランキングに悪い影響が出てしまいます。

サクッと調べてこれから書く記事は最適化した画像を使用し、Googleに気に入ってもらいましょう!

有名WordPressテーマの適切サイズ

まずは手っ取り早く有名どころのWordPressテーマのサイズが知りたい方はこちらを確認してください。

各テーマのデモサイトで計測したサイズ(基本サイズ)をまとめました。カスタマイズしている場合は異なる場合もありますので正確なサイズが知りたい場合は以降の記事を読んでください。

テーマ名 アイキャッチ画像 記事中画像
JIN 700px×394px 横幅:700px
STORK19 728px×389px 横幅:728px
THE THOR 700px×394px 横幅:700px
AFFINGER5 640px×448px 横幅:640px

あくまでデモサイトの画像を計測した寸法になっていますのでカスタマイズで枠を入れたりmargin・paddingをいじっている場合は異なりますので実際に自分のブログで計測してください。

なお
ちなみに私が使っているTHE THORも、私のブログ上ではアイキャッチ画像が758px×426pxとなっているので全然違いますよ

適切な画像サイズを調べるツール

上で有名どころのWordPressテーマの画像サイズは紹介しましたが、カスタマイズして枠を広げたり狭めたりしているとデモサイトのサイズとは異なるので正確なサイズは自分で調べるのが一番です。

どうやって調べたらいいのと悩んでいる方はこれから紹介する2つのツールを使えば一瞬で適切な画像サイズを調べることが可能になります。

  • Page Ruler Redux
  • View Image Info

それぞれの使い方を詳しく紹介していきますね。

Page Ruler Reduxの導入&使い方

まず紹介するのはGoogle Chromeの拡張機能の一つである「Page Ruler Redux」からいきます。

下のリンクボタンからChromeに追加してみましょう。URLの検索窓の右側にアイコンが追加されます。

Page Ruler Redux

pagerulerreduxの導入

一度、拡張機能を追加するとネット上のサイズを知りたいときは、アイコンをクリックすると下のようなことができるようになります。

pagerulerreduxの使い方

このように範囲を指定した箇所の「横幅」と「高さ」をpx(ピクセル)単位で調べることが可能。

正確なサイズを測りたい場合は左上の【<>】クリックするとエレメントモードになり、カーソルを合わせることで構成要素ごとの正確な寸法を調べることができます。☟拡大できるよ!

pagerulerreduxの使い方2

pagerulerreduxの使い方3

なお
このツールを使えばすべての構成要素の寸法を正確に計測することができるので、導入後はしばらく遊んでしまうので注意してね

View Image Infoの導入&使い方

次に紹介するのもGoogleの拡張機能の1つ「View Image Info(properties) 」です。このツールもWEB上の画像の情報を調べることができる超便利なツール。

早速下のリンクボタンよりChromeに追加してみましょう。

View Image Info

Chromeに追加後、画像の上で右クリックすると「View Imge Info(properties)」メニューが表示されるようになります。

view image info 使い方

View Image Info(properties)をクリックすると下の表のような画像情報が表示されます。

viewimageinfo使い方2

各項目の内容は下のとおりです。

Location 画像のURL
Dimensions アップロードしたオリジナル画像のサイズ
Dimensions(scaled to) 実際にWEB上で表示されている画像サイズ
File Type 画像ファイルの拡張子
File Size 画像ファイルのデータサイズ
Alt/Title 画像につけているファイル名

今回調べた画像でわかることは、
アップロードした画像は横幅1200pxですが、実際に表示されいている横幅は694pxです。

つまり幅694pxが適切なサイズであるのに無駄に大きなサイズの画像を貼っていることになります。

綺麗な画像を見せたい場合などはあえて大きいサイズを貼ることもありますが、細部まで見せる必要が無い場合は適切なサイズの画像を貼り読み込み速度を速めるようにすべきです。

手っ取り早くサイズ調整する方法

記事中に貼る画像は高さはあまり気にしなくてもよいですが、アイキャッチ画像はサイズを揃えないとデザインがガタガタになってしまいます。

アイキャッチ画像は上で紹介した「Page Ruler Redux」「View Image Info」で適切な寸法を計測し、Canvaでサイズ調整するのがとても簡単です。

canva

超絶簡単なサイズ変更でCanvaの使い方を詳しく解説しているので参考にしてみてください。


キャプチャー画像のサイズ調整

キャプチャー画像は元々パソコンに備え付けられているPrint Screenでもスクリーンショットを撮ることができますが、1つのソフトでサイズ調整や文字入れ、動画作成もできる「スクリーンプレッサー」がおすすめです。

下のリンクボタンの公式サイトでインストールしましょう。こちらのツールも無料で使えます。

Screen Presso

インストール後キーボードの「Windowsマーク」と「Print Screen」を同時に押したり、画面上部のスクリーンショットボタンをクリックするとキャプチャーできます。

簡単にサイズ変更したり文字を入れたりと、ScreenPressoのツール上でキャプチャー後すぐに様々な加工ができるので使い勝手が良すぎます。☟拡大できるよ!

screenpresso使い方
screenpresso使い方2

 

なお
キャプチャーの加工は「ScreenPresso」を一度使ってしまうと、他のソフトは使う気が起こらなくなるくらい完璧なツールです!

サイズ調整の後は圧縮も忘れずに

適切な画像サイズの調べ方と加工方法がわかりましたが、ブログに画像を貼る前には必ず圧縮する癖を付けましょう。

圧縮のひと手間が読み込み速度を速めることになり、最終的にはGoogleの評価にも繋がります。毎回、圧縮するのは慣れるまでは大変ですが習慣化するようにしましょう!

圧縮については、ブログ画像の超絶簡単な軽量化法にまとめていますので参考にしてみてください。

適切な画像サイズを調べる方法:まとめ

適切な画像サイズを調べる方法(ツール)を紹介してきました。

もう一度おすすめのツールを紹介しておきます。どちか一つChromeに追加しているだけで調べられますので、まだ利用していない方はインストールしてしましょう!

  • Page Ruler Redux
  • View Image Info

手間はかかりますが毎回画像サイズの調整と圧縮を行いGoogleから最高の評価をもらいましょう!

ブログに使う画像の適正サイズの調べ方
最新情報をチェックしよう!