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

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

【2022年11月30日更新】全体を加筆修正しました。

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

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

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

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

T部長

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

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

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

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

それでは、どうぞ!

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

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

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

画像:画像の大きさとファイルサイズ

記事に掲載する画像は、これら2つのサイズを最適化することが重要です。

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

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

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

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

ブログに載せる画像は、最適化しなくても問題なく運営できます。

そのため「画像の最適化はなぜ必要なの?」と疑問をお持ちの方もいるでしょう。

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

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

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

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

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

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

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

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

画像はページ内のデータとしては非常に重い部類です。

画像をサイズダウンするだけで、ページの表示速度は大きく向上し、結果的にユーザーの離脱を防げるようになるでしょう。

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

画像を最適なサイズに整えることで、画像の見やすさ・わかりやすさが高まります。

横幅が合っていない画像や小さすぎて見づらい画像があると、ユーザーはストレスを感じます。

画像:見やすい画像表示

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

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

T部長

ブログに記事をアップする前に、PCとスマホ両方から画像の表示状態をチェックしましょう!

3.SEOで不利にならない

画像:SEOで不利にならない

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

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

Googleなどの検索エンジンから評価を得て、記事を検索結果の上位に表示させることが、SEOを行う最大の目的です。

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

いまやスマホからのインターネット利用は「68%以上」にものぼります(総務省のデータ参照)。
アクセスを伸ばしたいのであれば、ぜひ改善を検討してみてください。

T部長

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

SEOについては、以下の記事で詳しく解説しています。

アイキャッチ 【超重要】ブログにおけるSEO対策の本質!初心者向けに知っておきたいポイントを解説

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

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

それぞれ詳しく説明します!

200KB以下にする

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

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

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

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

200KB以下にする

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

ただ、文章だけの記事だと読みづらく、味気ない印象になりがちなので、画像の利用自体は悪いことではありません。
文章だけでは理解しづらい内容を図解で説明することで、より読みやすい記事になるでしょう。

そこで、画像を積極的に使いつつ、ファイルサイズをできるだけ小さくする方法について解説していきます。

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

まず、イラストなど「色数の少ない画像」を使うことを意識しましょう。

画像:色数の少ない画像を使う

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

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

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(横幅1,000px → 高さ562px)
  • 4:3(横幅1,000px → 高さ750px)
  • 3:2横幅1,000px → 高さ666px
  • 1.91:1横幅1,000px → 高さ523px

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

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

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

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

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

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

1.Squoosh(Google Chrome Labs開発)

画像:Squoosh(Google Chrome Labs開発)

Squoosh

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

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

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

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

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

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

2.EWWW Image Optimizer

画像:EWWW Image Optimizer

EWWW Image Optimizer

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

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

EWWW Image Optimizerの機能は以下の2つです。

  • 新規画像の圧縮
  • 既存画像の圧縮

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

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

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

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

プラグインの導入方法については以下の記事をご覧ください!

WordPress おすすめプラグイン12選 【2022年版】WordPressで導入必須のプラグインおすすめ12選

3.WebP Converter for Media

画像:WebP Converter for Media

WebP Converter for Media

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

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

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

また、ブラウザが「WebP」の表示に対応していない場合のフォローも充実。
ブラウザが「WebP」に対応している場合は「WebP」を、対応していない場合は「JPG」や「PNG」などの元画像を表示します。


面倒な部分を自動的に処理してくれる大変便利な機能です。

T部長

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

PageSpeed Insightsで表示速度を計測してみよう

「実際、今のサイトの表示速度はどのくらいなの?」「改善しているのかな?」と不安な方は、PageSpeed Insightsで計測してみましょう。

画像: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年12月9日12時まで、
利用料金最大30%OFFキャンペーンを開催中です!

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

さらに12月5日18時まで秋のスタートキャンペーンも開催中!
Amazonギフト券10,000円分が当たるビッグチャンスです。

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

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

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

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

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

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

【たった10分】WordPressブログの始め方|初心者でも簡単に開設できる!

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