ブログの画像サイズ、どれが正解？って迷っていませんか？
画像は、見た目の印象に大切だけど、サイズが大きすぎるとページの表示が遅くなって、読者が離れてしまう原因になります。
それに、SEO的にもマイナスになる可能性もあります。
そこで、ブログで実際に使っている「ちょうどいい画像サイズ」と、表示スピードを落とさずに画像を軽くする方法をまとめてみました。
簡単にできるので、すぐ実践してみてくださいね。
こんな方にオススメ
- ブログに使う画像サイズの目安が分からない方
- SWELLテーマでの画像設定方法を知りたい方
- 画像が重くてページの表示速度が遅いと感じている方
- SNSでシェアしたときに画像が切れてしまうのを防ぎたい方
この記事でわかること
- SWELLテーマでの各画像（ファビコン・ロゴ・アイキャッチなど）の最適なサイズと比率
- 画像の容量は200KB以下が目安である理由
- 画像を圧縮して軽くする方法（プラグイン・ツール）
- 表示速度やSEOに影響する画像の注意点と改善方法
WordPressブログでおすすめの画像サイズ（SWELLの場合）
ブログ画像のサイズや容量に関しては、決まった正解はありません。
ひとつの目安として、参考にしていただければ嬉しいです。
当ブログで使用している画像サイズを紹介します。
ファビコン画像（512px×512px）
「ファビコン画像」とは、ブラウザのタブに表示されるウェブサイトのアイコンのことです。
SWELLでは、次の手順で設定を行います。
ヘッダーロゴ画像 （1600px×400px）
「ヘッダーロゴ画像」とは、ウェブサイトのヘッダー部分に表示されるサイト名やロゴ、アイコンのことです。
SWELLでは、次の手順で設定を行います。
メインビジュアル画像（PC：1600px × 900px 比率16:9）
「メインビジュアル画像」とは、トップページの上部や全体に表示される主要な画像や動画のことです。
SWELLでは、次の手順で設定を行います。
「メインビジュアルの表示内容」で画像または動画を選択します
メインビジュアル画像（スマホ：1080px×1920px）
SWELLでは、次の手順で設定を行います。
「メインビジュアルの表示内容」で画像または動画を選択します
アイキャッチ画像（1200px×630px 比率1.91:1）
「アイキャッチ画像」とは、各記事に添付して表示する画像のことです。
SWELLでは、次の手順で設定を行います。
画面右側の設定項目の「アイキャッチ画像」で画像を設定します
ダッシュボードメニューの「SEO PACK」→「OGP設定」で画像を変更
※サムネイル画像も同じサイズを使用しています。
要注意！縦長画像をOGPに設定すると損をする理由
ウェブサイトで使うアイキャッチやメインビジュアルは、スマホで見やすいように縦長（1080px × 1920px）に設定されていることが多いです。
しかし、この縦長の画像をそのままSNSのOGP画像に設定するのは避けるべきです。
なぜなら、SNS（X/Twitter、Facebook、LINEなど）は、シェアされた画像を表示する際、ほとんどの場合、横長（1.91:1）の比率に自動で調整する仕組みになっているからです。
その結果、画像のクオリティが損なわれ、集客のチャンスを逃してしまう可能性があります。
SNSで画像が切れるともったいないです！
最適な大きさは「1200px × 630px」
最高の効果を得るため、OGP設定にはSNS標準の比率に合わせた1200px × 630pxの横長画像を準備するのがおすすめです！
プロフィール画像（512px×512px 比率1:1）
「プロフィール画像」とは、サイドバーなどに表示される人物やサイトのアイコン画像のことです。
SWELLでは、次の手順で設定を行います。
設定終わり！
長かった〜
WordPressブログでおすすめの画像容量サイズ
まず目指すは、1枚あたり200KB以下！
これを意識するだけで、サイトはぐっと軽くなるワン。
続いてはおすすめの画像容量サイズについて解説していきます。要するに、200KB（キロバイト）以下を目安にした画像を使用するとよいでしょう。
一般的に、200KBを超える画像は容量が大きいと見なされます。
そのため、リサイズや圧縮をして、画像の容量を軽くすることをおすすめします。
ブログ画像を圧縮した方がいい3つの理由
ブログ画像を圧縮した方がいい3つの理由は以下のとおりです。
❶ ページの読み込み速度を速くするため
❷ SEOに影響するため
❸ データの使用量を抑えるため
一つずつ、説明します。
❶ ページの読み込み速度を速くするため
ページの読み込み速度は、ブログやウェブサイトの離脱率に大きく関係しています。
読み込みが遅いと、読者が快適にページを見られず、途中で離脱してしまうからです。
画像サイズが大きすぎると、記事の読み込みに時間がかかってしまいます。
ページの表示速度を快適に保つために、できるだけ軽い画像を設置しましょう。
せっかく素晴らしい内容が書かれていても、ページが遅くてユーザーが離れてしまうのは非常にもったいないですよね。
❷ SEOに影響するため
「ページの読み込み速度」や「コンテンツがスムーズに表示されるかどうか」は、SEO評価に大きな影響を与えます。
そのため、画像はできるだけ軽くして、素早く読み込めるようにしておくことが大切です。
Googleは「モバイルファーストインデックス」を採用しており、モバイル表示速度が重要です。
モバイルユーザーは通信環境に影響されやすいため、軽い画像を使って表示を速くすることがSEO対策に効果的です。
❸ データの使用量を抑えるため
ファイルサイズが小さくなると、サーバーの負担が減り、ユーザーの通信量も節約できます。
特にモバイルでは、読み込みが速くなり、データ消費が抑えられるので、より快適に閲覧できます。
その結果、離脱率が減り、サイト全体のパフォーマンスも良くなります。
ブログ画像を圧縮するおすすめな方法（2つ）
一番のおすすめは1つ目の「WordPressプラグインを使って自動で圧縮する」方法です。
❶ WordPressプラグインを使って自動で圧縮する
❷ 圧縮ツールのウェブサイトを活用する
プラグインとツール、両方試す必要はありません。自分に合った方を選んでOKですよ！
❶ WordPressプラグインを使って自動で圧縮する
「EWWW Image Optimizer」は、画像を劣化させずに圧縮できるWordPressプラグインです。
特別な設定は不要で、プラグインを有効化するだけで、新しい画像は自動で圧縮され、既にアップロードされた画像もまとめて圧縮できます。
また、画像の圧縮や拡張子の変更にも対応していて、とても便利です。
さらに、「EWWW Image Optimizer」は、Googleが推奨する次世代画像フォーマット「WebP」への変換にも対応しています。
WebPは従来のJPEGやPNGよりも高い圧縮率を持つため、よりサイトを高速化したい方は設定を検討してみましょう。
❷ 圧縮ツールのウェブサイトを活用する
「TinyPNG」は、ほとんど画質を落とさずに画像を圧縮できる便利なウェブサービスです。
誰でも無料で使える、人気のツールです。
まとめ：ブログにおすすめの画像サイズについて
WordPressで画像をアップロードする際には、配置場所に合わせた適切な画像サイズを設定することが大切です。
今回は、当サイト（SWELL）で使っている画像サイズをご紹介しました。
また画像を圧縮する方法として、以下の方法をおすすめします。
プラグインで自動化→WordPressプラグイン「EWWW Image Optimizer」で画像を自動で圧縮
オンラインで手軽に→圧縮ツール「TinyPNG」で画像を圧縮
手間なし自動派ならEWWW、手動でチェックしたい派ならTinyPNG、というイメージで選んでみてね！
あなたに合った方法で、快適なブログ作りを進めていきましょう！
最後までご覧いただき、ありがとうございます
