【簡単】ブログ画像の適切なサイズ・容量とは？【最適化・圧縮化のススメ】

ブログ画像の適切なサイズを知りたいですか？

この記事で紹介する「ブログ画像の最適化方法」を実践すると、ユーザーと検索エンジンに最適な画像サイズを提供することができます。

そこで本記事では、ブログ画像を最適化する理由や画像サイズの決め方、おすすめツールやプラグインを解説します。

この記事を読むと、ブログ運営で小むずかしい画像のサイズ感を把握でき、おしゃれで読みやすい画像を作ることができます。

Webページに占める画像の容量は、かなり重たい部類です。まったく最適化されてないブログも見かけますが、ヤバいですよ。

また「画像の横幅や縦幅ってどのくらいにすればいいの？」というよくある疑問もマルっとお答えします。画像サイズを統一させると、スッキリした印象も与えられますよ。

ブログ画像の適切なサイズとは？

ブログ画像のサイズには「画像の容量」「画像の縦・横幅の大きさ」の2つの意味合いがあります。

• その①：画像の容量（キロバイト、メガバイト）
• その②：画像の大きさ（横 × 縦）

ブログ運営では、上記2つのサイズを最適化することが大切です。

その①：画像の容量「200KB」以下

画像1枚の容量は「200KB（0.2MB）」以下が理想です。なぜなら、Googleが推奨するWebサイトのファイルサイズは「合計1.6MB」だからです。

Aim to keep your total byte size below 1,600 KiB. This target is based on the amount of data that can be theoretically downloaded on a 3G connection while still achieving a Time to Interactive of 10 seconds or less.引用元：Avoid enormous network payloads

1つの記事には、テキストだけでなく、画像や広告、スクリプトタグなど、さまざまな素材が使われます。つまり、複雑な構成になるほど、処理が重たくなります。

特に画像は、処理の重たい要素です。必ずアップロード時に「リサイズ&圧縮」し、画像を軽量化させましょう。

その②：画像の大きさ「横1,000px」以下

画像の容量を200KB以下に抑えるには、画像の「サイズ」が重要です。

結論、画像の横幅 =「1000px以下」でOK。もしくは「700px」くらいでも問題ありません。

• 横幅：700〜1,000pxに調整
• 縦幅：横幅に合わせて、黄金比で調節

ちなみに、大半のブログは、本文のエリア幅 =「横：850px以下」の場合が多いです。よって、横幅1,000pxの画像は「エリア幅に対して、150px分ムダ」ともいえますね。

本文のエリア幅を越えると、キメ細かくなりますが、重たくなります。一方、エリア幅より小さいと、画質は荒めになりますが、軽くなります。

よって、画像が重たくならない、視認性の悪くならない、丁度良い画像サイズを作ることが大切です。

適切な画像サイズの決め方

とはいえ「横幅1,000px以下」と言われましても、自分のブログに最適な画像幅がわかりませんよね？

しかし、安心してください。下記の3ステップで、サクッと10秒で確認できます。

step
1デベロッパーツールを開く

まずは、ブログ記事の画面にて「デベロッパーツール」を開きます。

デベロッパーツールの開き方

• Mac：「⌘ + option + i 」
• Windows：「F12」

もしくは、右クリック →「検証」にて開けます。

step
2本文の要素にカーソルを当てる

デベロッパーツール右上の「カーソル」をクリックします。

続いて、ブログ記事を構成する要素にカーソルを当てます。今回の場合、本文のエリア幅を調べたいので、テキトーに「H2見出し」を選んでみましょう。

step
3画像サイズの横幅を確認する

下記のような画面になりますが、赤枠部分を見てください。

カーソルに当てた要素の横幅が「694px」と表示されてます。よって、これが画像幅の目安になります。

また「スマホ」の横幅も確認してみると「345px」と表示されます。しかし、PCの横幅に基準をおけば、スマホ画面時では縮小されて画質が良くなります。

よって、700pxほどの画像幅が、PC〜スマホにおける適切なサイズです。なお、この横幅はサイトやWPテーマ、設定によって異なります。

 質問：画像の高さは？

画像の高さについては「アスペクト比」に当てはめましょう。

• その①：「3：2」
• その②：「4：3」
• その③：「16：9」
• その④：黄金比「1.6181：1」
• その⑤：白銀比「1.414：1」

計算がわからない...という方は「アスペクト比計算ツール」がおすすめ。片方のサイズを入力すると、自動的に最適なサイズがわかります。

以上が、ブログに最適な画像サイズの決め方です。

ブログ画像を最適化する理由3つ

それは、ユーザーと検索エンジンに、ストレスを与えないためですね。具体的には、下記のとおりです。

• 理由①：表示速度の高速化
• 理由②：画像の視認性をUP
• 理由③：レスポンシブ対応

1秒でも遅れると、ユーザーは離脱してしまいます。ユーザーは忙しい生き物なので、そのようなせっかちな人間への"おもてなし"が必要条件です。

理由①：表示速度の高速化

画像を最適化し、ページ表示速度を向上させましょう。というのも、一般的に画像の容量は大きく、最適化しないと、ページの読み込み速度がかなり低下します。

実は、ページの表示速度がたった「3秒」遅れることで、離脱率は「32%」も上昇します。

特に、ブログは「書き出し」が重要です。記事をクリック後、最低3秒以内にページを表示させる施策が必要です。

画像はページ内データとして、とても重たいです。読み込みの遅いページは、SEOでもマイナス。画像は圧縮し、サイズを落としましょう。

理由②：画像の視認性をUP

画像サイズを最適化することで、読みやすさ・わかりやすさもUPします。

スマホ画面においては、バカでかい画像はムダです。スマホでは縮小されて表示されるものの、データ容量は、重たくなります。

横幅が合ってなかったり、画像のテキストが細かすぎても、ストレスです。最悪、離脱されかねません。

人によって画面の大きさも異なるため、そこで、下記の「レスポンシブ対応」が重要になります。

理由③：レスポンシブ対応

操作性や視認性が悪くなると、離脱率が上昇し、SEOでも超マイナスです。画像のレスポンシブ対応は必須でして、どのデバイスでもキレイに収まるよう設計しましょう。

とはいえ、画像のレスポンシブ対策は「WordPressテーマ」を使えば半自動的に解決できますね。

>> 関連：【必須】レスポンシブ対応じゃないブログはオワコンです【プログラミング不要】

ブログ画像を最適化する方法【3ステップ】

それでは、ブログ画像をユーザーと検索エンジンに最適化する方法を解説します。

• 手順①：Canvaでリサイズする
• 手順②：PNG形式でダウンロードする
• 手順③：画像を圧縮する

実際に僕は上記の方法にて、画像を最適化してます。ぜひ、マネしてみてください。

手順①：Canvaでリサイズする

ブログ画像を、そのままWordPressにアップロードするのはやめましょう。というのも、ダウンロードした画像のサイズ（横幅、高さ、容量）がバラバラだからです。

ブログは「統一感」も大切です。そこで、画像サイズを「Canva」にて調節しましょう。

step
1画像サイズを決める

まずは「Canva」にアクセスし、カスタムサイズからWordPressブログに最適な画像サイズを入力します。

こーすると、ブログ画像に統一感が生まれ、スッキリ読みやすくなります。

手順②：画像をダウンロードする

画像データを枠組み内にドロップします。設定サイズより大きい画像は縮小され、小さい画像は拡大されます。

なお、ファイル形式は「JPG」「PNG」どちらでもOK。PNG推奨ですが、JPGに比べると、やや重たいです。

手順③：画像を圧縮する

リサイズ画像をダウンロードしたら、WordPressにアップロードしましょう。

• 方法①：圧縮してから画像をアップロードする
• 方法②：アップロード時に画像を自動圧縮する ← おすすめ

画像を圧縮するには、下記で紹介する「プラグイン」が便利です。そこで今回は、効率重視のため「方法②」を紹介しますね。

イメージとしては、圧縮プラグインを導入しつつ、あまり質を落とさず、UPした画像を自動で軽量化してくれる感じです。

ブログ画像の最適化におすすめなプラグイン2選

画像を圧縮するには、WordPressのプラグインを使いましょう。

• その①：EWWW Image Optimizer
• その②：TinyPNG

WprdPressブログに必須なプラグインについては【9選】WordPressブログおすすめ無料プラグイン【不要プラグイン5選】をどうぞ。

その①：EWWW Image Optimizer

さらに「JPG or PNG → WebP」にコンバートしてくれ、かつ高圧縮です。これにて、1枚あたりの画像の容量が「10〜50KB」ほどに。

もしかして「WebP」をご存知ないかもですが、次世代のファイル形式でして、とても軽い特徴があります。

容量を200KB以下に抑えるにも、画像の軽量化は必須。詳しくは【神】EWWW Image Optimizerの設定&使い方ガイド【画像のWebP化方法】をお読みください。

その②：TinyPNG

もしくは、画像圧縮の人気サイト「TinyPNG」のプラグイン「TinyPNG JPEG, PNG & WebP image compression」でもOK。

先に紹介した「EWWW Image Optimizer」よりも高い圧縮性能でして、最大50%ほど軽量化してくれます。

とはいえ、利用制限がありまして、ユーザー登録（名前・メアド）が必要なのと、月500枚までしか無料で圧縮できません。

ちなみに、WordPressでは、たとえ1枚でも、複数サイズの画像がアップロードされます。つまり、月500枚とて、実際には100枚くらいしか圧縮できません。

使い勝手 or 圧縮率を選ぶかは、あなた次第です。僕は、どっちも使ってみた結果「EWWW Image Optimizer」の方が使いやすく、そちらを採用してます。

ブログ画像を最適化させる要素3つ

ブログ内に掲載する主な画像についてです。

• その①：アイキャッチ画像
• その②：H2見出し画像
• その③：図解

そのほか、トップページに掲載する画像なんかも、最適化させましょう。そもそも画像は重く、表示速度の遅いサイトは、いづれにせよ、印象は悪いです。

その①：アイキャッチ画像

アイキャッチ画像を最適化すると、読み込み速度がUPします。

なお、当サイトのように、あえて、アイキャッチ画像を「非表示」にするのも効果的ですよ。

• メリット①：表示速度の改善につながる
• メリット②：スクロール量が少なくなる
• メリット③：ユーザーの悩みが明確になる

上記メリットを考えると「絶対にアイキャッチ画像は必要だ...」という思考は、もしかしたら「時代遅れ」かもしれません。

Webページは「初速」が大切なので、アイキャッチ画像で遅延してては本末転倒ですね。非表示にすることで、秒で記事が表示されますよ。

>> 関連：【Canva】ブログ用アイキャッチ画像の作り方【思わずクリックしたくなるコツ7つ】

その②：H2見出し画像

H2見出しに使う画像も、もれなく最適化させましょう。

不要と判断できるなら、表示速度の改善にも、ムダな画像は減らすべきですね。

その③：図解

本文で使う「図解」も最適化させましょう。

あくまで、内容をわかりやすく伝える画像ですから、文字を大きくするなど、ハッキリとしたビジュアルが大切です。

ブログ画像のサイズでよくある質問5つ

ブログ画像を適切サイズで最適化せよ

本記事では、ブログ画像のサイズや最適化方法についてマルっと解説しました。

いうまでもなく、画像の最適化を含めた、質の高い記事を提供することが大切ですよ。

テクニックに固執することなく、最優先は「ユーザー」です。Googleは「ユーザーにフォーカスせよ」と述べており、ユーザーに配慮した結果の画像圧縮ですので...

そして、画像の最適化には「SEO対策」も欠かせません。

圧縮だけでなく、包括的な「画像SEO対策」が必要です。詳しくは【10選】SEOに効果的！おすすめ画像対策まとめ【PV1.5倍/画像検索の重要性】をどうぞ。

WordPressブログの始め方

【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】

続きを見る

最後までお付き合いありがとうございました。僕のTwitter（@ImperialMiyavi）もフォローしてもらえたら嬉しいです。ブログ運営に関するお役立ち情報を発信しており、ブログとセットで勉強できます！