『LION MEDIA』と『LION BLOG』をいろいろな角度から探っている こはるです。
今回のテーマは、画像サイズ！
『LION MEDIA』と『LION BLOG』で使われている画像サイズについて調べてみました。
『LION BLOG』にはどんなカスタマイズ項目があるのって方はこちらから。
『LION MEDIA』ってなぁに？ どんな機能があるのって方はこちらをご覧ください。
画像の自動生成のおはなし
まず、WordPressの機能のおはなし。
WordPressでは、画像をアップロードするたびに、他のサイズの画像が自動生成されるんだよってことを知っていますか？
知らないうちに
画像が自動生成されてサーバーの容量を圧迫している・・・・
なんてことにならないためにも
テーマで使われている画像サイズを知っておくと
無駄に大きい画像をアップロードする必要がなくなります。
『LION MEDIA』と『LION BLOG』ではどうなの？
WordPressのテーマを、『LION MEDIA』または『LION BLOG』に設定していると、メディア設定の画面上に『LION MEDIA』または『LION BLOG』の推薦サイズが青い文字で表示されます。
『LION MEDIA』のメディア設定画面
どちらのテーマを使っていても推薦サイズは以下のとおりで同じです。
サムネイルのサイズ：幅160px × 高さ160px
中サイズ：幅の上限300px × 高さの上限300px
しかし、これ以外にも自動生成されている画像サイズがあるのです！
・・・それは、
icatch size
『LION MEDIA』：幅の上限730px × 高さの上限410px
『LION BLOG』：幅の上限890px × 高さの上限500px
medium_large size
『LION MEDIA』、『LION BLOG』共通
幅の上限768px × 高さの上限 なし
この２つの画像サイズが追加で自動生成されているのです。知っていましたか？
ということは・・・１つの画像をアップロードすると、
サムネイルサイズ
中サイズ
大サイズ（設定している場合）
icatch size
medium_large size
の５サイズが自動生成されるのです。ビックリですよね。
サーバー上に保管されている画像は、１つの画像につき、オリジナルも含めると６枚ということになります。
自動生成されない条件とは
アップロードした画像サイズが
設定されているサイズの上限に満たない場合は自動生成されません。
以下の条件で解説しますね。
使用するテーマ：『LION MEDIA』
メディア設定（幅×高さ）
・サムネイルのサイズ：160×160 px
・中サイズ：300×300 px
・大サイズ：600 ×600 px
テーマ設定（幅×高さ）
・icatch ：730×410px
・medium_large：768×設定なし
この条件で、画像サイズ：800 × 533 px をアップロードすると５サイズの画像が作成されます。
サムネイル 160×160
中サイズ 300×200
大サイズ 600×400
アイキャッチ 730×410
ミディアムラージ 768×512
（画像サイズ表示は、幅×高さです）
では、同じ条件でアップロードする画像サイズを600×400pxに変えてみると、３サイズの画像しか作成されません。
サムネイル 160×160
中サイズ 300×200
大サイズ 600×400
icatchサイズ、medium_largeサイズは、作成できるサイズに達していないため自動生成されないのです。
ここで１つ疑問が
「アップロードする画像のサイズ」と「設定している大サイズ」が同じなんだけど、わざわざ自動生成されちゃうの？
設定されている画像サイズとアップロードする画像サイズが同じ場合、自動生成の条件にあてはまるので勝手に画像が作られてしまいます。オリジナルサイズと同じやからいらんのに・・・って思って残念ながら、どうすることもできません 😥 。
じゃぁ、同じ条件でアップロードする画像の高さを少し変化させてみました。
画像サイズ：600×410pxをアップロードした場合、４サイズの画像が作成されます。
サムネイル 160×160
中サイズ 300×200
大サイズ 600×400
アイキャッチ 600×410
アイキャッチサイズの条件は730×410です。高さの上限サイズにあてはまるためアイキャッチサイズが作成されたのです。
まとめると、
「幅」または「高さ」の上限にあてはまれば自動生成されるということです。
これらのことを頭に入れておいて、『LION MEDIA』、『LION BLOG』で使われている画像サイズを見てみましょう。
WordPressの管理画面
投稿一覧のサムネイル
サムネイルサイズ：160×160pxが使われています。
投稿編集のアイキャッチ画像
オリジナルの画像サイズが使用されています。
外観＞カスタマイズ設定
カスタマイズ設定で画像を設定した時に表示される。
中サイズが使用されています。
LION MEDIA、BLOGで使われている画像サイズ
TOPページ
ピックアップ記事（『LION MEDIA』のみ）
ここに使われている画像サイズは、アイキャッチサイズ 730×410pxです。フレームの大きさは、画面やブラウザーのサイズに合わせて伸縮します。
サイトメイン画像（『LION BLOG』のみ）
メイン画像はカスタマイズで指定されている画像サイズが使用されています。（横1600px×900px）
投稿・アーカイブ記事
『LION MEDIA』
表示されてるフレームのサイズは、ビューレイアウト設定よって異なりますが、実際に使われている画像のサイズは「１カラム」「２カラム」ともにアイキャッチサイズ：730×410pxです。
『LION BLOG』
表示されてる画像のフレームサイズは、記事ビューレイアウト設定よって異なりますが、実際に使われている画像のサイズは、レイアウトが「１カラム」「２カラム」、記事ビューレイアウトが「ワイド」「画像レフト」どれであったとしてもアイキャッチサイズ：890×500pxが使われています。
TOPランキングボックス（『LION MEDIA』のみ）
こちらに使われている画像サイズは、アイキャッチサイズ：730×410pxです。
TOPカテゴリーボックス（『LION MEDIA』のみ）
こちらに使われている画像サイズは、アイキャッチサイズ：730×410pxです。
最近の記事・人気記事（『LION MEDIA』 『LION BLOG』）
最近の記事に使われている画像サイズは、サムネイルサイズ：160×160pxです。
人気記事（Ranking）に使われている画像サイズは、アイキャッチサイズです。『LION MEDIA』は730×410px、『LION BLOG』は890×500pxです。
投稿ページ
タイトル部分
『LION MEDIA』
タイトルの背景、右側の画像、ともにアイキャッチサイズ：730×410pxが使われています。
『LION BLOG』
画像の赤枠は気にしないでくださいね。（他の記事で使った画像を使い回ししています。）
投稿ページのタイトル下に表示される画像は、アイキャッチサイズ：890×500pxが使われています。
関連記事（『LION MEDIA』 『LION BLOG』）
サムネイルサイズ：160×160pxが使われています。
前次記事（『LION BLOG』のみ）
サムネイルサイズ：160×160pxが使われています。
CTAボックス（『LION MEDIA』 『LION BLOG』）
オリジナルの画像サイズが使われています。900px×600pxをアップロードしています。
幅は最大680pxまで、高さは画像サイズが適用されます。今回の場合だと高さは600px。
ただし、横幅には注意が必要。
表示幅のMAXが680pxなので、今回アップロードした画像の場合、幅が900pxでサイズがオーバーしています。高さが固定されているため、900pxから680pxへ無理やり圧縮したような表示になってしまいました。ブラウザーのサイズを変更した場合も同じように圧縮されてしまいます。
オリジナルの画像
強引に圧縮されてる例
横幅の伸縮比率に合わせて高さも変更されれば、こんなことにはならないんですけど、それができないので、CTA画像を設定するときはアップロードする画像サイズも考えなければいけませんね。
固定ページ
ランキングページ（『LION MEDIA』 『LION BLOG』）
サムネイルサイズ：160×160pxが使われています。
ということで、
「サムネイル」「中サイズ」「アイキャッチ」と「オリジナル」しか使われないということですね。「medium_largeサイズ」は作成されるけど、どこに使われているのか全くわかりませんでした。
投稿記事内で画像をつかう場合
投稿ページには余白が設けられています。横幅いっぱいに記事や画像が表示されるというわけではなく、あらかじめ表示される幅が決まっているということです。
どんなに大きな画像をアップロードしても、結局、決められた幅に合わせて表示されてしまうのです。それだったら、はじめから決められた幅を超えない画像をアップロードすれば、データの無駄を無くせるということですね。
上の投稿ページの画像ですが、幅が1438pxあります。クリックするとオリジナルサイズが表示されます。投稿ページ上では、縮小されて表示されているっていうのがわかりますよね。
投稿ページで設定されている幅は？
『LION MEDIA』
２カラム：743px
１カラム：740px 820px 900px 100％（最大1100px）
『LION BLOG』
２カラム：704px
１カラム：740px 820px 900px 100％（最大1038px）
自分が設定しているレイアウトに合わせて、画像のサイズを合わせれば無駄なく使えるということです。
まとめ
『LION MEDIA』『LION BLOG』で、最低限、必要な画像サイズは「サムネイル」「中サイズ」「アイキャッチ」の３種類。
２カラムで使用しているのであれば、
『LION MEDIA』幅743px以上
『LION BLOG』幅890以上 の画像は不要ということですね。
でも、大きな画像を見せたいときもありますよね。そんなときは、記事の中には小さめの画像を貼って、大きめの画像へリンクを貼るっていうのも一つの方法です。そうすれば記事を読み込む時の時間が短くなります。
「大サイズ」はどこにも使われないので確実にいらないです（個人的意見）。
使わない場合は、メディア設定で値を0にすれば自動生成されません。もし投稿記事内でいつも使用する画像サイズが決まっているのであれば、そのサイズを設定しておくことで便利に使えそうです。
『LION MEDIA』ってなぁに？ どんな機能があるのって方はこちらをご覧ください。
『LION MEDIA』はWordPress初心者にオススメのテーマ！
『LION MEDIA』カスタマイズの使い方【基本と設定一覧】初心者向け
『LION BLOG』にはどんなカスタマイズ項目があるのって方はこちらから。