WordPressの画像サイズの目安とメディア設定の落とし穴!

WordPressでブログの記事を書く際にアップロードする画像のサイズって、どれくらいの大きさがいいのか迷いません?

自分で撮影した画像をそのまま使ったらサイズが大きすぎて、どんどんサイトが重くなったり。

ダウンロードする画像だって、サイトによって色んな大きさがありますよね。

アイキャッチの画像、記事内容の説明(レビューとか)に使う画像、いったいどれくらいのサイズにすればいいの…?

更に、知らないうちに画像データがどんどん増えてる?!

最初にやっておきたいWordPressのメディア設定について、きじとらさんに解説してもらいましょー。

ワードプレスで作ったブログの画像サイズの目安は?

きじとら
ブログにアップする画像サイズに、これといった答えは出せないんだけど。

なぜなら、使用しているテーマや設定によって記事幅は違うし、見る人のデバイスによっても違うし、写真の画質によってデータ量も違ってくるからです。

はち
そんなの知ってるよ。でも目安くらいあるだろ?そこを聞いてるんじゃん。

目安としていえるのは、記事中に使用する画像なら、ブログの記事サイズに合わせたらいいよってこと。

ブルー
そりゃそうだろ。

ちゃとら
で、ブログの記事サイズって、どうやって調べたらいいの?

chrome拡張ツール「Page Ruler Redux」を使ってブログの記事幅を調べる方法

PCの画面上の長さ、今回でいうとブログの記事幅を調べるには、

といった方法があるけれど、今はchromeを使用しているので、拡張ツール「Page Ruler Redux」を導入しています。

chrome ウェブストアより上記ツールを導入すると、画面右上にアイコンが固定表示されるんだけど、

アイコンをクリックすると、ツールが立ち上がり、画面上のサイズを確認することができるようになります。

この状態で、測りたい部分の始点から終点までをクリック&ドロップすると、その範囲の幅や高さを表示してくれます。

更に便利なのは、ツールの一番左端にある<>マークをクリックすると、マウスオーバーした部分のサイズを自動計測してくれること。

<>マークをクリックしたあと、測りたい部分にマウスを乗せるだけ)

例えば↓の画像では、紫色になっている部分の幅(Width)が885pxってことがわかります。

もう少しマウスを中央に寄せると、今度は記事本文エリアの幅は805pxだというのがわかります。

ということは、このブログの記事中に乗せる画像のサイズは横幅を805px以内にすればいいってこと…

という単純な話ではないことも!

ブルー
記事幅と同じサイズの画像を入れたら圧迫感あるから、横700くらいにしとくとか?

まあそれもあるけど、逆に細かい部分まで見て欲しいような画像だった場合に、元々の画像サイズが小さいと、拡大して大きく見せることができなくなってしまいます。

このブログでも、Diverの設定やカスタマイズ方法を伝えるのに、画像が小さいと「見えないし!」ってなるだろうなって場面はよくでてきます。

例えばこんなの↓

大きな画像をブログの記事幅にあわせて横700pxに縮小した画像をアップロードすると、

「文字が小さすぎて読めない!」

ちゃとら
そこはハ〇キルーペでしょ

(そうだけど)ちゃんと説明したかったら、大きいサイズの画像をアップロードすることで、こんな感じ↓に拡大表示ができるようにしたほうが親切だよね。

(クリックで拡大表示できます)

1番目の画像はアップロード前に画像を700 x 511 ピクセルにリサイズしていて、

2番目の画像は、デフォルトのサイズ(1681 x 1227 ピクセル)をそのままアップロード、更に画像を記事内に追加する際に、添付ファイルの表示設定でリンク先をメディアファイルにしています。

ブルー
つまり?

イメージ画像やレビュー写真とかなら、記事エリアの幅に合わせたサイズで、拡大表示してほしい画像なら大きいままのサイズを使用するなど、ケースバイケースってこと。

きじとら
全部大きいままアップロードすると、今度はサイトが重くなる原因になるからね

ちなみに、他の雑記ブログの一つでは、おでかけ記事やレビュー記事がほとんどだから、画像サイズは横640~800にしてるよ。

スマホユーザーが多いブログだと、画像サイズが大きすぎてもしょうがないし。

だけどこのブログは操作画面のキャプチャが多いから、もうバラバラ。

アイキャッチもpixabayや他のサイトの画像を使ってるから、微妙にバラバラ。

アイキャッチ画像はどのサイズがいいの?

本文中の画像と違って、アイキャッチ画像はSNSへシェアされた時に記事の表紙ともなる部分。

テキストなどを使用している場合は、Twitterカードなどで表示された時に、見切れてしまうともったいないですよね。

Twitterカードの場合(スマホ版では16:9が最適といわれてます)
・Summary Card(小さな正方形)
・Summary Card with Large Image(大きな画像2:1)

Twitterのタイムラインに表示される画像比率は、
・スマホ版は16:9
・PC版は2:1

Facebookの場合
推奨サイズは1200×630( 1.91:1)

noteの場合
見出し画像のサイズは1280×670(1.91:1)

ぶち

Twitter投稿がメインなら、16:9の画像を使うのが無難ってこと…?

ちゃとら
ちなみに16:9の比率で横が640なら、縦は360ね。

自分のアイキャッチ画像が、SNSでどのように表示されるのか、サルワカさんのアイキャッチ画像サイズチェッカーで、チェックしてみるのもおすすめ。

ブログによってはcanvaでアイキャッチ画像を作ることもあるけれど、このブログのアイキャッチ画像のほとんどは、ダウンロード画像をそのままぽい。

なので完全比率無視してます。ごめんなさい。

ブルー
イメージ画像なら見切れても別に構わないって思ってるだろ

ちなみに、当ブログでも使ってるDiverでは、アイキャッチ画像の設定をダッシュボードで簡単に変更できるようになってます。

記事幅より小さい画像でも、背景を表示して幅を合わせることもできるようになってます。

きじとら
画像をアップロードする際には、次のことも注意してみてね

WordPressに画像1枚アップロードすると5つのデータが自動生成?

大きい画像をアップロードすると、サイトが重くなるって話もだけど、他にも気にしてほしいのが、WordPressのメディア設定。

ダッシュボードの中にある設定⇒メディアに進んでもらうと、画像サイズの設定ができるようになっています。

これは、WordPressに画像をアップロードした際に、自動生成される画像サイズの設定画面。

デフォルトで使用していると、例えば先ほどのような(1681 x 1227 ピクセル)サイズの画像をアップロードすると、サムネイル(150×150)サイズ(300×300)大サイズ(1024×1024)の画像が自動的に作られる上、WordPressのver.4.4からはレスポンシブ用のミディアムサイズ(768px)も追加で自動生成されるようになっている模様。

デフォルトも含めると合計5サイズの画像がサーバー上にアップロードされています。

きじとら
元の画像サイズや使用テーマ、プラグインによって違うこともあるよ

不要に大きな画像データを投稿しないことで、サイトの表示速度を上げる役割があるけれど、積もり積もれば、サーバーの容量を圧迫することもなりかねない。

なので、ブログによっては必要ないサイズの自動生成を削除するというのも賢い選択かも。

このブログでは中サイズは不要と判断して、幅・高さの上限を0に変更。

サムネイルのサイズを幅300、高さ200に変更、大サイズの幅を800、高さを0に変更してみました。

きじとら
サムネイルのサイズはグリッド表示される際の幅と高さより少し大きくしているよ。

※使用テーマによってサイズは異なります

ちなみに当ブログでも使っているテーマ「Diver」の場合、アイキャッチ画像のサイズを別に設定できるんだけど、サムネイルの設定がグリッド表示より小さければ、画像がぼやけてしまうので注意が必要。

WordPressブログの画像サイズの目安と設定まとめ

ぶち

なんだか結局頭ごちゃごちゃなんだけどな…

ケースバイケースなので、混乱させて申し訳ないんだけど、このブログのやり方でまとめると…

  • 操作画面のキャプチャが見やすいサイズでリサイズ・アップロードする
  • 小さい画像はフルサイズのまま記事に追加
  • 大きめの画像を記事に追加する際は大サイズ(幅800に設定変更)を使用
  • 拡大表示が必要なものだけフルサイズ&リンク先をメディアファイルに設定する
  • アイキャッチ画像はSNSでの見え方も考慮する

という感じです。

きじとら
今までの過去記事は上記設定されてないよ

記事内の画像サイズを統一して見た目を整えたかったら、メディア設定のサイズを変えて、それより大きい画像をアップロードすればいいかなっと思います。

ちゃとら
面倒なら、最初っからリサイズしちゃうのが一番楽ね。

スマホで撮った写真なら、リサイズアプリを使ってる人も多いんじゃないかな。

バッチリサイズ2

バッチリサイズ2
開発元:Koichi Otera
無料
posted withアプリーチ

自分のやりやすい方法で試してみてくださいねー。

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事