「ブログに載せる画像を圧縮する意味って何？」
「ブログの画像を圧縮する方法を知りたい」
と悩んでいる人はいませんか？
画像は容量が大きいので、そのままブログに載せてしまうとページの表示速度が低下してしまう可能性があります。
そのため、画像を圧縮して容量を削減することが重要です。
本記事の内容
- ブログの画像を圧縮する目的
- 画像圧縮の種類
- ブログに適切な画像の大きさと容量
- 画像圧縮ツール紹介（Webアプリ＆プラグイン）
記事の信頼性
ブログ歴は4年で、自分の経験をもとにブログ運営について情報を発信しています。
本記事では、ブログに載せる画像を圧縮する目的から画像圧縮ツールを紹介しています。
本記事を読めば、画像を圧縮してページの表示速度を向上させることができるようになりますよ。
ブログ用の画像を圧縮する目的は？
ブログ用の画像を圧縮する目的は、記事の表示速度を向上させるためです。
ブログ記事の中で、容量が大きいのは画像。
画像を圧縮することで、記事の容量が削減され、表示速度を改善できます。
記事の表示速度を向上させるメリットは2つ。
- SEO対策
- 読者の離脱防止
SEO対策
ページの表示速度があまりにも遅いと、Googleの検索エンジンからの評価が下がります。
Googleは2018 年 7 月から、ページの表示速度をモバイル検索のランキング要素として使用しています。
2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。
ただし、対象となるのは、表示速度があまりにも遅いサイトだけです。
表示速度がSEOに与える影響は小さいですが、なるべくページを速く表示させることで検索エンジンから低評価を受けることはなくなります。
読者の離脱防止
記事の表示速度を向上させることで、読者の離脱を防ぐことにつながります。
2017年にGoogleが発表した表示速度と離脱率の調査では、モバイル端末で読み込みに 3 秒以上かかるページは 、53% の人が離脱するという結果が出ています。
読み込みに 3 秒以上かかるページからは 53% のモバイルサイト訪問者が離れています
他にも、表示速度と離脱率の調査結果は以下の通りです。
- 表示速度が1秒から3秒になると、離脱する可能性が32%増加
- 表示速度が1秒から5秒になると、離脱する可能性が90%増加
- 表示速度が1秒から6秒になると、離脱する可能性は106%増加
- 表示速度が1秒から10秒になると、離脱する可能性は123%増加
そのため、読者にブログの記事を読んでもらうためには、表示速度を3秒以下にすることが必要です。
記事の中でもデータ容量が大きい画像を圧縮することで、ページを表示するまでの時間が短縮されます。
読者がページを表示する前に離脱することなく、記事を読んでくれるようになりますよ。
表示速度をチェックする方法
ブログ記事の表示速度をチェックするなら、「PageSpeed Insights」がおすすめ。
「PageSpeed Insights」は、Googleが提供するサイトの表示速度を計測できるツール。
「PageSpeed Insights」の検索窓に記事のURLを入力するだけで、表示速度を計測できます。
モバイル端末とパソコン端末の速度も確認できますよ。
【2種類】ブログ画像を圧縮する方法
画像の圧縮方法には2種類存在します。
- 可逆圧縮
- 非可逆圧縮
「可逆圧縮」と「非可逆圧縮」の違いはこちら。
| 可逆圧縮 | 非可逆圧縮 | |
| 圧縮率 | 低い | 高い |
| 画質 | 高い | 低い |
| 画像の復元 | 可能 | 不可 |
可逆圧縮
可逆圧縮とは、画像の情報を削除せずに、データを置き換える方法です。
可逆圧縮は元の画像データを完全に保持できますが、圧縮率は非可逆圧縮よりも低くなります。
画像の情報をすべて保持しているので、圧縮してもまた元の状態で開くことが可能です。
非可逆圧縮
非可逆圧縮とは、画像の情報を一部削除して、高い圧縮率を実現する方法です。
ブログに載せる画像を圧縮する目的は、容量を軽くして表示速度を向上させること。
そのため、ブログ用の画像を圧縮するときは、非可逆圧縮方法の方が適しています。
本ブログで紹介するWebアプリやプラグインは、非可逆圧縮で画像の容量を削減していますよ。
ブログに適切な画像の大きさと容量
「ブログに載せる画像の大きさや容量は、どれくらいにすればいいの？」
と疑問を抱きますよね。
結論、ブログに載せる画像の大きさや容量は以下の値にしましょう。
- アイキャッチ画像：横幅1,200px
- ブログ内画像：1,000px
- 容量：200KB以下
アイキャッチ画像：横幅1,200px
アイキャッチ画像は、横幅を1,200pxにしましょう。
画像の横幅を1,200pxにすることで、「Google Discover」に表示される可能性があります。
「Google Discover」とは、ユーザーの情報をもとに、興味・関心を持ちそうなコンテンツを自動で表示する機能のこと。
スマホの「Googleアプリ」や「Google Chrome」などのアプリを立ち上げると、検索窓の下に表示されます。
「Google Discover」に記事が表示されることで、アクセス数を伸ばすことが可能です。
この「Google Discover」に表示されるためには、画像の横幅を1,200px以上にすることがGoogleから推奨されています。
サイズの大きな画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。
そのため、Google Discoverに表示されるアイキャッチ画像は、Googleの推奨値に基づいて横幅1,200pxに設定しましょう。
記事内の画像：横幅1,000px
記事の中で使う画像は、横幅を1,000pxにしましょう。
記事内の画像は以下の大きさで作成することがおすすめ。
- 横幅：1,000
- 縦幅：563
- 縦横比：16:9
記事内の画像は、ブログ記事の横幅に合わせることが最適なサイズです。
ブログの横幅は、使用するWordPressテーマに依存します。
しかし、どのWordPressテーマを使っても横幅が1,000pxを超えることは滅多にありません。
そのため、横幅を1,000pxに設定することがおすすめ。
ブログの表示幅よりも画像の幅が大きい場合は、自動的に大きさを調整して表示してくれますよ。
ブログの横幅を調べる方法
横幅1,000pxというのは、大抵の環境で問題なく表示できる大きさです。
そのため、ブログによっては最適値ではないことがあります。
もし画像をブログの最適値に設定したい場合は、「デベロッパーツール」で自身のブログの横幅を調べましょう。
デベロッパーツールでブログの幅を調べる方法はこちら。
- Google Chromeでブログ記事のページを開く
- デベロッパーツールを起動する
Windows：Ctrl+Shift+「I（アイ）」、もしくはF12
Mac：option + command + 「I（アイ）」 - デベロッパーツールの左上にある矢印のついたアイコンを選択する
- ブログの本文表示エリアをクリックする
- デベロッパーツールのボックスから幅を確認する
本ブログは、「THE THOR」というWordPressテーマを使っていますが、記事の横幅は1,020pxでした。
横幅が1,000pxよりも大きい理由としては、サイドバーのエリアを削っているからです。
このように、ブログの設定やWordpressテーマによって横幅が変わります。
画像を最適な大きさにして容量を最小限に抑えたいなら、「デベロッパーツール」を使ってブログの横幅を調べましょう。
画像容量：200KB以下
「画像の容量ってどのくらいが適切なの？」
と悩みますよね。
ブログに載せる画像一枚あたりの容量は、「200KB以下」を目安にしましょう。
読者がモバイル回線でもストレスなくページを表示するために、Googleはページの容量を1.6MB以内に抑えることを推奨しています。
合計バイトサイズを 1,600 KiB 未満に抑えるようにします。 この目標は、10 秒以下の操作可能時間を達成しながら、理論的に 3G 接続でダウンロードできるデータ量に基づいています。
例えば、フリー素材はJPEG形式でも500KB前後であることが多いです。
そのまま画像を使うと、1.6MB以下に抑えるためには、2枚しか載せられません。
しかし、画像一枚あたりの容量を200KB以下に圧縮すれば、一記事の中に5〜6枚ほど画像を載せることが可能です。
本ブログは一記事あたり、画像を5枚くらい載せているので、容量を200KB以下にすれば記事全体の容量を1.6MB以下に抑えることができています。
画像が多いときは圧縮率を高くしよう
記事内容によっては、6枚以上画像を使うことがありますよね。
もし画像が多くなるのであれば、一枚あたりの容量をもっと削減することが必要になります。
例えば、本ブログでスクショした画像をもとに説明する記事の場合、画像一枚あたり100KBあたりを目安に圧縮していますよ。
100KBまで圧縮すれば、一記事あたり12〜13枚の画像を載せることが可能です。
画像が多い記事の場合、記事全体で1.6MBを超えないように画像容量を管理しましょう。
ブログの画像を圧縮できるおすすめWebアプリ3選
ブログの画像を圧縮できるおすすめのWebアプリはこちら。
- Optimizilla
- Squoosh
- TinyPNG
どれも使いやすいアプリなので、ぜひ試してみてください。
Optimizilla
「Optimizilla」は、画像をアップロードするだけで圧縮できる無料のWebアプリ。
「Optimizilla」を使えば、画質をほとんど劣化させることなく、大幅に画像容量を圧縮することが可能です。
「Optimizilla」の概要
| アカウント登録 | 不要 |
| 料金 | 無料 |
| サイト言語 | 日本語 |
| ファイル形式 | PNG, JPEG, GIF |
| 機能 | 画像圧縮 |
「Optimizilla」の特徴
- 一度に20枚まで画像を一括で圧縮できる
- 圧縮率を調整できる
- セキュリティ対策がある
- アップロードする画像の容量上限がない
「Optimizilla」をおすすめしたい人
- 一括で画像を圧縮したい人
- 自分で圧縮率を調整したい人
- 容量の大きい画像を圧縮する人
「Optimizilla」の使い方や詳細な情報は、こちらの記事をご覧ください。
「Optimizillaの使い方を知りたい」 「Optimizillaって何がいいの？」 と考えている人はいませんか？ 私も「Optimizilla」を使っていますが、簡単に画像を圧縮することができるので、ブログ運営におす[…]
Squoosh
「Squoosh」は、画像の圧縮、ファイル形式の変更、画像サイズの変更ができる多機能なWebアプリです。
「Squoosh」を使うことで、画像を最適化するための処理を完結することができます。
「Squoosh」の概要
| アカウント登録 | 不要 |
| 料金 | 無料 |
| サイト言語 | 英語 |
| ファイル形式 | PNG, JPEG, GIF, WebP, BMP |
| 機能 | 画像圧縮、ファイル形式の変換、リサイズ |
| その他 | デスクトップアプリあり スマホ対応 |
「Squoosh」の特徴
- 画像圧縮・ファイル形式の変更・リサイズが可能
- 画像を一枚ずつ圧縮する
- 情報漏洩の心配がない
- 微調整ができる
「Squoosh」をおすすめしたい人
- 一つのツールで画像を最適化したい人
- 圧縮率と画質を両立させたい人
- 一度に多くの画像を圧縮しない人
- ファイル形式をWebPに変換したい人
「Squoosh」の使い方や詳細な情報は、こちらの記事をご覧ください。
「Squooshってどんなツール？」 「Squooshの使い方を知りたい」 と悩んでいる人はいませんか？ 私も「Squoosh」を使ったことがありますが、画像をの圧縮だけでなく、ファイル形式の変換やリサイズもできるので、ブ[…]
TinyPNG
「TinyPNG」は、複数の画像を一括で圧縮できるWebアプリです。
圧縮率を調整する必要がないので、自動でいい感じに画像を圧縮したい人は、「TinyPNG」を使ってみましょう。
「TinyPNG」の概要
| アカウント登録 | 不要 |
| 料金 | 無料、有料プランあり |
| サイト言語 | 英語 |
| ファイル形式 | PNG, JPEG, WebP, APNG |
| 機能 | 画像圧縮、ファイル形式の変換 |
| その他 | WordPressのプラグインあり |
「TinyPNG」の特徴
- 一度に20枚まで画像を一括で圧縮できる
- 一度に3枚までファイル形式を変換できる
- セキュリティ対策がある
- 圧縮率が自動で設定される
「TinyPNG」をおすすめしたい人
- 複数の画像を一括で圧縮したい人
- 自分で圧縮率を調整するのが面倒くさい人
- 容量の大きい画像を圧縮しない人
「TinyPNG」の使い方や詳細な情報は、こちらの記事をご覧ください。
「TinyPNGの使い方を知りたい」 と考えている人はいませんか？ 「TinyPNG」は、画質をほとんど低下させず、高い圧縮率で画像の容量を削減できるので、ブログ運営におすすめの画像圧縮ツールです。 自動でいい感じに画像を[…]
ブログの画像を圧縮できるおすすめプラグイン3選
ブログの画像を圧縮できるおすすめのプラグインはこちら。
- TinyPNG – JPEG, PNG & WebP image compression
- EWWW Image Optimizer
- Imagify
プラグインは最初の設定が少し手間ですが、一度設定すれば自動で画像を圧縮してくれます。
WordPressを使っている人は、プラグインの導入がおすすめです。
TinyPNG – JPEG, PNG & WebP image compression
「TinyPNG – JPEG, PNG & WebP image compression」は、WordPressにアップロードした画像を自動で圧縮してくれるプラグインです。
画質の劣化が少なく、圧縮率も高いバランスの取れたツールですよ。
「TinyPNG – JPEG, PNG & WebP image compression」の概要
| アカウント登録 | 必要 |
| 料金 | 無料、有料プランあり |
| サイト言語 | 英語 |
| ファイル形式 | PNG, JPEG, WebP |
| 機能 | 画像圧縮、リサイズ、ファイル形式の変換 |
| その他 | Webアプリ版がある |
「TinyPNG – JPEG, PNG & WebP image compression」の特徴
- 圧縮率が高い
- 自動で画像圧縮とファイル形式の変換ができる
- 画質の劣化少ない
- 月500枚まで圧縮できる
「TinyPNG – JPEG, PNG & WebP image compression」をおすすめしたい人
- 画像容量を大きく削減したい人
- 自動で画像を圧縮したい人
- 画質を保ちたい人
「TinyPNG – JPEG, PNG & WebP image compression」の使い方や詳細な情報は、こちらの記事をご覧ください。
「プラグイン版TinyPNGの使い方を知りたい」 と考えている人はいませんか？ プラグイン版の「TinyPNG」は、一度導入すれば画像をアップロードするだけで圧縮してくれるので、画像圧縮が楽になります。 画像を圧縮する作業[…]
EWWW Image Optimizer
「EWWW Image Optimizer」は、画像圧縮だけでなく、リサイズ、ファイル形式の変更も自動化することができるプラグインです。
「EWWW Image Optimizer」だけで、画像を最適化するために必要な処理を行うことができます。
「EWWW Image Optimizer」の概要
| アカウント登録 | 不要 |
| 料金 | 無料、有料プランあり |
| サイト言語 | 日本語対応 |
| ファイル形式 | PNG, JPEG, WebP |
| 機能 | 画像圧縮、リサイズ、ファイル形式変換 |
「EWWW Image Optimizer」の特徴
- 自動で画像圧縮、リサイズ、ファイル形式の変換ができる
- 画像をWebP形式に変換できる
- Exif情報を削除できる
- 画質の劣化が少ない
- 既存の画像も一括で圧縮できる
- 圧縮率が低い
「EWWW Image Optimizer」をおすすめしたい人
- 一つのプラグインで画像を最適化したい人
- 高画質の画像を圧縮しない人
- 一度に圧縮する画像数が少ない人
「EWWW Image Optimizer」の使い方や詳細な情報は、こちらの記事をご覧ください。
「EWWW Image Optimizerの使い方を知りたい」 と考えている人はいませんか？ 「EWWW Image Optimizer」は、一度インストールすれば画像を自動で圧縮してくれるので、効率よく画像容量を削減できます。[…]
Imagify
「Imagify」は、画像圧縮とファイル形式の変換ができるプラグインです。
可逆・非可逆圧縮を選択できるので、画質と画像容量のバランスを取りやすいですよ。
「Imagify」の概要
| アカウント登録 | 必要 |
| 料金 | 無料、有料プランあり |
| サイト言語 | 英語 |
| 対応ファイル形式 | PNG, JPEG, GIF, WebP, PDF ファイル |
| 機能 | 画像圧縮、ファイル形式変換 |
「Imagify」の特徴
- 圧縮率がかなり高い
- 可逆・非可逆圧縮を選択可能
- すでにアップロードされている画像も一括で圧縮可能
- WebPに変換できる
- 毎月20MBまで圧縮可能
「Imagify」をおすすめしたい人
- 画像容量を大幅に削減したい人
- 画質を優先したい人
- 圧縮する画像が多くない人
「Imagify」の使い方や詳細な情報は、こちらの記事をご覧ください。
「Imagifyの使い方・設定方法を知りたい」 と考えている人はいませんか？ 「Imagify」は、「可逆圧縮」と「非可逆圧縮」を選択できるプラグイン。 画質と圧縮率のバランスをとりたい人は、「Imagify」がおすすめで[…]
【圧縮だけじゃない】ブログの画像容量を削減する方法
ブログに載せる画像容量を削減する方法は、画像圧縮以外にもあります。
- リサイズ
- ファイル形式の変換
- 写真よりイラストを使う
画質を保つためには、
「画像の選定→リサイズ→ファイル形式の変換→圧縮」
という順番で画像を最適化しましょう。
リサイズ
画像をリサイズすることで、容量を削減することができます。
リサイズとは、ブログに合わせて画像の縦幅と横幅を調整すること。
ブログでは、横幅が大きい画像は自動でサイズを変更して表示してくれます。
しかし、画面に合わせて表示させているだけで、容量が小さくなったわけではありません。
縦横幅が大きい画像は容量も大きいので、リサイズすることで容量を削減することができますよ。
リサイズは「Canva」で画像を編集するか、プラグインを使って自動で調整する方法がおすすめです。
ファイル形式の変換
ブログの画像でよく使われるファイル形式は以下の3つがあります。
- PNG：画質が優れている、容量は重い
- JPEG：画質はそこそこ、容量は軽い
- WebP：画質はそこそこ、容量がとても軽い
上記の中でもWebPが特におすすめです。
WebPとは、画質をほとんど劣化させることなく、画像容量を大幅に圧縮することができる画像フォーマットのこと。
PNGやJPEGよりも画像容量が削減され、ページ表示速度の向上が期待できます。
ブログでは表示速度を向上させるメリットが大きいので、画像はWebP形式に変換しましょう。
PNGやJPEGをWebPに変換したいなら、「サルワカ道具箱」というWebアプリがおすすめです。
画像を選択するだけでWebP形式に変換できるので、ぜひ試してみてください。
写真よりイラストを使う
ブログの画像に写真ではなくイラストを使うことで、画像容量を下げることができます。
例えば、見出しの後に入れる画像は、小休憩の役割なので容量の大きい写真を使う必要はないです。
実際、本ブログでも写真を使っているのは、アイキャッチとスクショだけですね。
写真を使う画像を絞るだけで、容量削減につながりますよ。
ブログに使える写真やイラストを見つけられるサイトはこちらの記事で紹介しています。
「ブログで使えるフリー素材はどこで選べばいいの？」 「素材を選ぶときに気を付けることは何かある？」 というような疑問を抱えている人はいませんか？ 私もブログで写真やイラストの素材を使いたかったのですが、どうやって選べばいい[…]
まとめ：ブログ画像を圧縮して読み込み速度を向上しよう
本記事では、
「ブログの画像を圧縮する方法を知りたい」
という疑問について、画像を圧縮する目的や圧縮方法を解説しました。
改めて内容を整理するとこちら。
ブログの画像を圧縮する理由
- SEO対策
- 読者の離脱防止
ブログに適切な画像の大きさと容量
- アイキャッチ画像：横幅1,200px
- 記事内の画像：横幅1,000px
- 画像容量：200KB以下
画像を圧縮できるWebアプリ
- Optimizilla
- Squoosh
- TinyPNG
画像を圧縮できるプラグイン
- TinyPNG – JPEG, PNG & WebP image compression
- EWWW Image Optimizer
- Imagify
表示までに時間がかかるサイトは、読者に大きなストレスを与えます。
読者に記事を読んでもらうためにも、画像を圧縮してページの表示速度が改善しておきましょう。
