SWELLに最適なアイキャッチ画像サイズの決め方：公式のサイズも公開

ワードプレスを始めた頃、最初か有料テーマを買ったあさひです。
買ったのは、アフィンガー５で最初に悩んだのがアイキャッチの画像サイズでした。

案外、公式でも解るところに表示されていないんですよね。

結構探した記憶があります。

アフィンガーからSWELLにテーマを変更した時、アイキャッチの画像が崩れることなく表示されていたので、画像サイズはそのまま気にせず同じで作っていました

ですが最近、高速化を意識するようになって、SWELLで最適なアイキャッチの画像サイズを調べることにしました

SWELLに最適なアイキャッチ画像サイズとは

まずは、SWELLの公式サイトで使っている画像のサイズを調べることから始めました

SWELL公式のアイキャッチ画像サイズ

試しにSWELL公式のアイキャッチ画像をダウンロードしてサイズを確認してみました

アイキャッチが使用されたサイト	サイズ（px）	比率	サイト構成	ファイル形式
SWELL公式デモ	1024×576	1.78：1	2カラム	jpg，png
デモサイト01	不明		2カラム	不明
デモサイト02	1400 x 865	1.62：1	2カラム	jpg
デモサイト03	1600 x 900	1.78；1	1カラム	png
デモサイト04	1600 x 800	2.00：1	2カラム	jpg
デモサイト05	1600 x 900	1.78：1	2カラム	jpg
デモサイト06	1600 x 900	1.78：1	2カラム	jpg

結構、色々なサイズが使われていることが解ります
サイトの横幅などによって変えているのかな？など予測

一番多く使われていたアイキャッチ画像のサイズは1600×900pxでファイル形式がjpgでした

私がSWELLで使っているアイキャッチの画像サイズ

私のアイキャッチの画像サイズを確認してみたところ、1024 x 576pxで、ファイル形式はjpegです

SWELLの公式で使われているサイズで作るようになったのかな？

ワードプレスで一般的に推奨されているアイキャッチ画像サイズ

※この一般的にというのは、ググって検索結果上位の見解をもとにしています

1200×630pxが一般的

比率は1.91（横）：1（縦）

では結局のところ、どうすればいいの？と思っている気がするので、今度はファイルのサイズと保存形式の違いで、どれほど容量が変わるのか実際にアイキャッチを作って比較してみたいと思います

参考までに了さんのツイートも掲載

SWELL開発者の了さんが、画像サイズについてツイートしていたので紹介します

アイキャッチ画像のサイズはどうすればいいですか？

って質問に対してははっきりとした答えがなかったけど、構造化データ的には最低696pxの幅が必要…？🤔 pic.twitter.com/DYMvhj8PPY

— 了🌊SWELL | Arkhe開発 (@ddryo_loos) September 22, 2021

このツイートによると、横幅を698px以上にする必要はありそうです

つまり、画像を軽くすることばかり考えて小さくしすぎるのもNGということになります

ファイルサイズ、ファイル形式、容量の関係

まずは

• ファイルのサイズを小さくして、ファイル形式をpngにした場合
• ファイルサイズを大きくして、保存するファイル形式をjpegにした場合

どちらが容量が大きくなるのか？調べてみたいと思います

同じサイズで保存形式を変えた場合の容量の違い

まずは、同じファイルのサイズで、jpegとpngで作成した画像の容量の違いを見てみましょう
こちらの画像は、Canvaで作成しています

全く違いますね。圧倒的にpngが重たいのが解ります

ちなみに、Canvaで保存形式をpngにして圧縮してから保存した場合は313.3 KBになりました

これだけの違いがあると、ファイルサイズを小さくしても、pngのほうが重くなりそう

サイズ別の画像の重さを比較

Canvaでは、画像を圧縮して保存することもできるので、ここではpngを圧縮した場合で調べています

先ほどの写真と今回のイラストでファイルの重さが全然違います
これはもっと調べてみる必要がありそうです

写真とイラスト系のアイキャッチの重さの違い

ここまできて気が付いたのは、写真データから作るアイキャッチとイラスト系のアイキャッチの容量の違いです。

今まで写真データを使ってきたけど、高速化を考えるならイラスト系の方が軽いのかもしれない

せっかくなので別の写真とイラストで比較してみます！

アイキャッチの種類とサイズと容量をグラフで比較

これ以上画像をアップすると重たくなってしまうので、ここからは数字のみで比較します

種類	サイズ	形式	容量	備考：Canva保存条件
写真	800×450 px	png	187.9 KB	ファイルを圧縮 （低画質）
写真	800×450 px	jpeg	43.6 KB	品質８０
イラスト	800×450 px	png	20.7 KB	ファイルを圧縮 （低画質）
イラスト	800×450 px	jpeg	25.3 KB	品質８０
写真	1600×900 px	png	1.8MB	ファイルを圧縮 （低画質）
写真	1600×900 px	jpeg	130.1KB	品質８０
イラスト	1600×900 px	png	53.3KB	ファイルを圧縮 （低画質）
イラスト	1600×900 px	jpeg	65.0KB	品質８０

根拠のあるおすすめサイトを紹介

私が信頼するsuyaさんのサイトマニュオンで、解りやすい記事を見つけたので紹介します。

アイキャッチだけでなく、他の画像の推奨サイズを示してくれています。

もはや、SWELLユーザーはこの記事通りに作ってOKだと思います

結論

ここまで検証してきて、アイキャッチを作る時に、この３種類を変えるだけで容量（重さ）は全く違うことが解りました

1. アイキャッチの種類
   • 写真とイラストどちらを使うか
2. サイズの大きさ
3. 保存形式
   • pngとjpegどちらか

自分のサイトで使うアイキャッチは写真なのかイラストなのか？
そこを視点に、サイズと保存形式を考えてみましょう