国内シェアNo1サービスの「中の人」がブログ運営に役立つ情報をわかりやすくお届け!

ブログの最適な画像サイズとは?最適化する理由やおすすめツールも紹介

この記事のレベル
初心者
(4.0)
重要度
(3.5)
難しさ
(2.0)

こんにちは、T部長です!

記事を作成する中で「ブログに最適な画像サイズはあるの?」と疑問に思ったことはありませんか?

今回はそんなお悩みをお持ちの方に、記事に用いる画像の最適なサイズや形態について解説します。

T部長

この記事は以下のような人におすすめ!

  • ブログ画像の最適化は必要?
  • ブログに最適な画像サイズを知りたい
  • 画像最適化におすすめのツールやプラグインを知りたい
  • 実際にブログ画像を最適化するためにはどうしたらいいの?

ブログ記事では、「アイキャッチ」や「本文中のイメージ」として画像を掲載することが多いですよね。

画像を最適化する方法にくわえて、おすすめのツールやプラグインも紹介していますので、ぜひ参考にしてみてください。

それでは、どうぞ!

「画像サイズ」は2つの意味がある

ブログの「画像サイズ」には、そもそも「画像の大きさ(表示サイズ)」「画像のファイルサイズ」の2つの意味があります。

「画像サイズ」として「画像の大きさ」のみを想像していた方も多いのではないでしょうか。

記事に掲載する画像は、これら2つの側面から最適化することが重要です。

特に重要なのは「画像のファイルサイズ」。
ファイルサイズとは、データの大きさです。サイズが大きいほど、読み込むのに時間がかかります。

ファイルサイズが最適化されていなければ、ページの表示速度が遅くなり、ユーザーの離脱に繋がりかねません。

詳細は順に解説していきますね!

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

ブログに載せる画像は、最適化しなくても問題なく運営できます。
そのため「画像の最適化はなぜ必要なの?」と疑問をお持ちの方もいるでしょう。

ブログ画像を最適化する理由は、主に以下の3つです。

画像を最適化する理由
  1. ページの表示速度を向上させられる
  2. 見やすい画像表示ができる
  3. SEOで不利にならない

1つずつ順番に解説していきます。

ページの表示速度を向上させられる

画像を最適化することで、ページの表示速度を上げられます。

ファイルサイズが大きい画像ばかり載っていると、記事を読み込むのに時間がかかってしまいます。

Googleが発表しているデータによると、たった3秒の読み込み遅れでユーザーの53%が離脱するとのこと。

せっかくよい内容が書かれていても、ページの表示が遅いだけでユーザーが離れてしまいます。

画像はページ内のデータとしては非常に重い部類です。
掲載画像をサイズダウンするだけで、ページの表示速度は大きく向上します。

ユーザーの離脱を防ぎたければ、画像のサイズダウンは行っておくべきです。

見やすい画像表示ができる

画像の大きさを調節することで、ユーザーにとって見やすい画像にできます。

画面の大半を占めたり、横幅が合っていない画像や、逆に見づらいほど小さな画像などがあると、ユーザーはストレスを感じます。

ストレスを感じたユーザーは、最悪離脱してしまうかもしれません。

画面の小さなスマホからアクセスするユーザーも多いことを考慮して、画像の大きさを調節しましょう。

SEOで不利にならない

ブログ画像を最適化することで、SEOで不利になるのを防ぐことができます。

SEOとは、「Search Engine Optimization」の略で、日本語で「検索エンジン最適化」のこと。

SEOによってGoogleなどの検索エンジンから評価を得ることで、記事が検索結果で上位に表示されるようになります。

ブログ記事を多くのユーザーに見てもらうために、SEOは非常に重要です。

Googleは、モバイルからの検索結果において「ページの読み込み速度」を順位付けの要素としています。
これは、「速いほど有利」ではなく、「遅いと不利」という性質のものです。

いまやスマホからのインターネット利用は「68%以上」にものぼります(総務省のデータ参照)。

記事本来の質で勝負するためにも、ブログ画像を最適化しておくことは重要です。

ブログでの最適な「画像サイズ」とは

続いては、ブログでの最適な「画像サイズ」について解説します。
結論としては下記の2点です。

それぞれ詳細を説明しますね。

200KB以下にする

画像1枚のファイルサイズとしては、200KBを目安に、できる限り軽くしておきたいです。

Googleが発表したデータでは、速度の遅いモバイル回線も考慮して、ページ容量「1.6MB以内」を目指すべきとされています。

記事以外のサイト構成データも考慮すると、200KBの画像だと5~6枚が精一杯です。
もっと軽いほうが望ましいのですが、要点ごとに画像を利用するのは可能かと思います。

一方、フリー画像素材の多くは、おおよそ500KB〜10MB(10,000KB)前後なので、そのままだと推奨するサイズの2倍以上も重いです。

フリー素材を最適化せず多用すると、ページのデータサイズがすぐに基準値を上回ってしまいます。

ただ、文章だけの記事だと読みづらく、味気ない印象になりがちなので、画像の利用自体は悪いことではありません。
文章だけでは理解しづらい内容を、図で紹介するなども効果的です。

それでは、画像を活用しつつも、できるだけ軽くするにはどうすれば良いのか。

画像を活用しつつも、できるだけデータサイズを軽くするにはどうすればよいのか。
そのためのポイントを紹介しますね。

イラストなど色数の少ない画像を使う

イラストなど色数の少ない画像を使いましょう。

色数の多い画像は綺麗でビジュアル映えしますが、同時にファイルサイズが大きくなります。
また、元のサイズが大きいので、どれだけ最適化してもファイルサイズを小さくしづらいです。

イラストなど色数の少ない画像だと、ファイルサイズが比較的小さいため、利用しやすいですよ!

T部長

色数が多い画像の代表例は写真です。
イラストでもグラデーションが含まれると、色数が多くなりやすいので注意しましょう。

「PNG」か「JPG」を利用する

ブログ内に挿入する画像は「PNG」か「JPG(JPEG)」を利用しましょう。

形式の特徴を活かせばファイルサイズを下げやすく、ブログに利用しやすいためです。

大まかには下記のように使い分けるのがおすすめです。

PNGとJPGの使い分け
  • JPG…写真、グラデーションカラーを”含む”イラスト
  • PNG…グラデーションカラーを”含まない”色数の少ないイラスト

まず、先に触れたとおり「イラスト」を用いる場合は「PNG」をおすすめします。
「PNG」は、色の繰り返し表現に長けており、色数が少なければ容量を軽くしやすいからです。

写真」を使う場合は「JPG」がおすすめです。
「JPG」は、色数が多い表現に長けた、容量の小さい形式。
「イラスト」でも、グラデーションカラーが含まれる場合は「JPG」のほうが軽くなります。

画像形式はこの2つを押さえておけば問題ありません。

T部長

とはいえ、画像の内容はさまざまで一概に言えないことも。
より軽くなるほうを選択してくださいね!

あらゆる画像におすすめの「WebP(ウェッピー)

実は「PNG」や「JPG」よりGoogleが開発した画像形式「WebP(ウェッピー)」がおすすめです。

写真でもイラストでも、全般的にファイルサイズが軽いため、利用できるなら「WebP」が最適です。

ただし、一部古いブラウザでは未対応で、広くカバーするなら代替画像として「PNG」「JPG」を別途用意しておく必要があります。

WordPressブログの場合は、のちに解説するプラグインで、「WebP」形式への変換と、ブラウザごとの出し分けが可能です。
ぜひ参考にしてみてください。

横幅は1,000px程度にする

ブログの表示サイズ面は、横幅1,000px程度あれば問題ありません。

というのは、各種WordPressテーマやブログサービスにおいて、ほとんどの場合で記事の横幅が1,000pxを超えないからです。

ちなみに、このサイトでは記事の横幅が「702px」です。

仮に画像の横幅が記事部分を超えていても、自動調整されるため問題なく表示できます。

もしサイトに合った横幅が知りたい場合は、Chromeのデベロッパーツールで確認が可能です。

Chromeデベロッパーツールでのサイズ確認方法
  1. Chromeで記事を表示しているときに「F12」キーを押す
  2. ツール左上にあるマウスカーソルのようなアイコンをクリックする
  3. 記事本文部が青く表示される位置でクリックする
  4. ツール内の「Computed」タブをクリックする
  5. 表示された図の青い部分を確認する

画像の高さは定番の比率を参考にする

ここまで読んで「画像の高さはどうするの?」と思った方もいらっしゃると思います。

そこは一般的な比率を参考にすると良いでしょう。
代表的なものには下記があります。

一般的な画像の縦横比率
  • 16:9(横幅1000px → 高さ562px)
  • 4:3(横幅1000px → 高さ750px)
  • 3:2横幅1000px → 高さ666px
  • 1.91:1横幅1000px → 高さ523px

横幅1,000pxの場合は、高さ520px~750px程度とすれば問題ありません。
画像の内容にもよりますが、大きなスペースを占めない「16:9」「1.91:1」の比率がおすすめです。

ただし、記事の内容を補足するための図解などは、比率よりも図解に必要な高さの確保を優先しましょう。

とはいえ、スクロールせずに表示しきれるよう、横幅の2倍を超えるようなサイズは避けるのが無難です。

画像最適化におすすめのツールやプラグイン

続いては、画像最適化におすすめのツールやプラグインを3つ紹介します。

最適なにおすすめのツールなど

Squoosh(Google Chrome Labs開発)

Squooshは、Google Chrome Labsが開発・提供している画像圧縮サービスです。
ブラウザ上からドラッグ&ドロップで簡単に画像の圧縮ができます。

また、圧縮によってファイルサイズや画質がどうなるか、実行前に確認できるため非常に便利です。

多くの画像形式に対応している点もメリット。Squooshで変換可能な画像形式は以下のとおりです。

Squooshで扱える画像形式
  • JPEG
  • PNG
  • MozJPEG
  • WebP
  • JPEG2000
  • TIFF
  • BMP
  • PDF
  • GIF

基本的に利用するのは先に紹介した「JPG(JPEG)」「PNG」「WebP」です。
画像内容にあわせて、適した画像形式で圧縮するとよいでしょう。

また、Squooshはスマホからでも簡単に利用できるため、外出中のブログ執筆でも活躍します。

EWWW Image Optimizer

EWWW Image Optimizerは、画像を劣化させることなくサイズを圧縮できるWordPress専用のプラグインです。

WordPress上でEWWW Image Optimizerをインストールし、有効化したあと、圧縮レベルやメタ情報の削除など必要な設定を施すだけで利用できます。

EWWW Image Optimizerの機能は「新規画像の圧縮」と「既存画像の圧縮」の2つです。

「新規画像の圧縮」では、プラグインが有効化されている状態であれば、画像をWordPressに追加する際に自動的に圧縮されます。

メディアライブラリ上で、対象の画像がどれほど圧縮されたか確認することも可能です。

また、プラグインが有効化されている状態で、メディアの「一括最適化」を選び、「最適化されていない画像をスキャンする」を選択するだけで、これまでアップロードした画像全てを圧縮できます。

非常に簡単に利用できるため、WordPressでブログ運営しているなら、ぜひおすすめしたいプラグインです。

WebP Converter for Media

WebP Converter for Mediaは、WordPress内の画像を「WebP」に変換するプラグインです。

プラグインのインストール後は、アップロードされる画像を自動的に「WebP」へ変換します。

もちろん、既にアップロードされている画像も「WebP」に変換可能です。

また、ブラウザが「WebP」の表示に対応していない場合のフォローもしてくれます。

ブラウザが「WebP」に対応している場合は「WebP」を、対応していない場合は「JPG」や「PNG」などの元画像を表示します。
面倒な部分を自動的に処理してくれる大変便利な機能です。

WordPressブログで画像を軽量化したい場合は、積極的に使いたいおすすめのプラグインです。

PageSpeed Insightsで計測してみよう

「実際、今のサイトってどんな状況なの?」「実際に改善しているのかな?」不安な方は、PageSpeed Insightsで計測してみましょう。

PageSpeed Insightsは、Googleが提供するサイトスピード計測サービスです。
対象サイトのページ表示速度を、「0〜100」のスコアで客観的に評価してくれます。

スコアは、以下のとおり、大きく3段階のゾーンに分かれています。

スコア評価
90~100(緑)速い
50~89(オレンジ)平均
0~49(赤)遅い

また、PageSpeed Insightsでは、単純なスコアだけではなく、ページの改善点も診断してくれます
改善が見込める箇所を具体的に示してくれるので大変参考になります。

ただ、改善項目には技術的な内容も多いため、まずは「画像」に関する項目を参考にしてみるとよいですよ!

T部長

モバイル向け、デスクトップPC向けの診断結果をそれぞれ表示してくれますので、参考にしてみましょう!

【補足】ブログ運営におすすめの素材サイト

「画像をどうやって用意すればよいか分からない……」とお悩みの方も多いと思います。

自分で画像を作ったり、写真を撮ったり、というのは難しいことも多いですよね。

そんな場合は、素材サイトを利用するのがおすすめです。
下記の記事でおすすめサイトをまとめていますので、ぜひチェックしてみてください。

【2022年版】写真・イラストフリー(無料)素材サイト26選!国内・国外も紹介 有料素材サイト 有料素材サービス6選!オリジナル画像作成サービスも紹介!

まとめ

ブログ内に挿入する画像は最適化することで、ページ表示速度を向上し、ユーザーにとってみやすい画像を提供できます。

最後に、紹介した内容をおさらいしておきましょう。

ブログ画像を最適化する理由
  • ページの表示速度を向上させられる
  • 見やすい画像表示ができる
  • SEOで不利にならない
ブログでの最適な「画像サイズ」とは
  • ファイルサイズは1枚200KB以下を目指したい
  • イラストなど色数の少ない画像を使うと軽くなる
  • 「JPG」「PNG」を使い分けるのがおすすめ
  • 容易に利用できるなら「WebP」が最もおすすめ
  • 表示サイズは横幅1,000px程度あればOK

ブログ画像を最適化する理由や具体的な方法で悩んでいる方は、本記事を参考にしてみてください。

以上、最後までお読みいただきありがとうございました。

キャンペーン開催中

国内シェアNo.1レンタルサーバー「エックスサーバー」では2022年8月25日18時まで、
半額キャッシュバックキャンペーンを開催中です!

今なら実質月額495円~お得にWordPressブログが始められます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

さらに、19周年記念キャンペーンも開催中です!
Amazonギフト券やiPadなどの豪華賞品が当たるビッグチャンス!

ぜひこのお得な機会にWordPressブログをご検討ください!

当メディア「初心者のためのブログ始め方講座」では、
初心者の方に分かりやすく簡単にブログを始められる方法を紹介しています!

WordPressに使用される国内シェアNo.1サービス「エックスサーバー」の中の人が確実で信頼性の高い情報をお届けしています!

ブログをこれから始める方はこちらの完全ガイドをぜひご覧ください!

【初心者向け】ブログの始め方完全ガイド!立ち上げから収入を得る方法まで

また、初心者の方向けにWordPressでのブログ立ち上げがたった10分できる方法も紹介しています!

【初心者でも安心】たった10分で出来るWordPressブログの始め方

ブログの始め方・立ち上げに関する、ご質問・ご相談はボクのツイッターDM( @tbcho_xsv )までお気軽にどうぞ!