画像サイズまとめと参考リンク

画像サイズの早見表
アイキャッチ画像は

BUMIPUTRAによるPixabayからの画像

ブログで使う画像のサイズをまとめました!

画像を使うかはもちろん自由です。

目安ですので、お好みで変更しましょう。テーマの仕様・お好みで最適サイズは変わります。

いくみ
いくみ

「公式推奨設定」だけは、その通りにしましょう。

公式推奨設定

 [WordPress] ファビコン 512 x 512 pixcel 以上の正方形      
 [WordPress] プロフィール用のアイコン 240 x 240 pixcel の正方形
 [Cocoon] 吹き出し 160 x 160 pixcel 以上の正方形

注:「ファビコン」の画像形式は、.pngがおススメです。.jpegを設定したとき、私は非表示になってしまいました。

備考:「プロフィール用のアイコン」は「アバター」というらしいです。

お好み目安情報

アイキャッチ最近では、1.78:1比率が人気だと思います。(例:1280 x 720 pxなど。)
Facebookでシェアされたときの表示を考慮したい場合、1200 x 630 pixcelくらい(サイズよりも「比率」が大切だそうです。推奨比率:1.91:1)
ホームイメージ 同上。
ヘッダーデバイスによって解像度が異なるため、何を重視するかでサイズは異なります。
個人的には、横幅は1400pxくらいはあるほうがいいなという結論になりました。縦の高さは、実際の高さに2割増し以上、余裕を持たせるのがおススメです。
ヘッダーサイズの測り方など、以下の記事でまとめています。

詳しくはこちら:[Cocoon] ヘッダー画像サイズと選ぶポイント
ブログタイトル (ロゴ画像)
センターメニューの場合は、余程極端なサイズでなければうまくいくと思います。

以下のヘッダーサンプルのセクションにロゴ画像のサイズも記録していますので参考になるかと思います。
ヘッダーサンプル・選び方

ご参考まで、当ブログで「センターロゴメニュー」使用していた時のロゴ画像は396 x 70 pixcel、213 x 91pixcelなどでした。フォントサイズ40でロゴ画像を作成、余白は少な目。

「トップメニュー」の場合は、358 x 60 pxを使用していました。
トップメニューはデザインによって縦横比が気になるときがありましたので、以下に詳しくまとめています。
[Cocoon] ロゴ画像サイズ ~ トップメニュータイプの場合

私の場合ですが、アイキャッチは、横幅1000px以上で何となく横長ならいいいや、という感じです。なのでそろっていません。使いたい写真や素材の比率そのままにすることが多いです。自分でサイズ指定するときは、これからは1.78:1にしようかなと思っています。

目安の提示が不可能

サイト背景 デザインの選択によってあまりにも異なるので目安無し。
 当ブログはサイト背景画像なし。色々なオプションのテスト結果はこちら
いくみ
いくみ

雰囲気がでますし、視覚情報があるほうが記憶に残りますよね。

画像の準備、おススメです。

1.準備する画像は、.pngか.jpegがおススメです。便利な画像圧縮サイトが、その2種類をサポートしているからです。写真は.jpeg、イラスト系とスクリーンショットは.pngが良いと思います。以下の記事で、容量や比較の見た目をしています。

2.ファイル名は英数字(直接入力)をおススメします。日本語やダブルバイト文字を使用すると、自動でファイル名が変換されて、ちょっと分かりづらくなります。

サイズについての詳細リンク情報

「目安」だけではなく、詳細も知りたいかたは、ぜひ以下のリンクを参考にされてください。

いくみ
いくみ

このサイズじゃないとダメ」という意味ではないですよ!

自分がどうしたいかで決めます。

アイキャッチ画像について

1.78:1比率(例:1280 x 720 px)は、Canvaのテンプレートが豊富なのでおススメです。以下の記事の目次2-2番 ブログのアイキャッチ画像にまとめました。

Cocoonのフォーラムの以下のスレッドにも、とても参考になる情報がありますよ!

アイキャッチ画像のサイズについて

みなさま、大きめを推奨されています。

少なくとも横幅が1280px以上、出来れば1920px以上でも良いかもしれません。

今後、機器の性能は上がっていくので、これぐらいのサイズが設定してあっても全く問題ないと思います。

わいひらさんのコメント フォーラムより アイキャッチ画像のサイズについて

僕の場合は、パソコンで表示させる横の2倍にしています。縮小率が50%だと文字が綺麗に表示できます。

パソコンで横800pxで表示させる画像は、1600pxで作っています。(横1600px縦1200)

また、AMPにするとGoogle Discoverが狙えるので、やはり1200px以上のサイズがオススメです。(といっても、1200px以下でもDiscoverされることがあるそうですが)

たなかまさんのコメント フォーラムより アイキャッチ画像のサイズについて

1200×630 pixcelのFacebook対応の比率は、以下のサイトですすめられていました。この記事を書くにあたって確認していたら出会えた記事です。

ブログのアイキャッチの最適サイズは?〜1200×630がおすすめな理由〜 – アカネtech
アイキャッチ画像のサイズに迷ったら読んでみてください
いくみ
いくみ

ありがとうございました。

ホームイメージについて

ホームイメージは、ツイッターやFacebookで「ブログのトップページ」がシェアされたときに表示される画像です。

(「記事のURL」がシェアされた場合は、記事に設定しているアイキャッチ画像が使われます。)

Cocoonの初期設定では、Cocoonテーマの画像になっています。

いくみ
いくみ

「ホームイメージ」という存在を知りませんでした。

以下のサイトで勉強させていただきました。

【ブログカード】Cocoonを使い始めたら、ホームイメージを忘れずに設定しよう
WordPressテーマ「Cocoon」は、エディタ画面(投稿画面)で記事のURLを入力すると、その記事のブログカードが表示されます。たとえば、こんな感じでURLを入力するとこのようにURLの部分がブログカードになって表示されます。そして、

ヘッダーについて

当ブログでテストをして、サイズについて記事にしています。

ヘッダーサイズなどを測るのに便利なツールの紹介もしています。

サイト背景について

デザインのオプションによってあまりにも変わるので、推奨も目安も書けないんですよね。

例えば、小さい画像でパターン柄にしたり、大きい1枚をドーンと設定することもできます。

もし背景を画像にすることをお考えでしたら、以下の記事をご参考に!

サイズとは直接かかわりませんが、設定方法などがまとまっている記事です。

ファビコンとプロフィールアイコンについて

当ブログで設定方法をまとめました。

ちなみにファビコン作りにものすごくおススメのサイトがあります。

『icooon mono』のおススメポイント
  • 無料。
  • 登録不要。
  • 商用利用可。
  • 種類が豊富!
  • ダウンロードする前に、自分で色を指定できます!最高に便利・・・!
  • 画像の種類でPNGを選べば、透過にできます!手間いらず!
  • ファビコン推奨サイズ512pxが選択肢にあるので、クリックすればサイズOK!

ロゴ画像について

ロゴ画像は、フォントや余白設定、テーマの仕様も関わるので、サイズはテストをしつつ見極めるのが良いと思います。

「ロゴ画像の作り方」は記事にしていますのでよろしかったら!

サイズについてはこちらに。

画像の自動生成と圧縮について

以下の記事の2番と3番です。

画像圧縮プラグインについて

しばらくしたら、(でも割と初期の内に)画像圧縮プラグインをいれることをおススメします。

私はパンダくんがマスコットの「Compress JPEG & PNG images」というプラグインを利用しています。登録・設定・使用方法をこちらにまとめました。

いくみ
いくみ

画像、いろんな種類がありますねぇ。

コメント

タイトルとURLをコピーしました