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

SWELLで使うアイキャッチ画像のサイズ

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

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

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

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

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

目次

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

SWELLで使うアイキャッチの保存形式

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

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

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

アイキャッチが使用されたサイトサイズ(px)比率サイト構成ファイル形式
公式サイト1024×5761.78:12カラムjpg,png
デモサイト01不明2カラム不明
デモサイト021400 x 865 1.62:12カラムjpg
デモサイト031600 x 9001.78;11カラムpng
デモサイト041600 x 8002.00:12カラムjpg
デモサイト051600 x 9001.78:12カラムjpg
デモサイト061600 x 9001.78:12カラムjpg
サイト構成は個別ページの構成についてになります

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

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

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

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

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

あさひ

もう前すぎて覚えてない

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

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

1200×630pxが一般的

比率は1.91(横):1(縦)

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

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

まずは

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

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

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

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

1024×576(px):png

ファイルの容量:703 KB

ファイルサイズが1024×576(px)保存形式がpngの場合
クリックで拡大

1024×576(px):jpeg

ファイルの容量:54.3 KB

ファイルサイズ1024×576(px)保存形式がjpegの場合
クリックで拡大

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

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

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

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

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

800×450 px:png

ファイルの容量:31.4KB

800×450 px:png

800×450 px:jpeg

ファイルの容量:37 KB

800×450 px:jpeg

1600×900 px:png

ファイルの容量:152.3KB

1600×900 px:png

1600×900 px:jpeg

ファイルの容量:91.4KB

1600×900 px:jpeg

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

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

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

あさひ

びっくりするほど写真のほうが重たい
しかもイラストの場合はpng圧縮の方が軽い結果になった

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

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

800×450 px:png:写真

ファイルの容量:187.9 KB

800×450 px:png:写真

800×450 px:jpeg:写真

ファイルの容量:43.6 KB

800×450 px:jpeg:写真

800×450 px:png:イラスト

ファイルの容量:20.7 KB

800×450 px:png:イラスト

800×450 px:jpeg:イラスト

ファイルの容量:25.3 KB

800×450 px:jpeg:イラスト

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

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

種類サイズ形式容量備考:Canva保存条件
写真800×450 pxpng187.9 KBファイルを圧縮 (低画質)
写真800×450 pxjpeg43.6 KB品質80
イラスト800×450 pxpng20.7 KBファイルを圧縮 (低画質)
イラスト800×450 pxjpeg25.3 KB品質80
写真1600×900 pxpng1.8MBファイルを圧縮 (低画質)
写真1600×900 pxjpeg130.1KB品質80
イラスト1600×900 pxpng53.3KBファイルを圧縮 (低画質)
イラスト1600×900 pxjpeg65.0KB品質80

結論

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

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

そして

  • アイキャッチに写真を使う時は、jpegで保存したほうが軽い
  • アイキャッチにイラストを使う時は、png(圧縮)で保存したほうが軽い

ということが解りました

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

あさひ

私は、ファイルサイズは800×450 pxにして、写真を使う時はjpeg、イラストを使う時はpngにしようと思います

SWELLで使うアイキャッチ画像のサイズ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次
閉じる