WordPressでブログの記事を書く際にアップロードする画像のサイズって、どれくらいの大きさがいいのか迷いません？
自分で撮影した画像をそのまま使ったらサイズが大きすぎて、どんどんサイトが重くなったり。
ダウンロードする画像だって、サイトによって色んな大きさがありますよね。
アイキャッチの画像、記事内容の説明（レビューとか）に使う画像、いったいどれくらいのサイズにすればいいの…？
更に、知らないうちに画像データがどんどん増えてる？！
最初にやっておきたいWordPressのメディア設定について、きじとらさんに解説してもらいましょー。
Contents
ワードプレスで作ったブログの画像サイズの目安は？
なぜなら、使用しているテーマや設定によって記事幅は違うし、見る人のデバイスによっても違うし、写真の画質によってデータ量も違ってくるからです。
目安としていえるのは、記事中に使用する画像なら、ブログの記事サイズに合わせたらいいよってこと。
chrome拡張ツール「Page Ruler Redux」を使ってブログの記事幅を調べる方法
PCの画面上の長さ、今回でいうとブログの記事幅を調べるには、
- テーマのスタイルをチェックする
- フリーソフト「ピクセル定規fa-external-link」
- chrome拡張ツール「Page Ruler Reduxfa-external-link」
といった方法があるけれど、今はchromeを使用しているので、拡張ツール「Page Ruler Redux」を導入しています。
chrome ウェブストアより上記ツールを導入すると、画面右上にアイコンが固定表示されるんだけど、
アイコンをクリックすると、ツールが立ち上がり、画面上のサイズを確認することができるようになります。
この状態で、測りたい部分の始点から終点までをクリック&ドロップすると、その範囲の幅や高さを表示してくれます。
更に便利なのは、ツールの一番左端にある＜＞マークをクリックすると、マウスオーバーした部分のサイズを自動計測してくれること。
（＜＞マークをクリックしたあと、測りたい部分にマウスを乗せるだけ）
例えば↓の画像では、紫色になっている部分の幅（Width）が885pxってことがわかります。
もう少しマウスを中央に寄せると、今度は記事本文エリアの幅は805pxだというのがわかります。
ということは、このブログの記事中に乗せる画像のサイズは横幅を805px以内にすればいいってこと…
という単純な話ではないことも！
まあそれもあるけど、逆に細かい部分まで見て欲しいような画像だった場合に、元々の画像サイズが小さいと、拡大して大きく見せることができなくなってしまいます。
このブログでも、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の画像を使うのが無難ってこと…？
自分のアイキャッチ画像が、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での見え方も考慮する
という感じです。
記事内の画像サイズを統一して見た目を整えたかったら、メディア設定のサイズを変えて、それより大きい画像をアップロードすればいいかなっと思います。
スマホで撮った写真なら、リサイズアプリを使ってる人も多いんじゃないかな。
自分のやりやすい方法で試してみてくださいねー。
