- WordPressで使う画像サイズの正解は?
- WordPressで使う画像の注意点はある?
- WordPressのおすすめのメディア設定は?
このような疑問を解決できる記事を書きました!!
わたしがサポートする生徒さんから「WordPressに最適な画像サイズを知りたい」というご質問をいただきました。
WordPressでブログを作る初心者さんは、いろんなところに画像を挿入する際に「適正サイズってあるのかな?」と気になりながら画像を入れ込みしているようです。
この記事では、WordPressの最適な画像サイズの目安とおすすめのメディア設定・最適化についてワードプレス初心者さん向けにまとめていきます!
ちなみに、この記事では、WordPressの画像の大きさの方のサイズに関してがメインになります。容量に関しては、後半で少し解説しております。
画像容量については、こちらの記事「画像圧縮パンダ「TinyPNG」の使い方!WordPressブログで使う画像は画像圧縮が必要!」で詳しく解説しております。
目次は読みたいところをタップして飛べるよ♪
WordPressの記事内で使う画像サイズの目安は?
では、いきなりWordPressに使う画像サイズの答えをお伝えすると、お使いのWordPressテーマによって推奨サイズが違うということです。
ですので、WordPressテーマの公式サイトで確認してほしいです。
ちなみに、最近は、アイキャッチ画像に縦長画像を使いたいとおっしゃる方も多いです。縦長画像を使いたい場合、テーマが縦長画像に対応していないのでしたらやめた方がいいので気をつけておいて下さい。
わたしが使用している「STORK19」は縦長画像にも対応しているテーマになります。
> STORK19公式サイト「アイキャッチ画像(縦)」
とは言え、これでは、せっかく読みにきていただいているのに、画像サイズの答えになっていない?!ということで、しっかり画像サイズを解説します!
投稿記事の中に入れる画像サイズ目安
基本的に、記事内に挿入する画像サイズの一番大きい画像だったら横幅1200pxが良いです。
理由は、Googleが推奨するサイズになるからです。
魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。サイトのロゴを画像として使用しないでください。
引用:Google検索セントラル
縦サイズは、画像比率『1.91:1』がおすすめなので、630pxが良いです。
ですので、1200px×630pxの画像を使うようにして下さい。
このサイズにしておけば、TwitterでURLを呟いたときに、大きい画像のアイキャッチ表示に設定している場合は、どこも切れることなく綺麗にアイキャッチが表示されます。
こんな感じです↓
ちなみに、上記のようにTwitterにアイキャッチ画像を入れるのを「Twitterカード」と呼びます。これは設定が必要になるので以下の記事でやり方を解説しています。
上記サイズを推奨はしますが、最初にもお伝えしたように、テーマによって適正サイズは若干変わるのでそこはご理解ください。
画像を使う際の画像比率について
わたし的には、画像サイズよりも、「画像比率」の方が気になります。
画像比率は、画像の縦横比です。
上図にあるように、画像比率でブログが綺麗に見えるか見えないかが大きく変わりますので、お気をつけください。
記事内に挿入する画像は、この画像比率を揃えた画像を使うとまとまりのある記事になります。
ちなみに、このゆかブログで使っている画像の「画像比率」は『16:9』です。
あとは、お好みによってスクエア画像を使いたいという方もいらっしゃいます。スクエア画像ももちろん使えないことはないですので、使ってOKです。
ただし、先ほどもお伝えしたように、スクエアを使うと決めたら、スクエアに統一した方が綺麗なので、そこは注意してくださいね。
WordPressは3種類に自動でリサイズする
大きい画像の適切のサイズをお伝えしたのですが、「小さい画像を使いたいときは?」と思うかもしれません。
実は、WordPressは、元々の機能で、1つのメディアをアップすると、3種類の画像が作られるようになっています。
これは、WordPressのダッシュボードから左メニューを見た時に、下にある「設定」の中に「メディア」という項目があります。
メディアをクリックすると設定が開くので、ここに「サムネイル」「中サイズ」「大サイズ」という3種類の画像サイズの設定ができるようになっています。
ここに画像サイズを入力して設定しているのであれば、自動生成で画像が3種類できるようになっています。
もし、WordPressの負荷を考えて、メディアの自動生成をしたくない場合は、ここの数字を全て「0」にしておけば自動生成されなくなります。
このメディア設定に設定した画像というのは、記事を投稿する際に画像ブロックを挿入したら、右側にあるブロックの設定から「画像サイズ」を切り替えて簡単にサイズ変更ができる機能です。
ですので、メディア設定に、ちゃんとリサイズ画像サイズを設定しておくことをお勧めします。
リサイズされたくない場合は、「0」設定ですね。
WordPressおすすめの「メディア設定」とは?
では、ここでは、「WordPressのメディア設定のおすすめはどれくらいがいいのか?」ということをまとめていきます。
いきなり、結論をお伝えします。
わたし個人的なおすすめになるので、これが正しいわけじゃないですが、わたしは以下のようなサイズにしています。
- サムネイルのサイズ:300×0
- 中サイズ:500×0
- 大サイズ:800×0
メディアの大サイズを決めるときですが、ご自身のサイトの記事の横幅で決めると良いです。
WordPressテーマごとのデフォルト横幅はこちら。(わたしが使用したことあるテーマのみ)
- STORK19:728px
- Cocoon:800px
- SWELL:880px
- AFFINGER:640px
このように、WordPressテーマによって横幅は違うので、テーマに合わせて大サイズは、セットしておけばOKです。
中とかサムネイルの画像サイズについては、使いやすいサイズでセットしておけばOKですが、迷う方は、わたしと同じ設定で良いです。
ちなみに、サムネイルサイズは、ほとんど使用する場面がないので、いらなかったら「0」にしておけば、サムネイルサイズの生成はされません。
WordPressの画像を使うときに注意したいこと
画像の適正サイズやメディア設定は分かっていただけたと思います。
WordPressの記事内に画像をセットするときですが、2つ注意しておきたいことがあるのでお伝えします。
- 画像の容量
- フルサイズ画像
この2つの注意点を守って画像の最適化をしていきましょう!!
画像の容量
WordPressを運用していると、段々WordPressの中にいろいろなデータやファイルが蓄積されていきます。
ですので、運用が長くなればなるほど、WordPressには負荷がかかるんです。
特に、WordPressに大きな負荷をかけるのは、メディアになります。
先ほどもお伝えしたように、WordPressに挿入した画像は、1つの画像に対して、フル画像+3種類の画像が自動生成されるんです。
つまり、画像が増えれば増えるほど、WordPressにはかなりの負荷がかかるということです。
画像の容量に関して、WordPress使用者が気をつけられることと言えば、画像容量を圧縮して最適化することです。
画像容量圧縮の方法としては、プラグインを導入したり、画像圧縮サイトを使用したりすることで対策できます。
わたしが過去にアップした記事で、画像容量を圧縮するサイトやプラグインを紹介したものがあります。よかったら参考にしてください。
(プラグインを導入する際は、お使いのWordPressテーマ公式サイトを確認して、プラグインを使っても大丈夫かどうかを確認して導入するようにしてください。)
フルサイズ画像
あと、画像のフルサイズばかりを使用していると、サイトのスピードが落ちます。
どうしても、画像の解像度からしたら、フル画像が綺麗なので、どれもフル画像を使いたいところです。ですが、フル画像ばかりを記事内に入れると、サイトスピードが落ちます。
フル画像を使うときは、よっぽどじゃないと使わない方が良いです。
これは、Googleも良く指摘するところになります。
サイトスピードに関しては、こちらの「PageSpeed Insights」というサイトを使えば、URLを入力するだけで、サイトスピードを測れます。
サイトスピードを測るサイトで、サイトスピードを上げるための対策が書かれていることがあります。
その際に、「サイトスピードを重視するならフルサイズ画像は使用しない方が良い」と記載されています。
画像を使うときは、フルサイズは控えるように気をつけましょう。
その他のWordPressの画像について
記事内の画像以外にもWordPressで画像を使います。
ですので、ここでは以下の画像の適正サイズをお伝えします。
- ファビコン画像
- ヘッダー画像
- ロゴ画像
あくまでも、わたしが良いと思ったサイズだったり、公式が発表しているサイズだったりになりますので、こちらは参考にしてもらえたらと思います(^O^)/
サイトアイコン(ファビコン)画像の適正サイズは?
サイトアイコン(ファビコン)とは、ブックマークしたときやブラウザのタブに表示されるアイコンのことです。
このサイトアイコン(ファビコン)画像は、設定していない方が多いので、設定されることをおすすめします。
サイトアイコン(ファビコン)の推奨画像サイズは、「512×512px」で、形式は「.png」です。
サイトアイコン画像に関しては、どのテーマも共通だと思うので、この画像サイズと形式でセットしてください。
WordPressテーマごとのヘッダー画像の推奨サイズは?
ヘッダー画像とは、以下のようにサイトのトップに表示される画像になります。
ヘッダー画像の推奨サイズは、WordPressテーマによって異なるので注意が必要です。
では、WordPressテーマごとの推奨サイズをお伝えします。
- STORK19:横2400×縦1400px(デモサイトで使われている画像サイズ)
- Cocoon:横1900px×縦幅はお好みで。
- SWELL:横1600×縦900px(公式サイトで使われている画像サイズ)
- AFFINGER5:横2200px×縦500px
- JIN:横2400px×縦幅はお好みで。
- TCD:横1280px×縦320px(TCD LABO参照)
以上、WordPressテーマごとのヘッダー画像推奨サイズになります。
参考にしてみてください(^^)
ロゴ画像の適正サイズは?
ロゴ画像は、ヘッダーに表示されるサイト名を画像に変更することができます。
サイト名は、ロゴで設置していない方もいらっしゃるので、サイトタイトルを画像にしたい方は参考にして下さい。
ちなみに、わたしのサイトは、文字を画像にしてロゴ画像を設置しています。
ロゴ画像は、「280px×60px」で良いと思います。ただ、これも設置するサイズなどで変わるので、一概に正解とは言えません。
わたしのブログのようにグローバルメニューの左端にロゴを表示するとかなら、このサイズで十分です。
ですが、ヘッダーに大きめにロゴ画像となると「500px×100px」とか「600×135px」とかのサイズが良いのではないでしょうか。
実際に画像を設置してみて調整してみてください。
まとめ:使っているWordPressテーマの画像サイズを確認して適切に入れること!
今回は、WordPressに使う画像の適正サイズについて詳しく解説しました。
おさらいをすると、WordPressの画像サイズは、使っているWordPressテーマで推奨サイズが違うことがあるので、使っているテーマの公式サイトを確認してみるのがおすすめです。
ただ、わたしが色々WordPressテーマを使っているので、いくつかのWordPressテーマに関しては、参考になればと、推奨サイズをまとめて記載しました。
●ワードプレスの記事のアイキャッチ画像とかに関しては、「1200px×630px」
●メディア設定では、3つの画像サイズを指定
- サムネイルのサイズ:300×0
- 中サイズ:500×0
- 大サイズ:800×0
●ファビコン画像は、「512×512px」で、形式は「.png」
●ヘッダー画像は、使っているWordPressテーマ推奨サイズを確認
- STORK19:横2400×縦1400px(デモサイトで使われている画像サイズ)
- Cocoon:横1900px×縦幅はお好みで。
- SWELL:横1600×縦900px(公式サイトで使われている画像サイズ)
- AFFINGER5:横2200px×縦500px
- JIN:横2400px×縦幅はお好みで。
- TCD:横1280px×縦320px(TCD LABO参照)
●ロゴ画像は、「280px×60px」
以上、参考にしてくださいね!!
記事内でご紹介したワードプレスの画像容量の圧縮に関しては、こちらの記事もチェックしておいてください^^