WordPressブログの最適な画像容量(ファイルサイズ)の目安と圧縮方法【2021年】
※本ページにはプロモーションが含まれている場合があります。
・WordPressでの最適な画像サイズ(容量)を知りたい！
・ページ全体の最適なサイズの目安を知りたい！
・画像サイズを小さくする方法と裏技を知りたい！
本記事の内容
- 最適な画像サイズ(容量)の目安と判断方法
- 画像サイズ(容量)を小さくする4つの方法と裏技
- 画像サイズ(容量)に関するQ&A
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
本記事を読むと、表示速度を速く保ってSEOに強いブログにするための画像サイズ(容量)の目安と、そのサイズまで小さくする方法がわかります。
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
＼ 月間1300万PVのプロが解説 ／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！
目次
WordPressで最適な画像サイズ(容量)の目安
キレイな画像を使いすぎると画像サイズ(容量)がどんどんかさんでページの表示速度が遅くなります。
フリー素材サイトでダウンロードした画像は1枚で平気で1MBや2MBを超えるので、そのまま使うとページの表示速度は壊滅的です。
そんな方のためにまずはWordPressで使う画像のサイズ(容量)の目安を解説します。
1枚あたり50KB~100KBがベスト
ページ速度を速く保つためにベストの画像サイズは1枚あたり50KB~100KBだと言われています。
もちろん使う画像の枚数やブログそれぞれで速度も異なるので、
というわけにはいかないですが、WordPressで運営するブログなら50KB~100KBを目安にしておいてOKです。
100KB~300KBも許容範囲
厳し目に基準を設けるなら50KB~100KBですが、100KB~300KBまでならページ速度を考慮しても許容範囲です。
そこまで表示速度を落とさずに使える画像サイズの範囲内なので、全ての画像が100KBに収まらなくてもOKです。
Google推奨の1ページの合計サイズ(容量)
画像1枚あたりのサイズの目安は以上の通りですが、Googleが推奨するページ全体のサイズというものがあり、
Googleは1ページの合計のサイズは最大1,600KBまでを推奨しています。
Aim to keep your total byte size below 1,600 KiB.
Avoid enormous network payloads
ページの表示速度を計測するPageSpeed Insightsでは以下のようにページの合計サイズに関して判定をしてくれるので、合計のサイズも計測してみましょう。
WordPressの画像サイズ(容量)が適切か判断する方法
1枚数あたりの画像サイズが最適かどうかを判断するには、以下の手順で判断します。
- 画像をリサイズ(縮小)して画像自体を小さくする
- 画像を圧縮してファイルサイズを小さくする
- その結果が50KB~100KBなら完璧
WordPressで画像を使うときには、使いたい画像をそのまま使うわけではなく、
- リサイズ：画像自体のサイズ(ピクセル)を最低限必要な大きさまで小さくすることで画像サイズ(容量)も小さくする
- 圧縮：見た目が変わらないようにデータを簡略化して画像サイズ(容量)を小さくする
ということは必須です。
ですので、これらの処理を加えた結果の画像サイズが50KB~(緩めの場合)300KBであればOKということになります。
WordPressの画像サイズ(容量)を小さくする4つの方法
画像サイズ(容量)を小さくするためには、先ほど紹介した「リサイズ」と「圧縮」を含めて以下の4つの方法があります。
- 方法①：画像をリサイズする
- 方法②：画像を圧縮する
- 方法③：サイズの軽い画像形式に変換する
- 方法④：メタデータの削除などの最適化をする
- 【裏技】圧縮を2回かける
WordPressで画像を使うときはこれらの方法を全て行うのがおすすめです。
それぞれについて順番に解説します。
方法①画像をリサイズする
まずは画像のリサイズです。
リサイズとは、画像の見た目のサイズを変更することで、画像の幅や高さのピクセル数を変更することです。
画像をリサイズして見た目のサイズを小さくすることで、画像のファイルサイズ自体も小さくなります。
フリー素材サイトでダウンロードする画像は必要以上に画像が大きいので、リサイズして使います。
ブログの最適な画像の見た目のサイズ(ピクセル)については以下の記事で解説しています。
>> WordPressブログに最適な画像サイズ(ピクセル)の目安とリサイズ方法【2021年】
画像のリサイズ方法は以下の記事で解説。
>> 【2021年最新】Imsanityの設定方法とおすすめの使い方：画像リサイズプラグイン【WordPress】
方法②画像を圧縮する
次は画像の圧縮です。
画像の圧縮とは、画像の見た目をあまり変えないようにしながら画像データを簡略化して画像のファイルサイズを小さくすることです。
画像を圧縮することで、画像の見た目も見た目のサイズもほとんど変えることなく、ファイルサイズを90%前後軽減できることも。
WordPressの画像を自動で圧縮するなら
画像をドラッグ&ドロップで簡単に圧縮できるサイトなら
がおすすめです。
それぞれ以下の記事で使い方を解説しています。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
>> Googleの画像圧縮アプリSquooshが便利！使い方を画像付きで解説！
>> 【超簡単】画像を圧縮して軽量化！TinyPNGの使い方【無料】
方法③サイズの軽い画像形式に変換する
次は画像形式の変換です。
圧縮と同時に行われることも多いですが、
PNGやJPEGなどの画像の形式を変換することで画像サイズを小さくすることができます。
やり方とおすすめのフォーマットは後ほど「画像サイズ(容量)が小さい画像形式」の見出しで解説します。
方法④メタデータの削除などの最適化をする
4つ目はメタデータの削除などの最適化です。
画像のファイルには、見た目の情報だけでなく画像が撮影された日付や位置情報などの余分なデータも含まれています。
つまりそれらのメタデータを削除することで画像サイズを小さくすることができます。
「方法②画像を圧縮する」の見出しでも紹介したEWWW Image Optimizerでメタデータの削除などの最適化もすることができます。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
【裏技】圧縮を2回かける
通常はこれまでの4つの方法が基本ですが、圧縮を2回かけるという裏技もあります。
- 画像圧縮サイトで画像を圧縮する
- WordPressにアップロードする
- WordPressプラグインで再度圧縮する
という流れです。
アップロードする前に圧縮するには
WordPressで圧縮する際には
が、画質を落とさずに大幅に圧縮できるのでおすすめです。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
>> Googleの画像圧縮アプリSquooshが便利！使い方を画像付きで解説！
>> 【超簡単】画像を圧縮して軽量化！TinyPNGの使い方【無料】
画像サイズ(容量)が小さい画像形式
先述の通り、画像形式を変換することで画像サイズを小さくすることができるので、そのためにおすすめの画像形式をご紹介します。
JPEGとPNGの使い分け
まず、WordPressで使われている画像は基本は
- JPEG
- PNG
の2種類ですが、
この2つならJPEGを使うのがおすすめです。
PNGの画像は「透明度」の情報も含まれているので、その分だけJPEGよりも画像サイズが大きくなります。
MozJPEGとOxiPNG
そしてJPEGやPNGだけでなく、そこから約80%前後も圧縮できる画像形式もあります。
- JPEG画像ならMozJPEG
- PNG画像ならOxiPNG
という画像に変換・圧縮することで画質をほとんど落とさず大幅に画像サイズを小さくできます。
以下の画像はSquooshでMozJPEGに変換する場合の例ですが、画像サイズが90%も圧縮されています。
MozJPEGとOxiPNGにはSquooshで変換できます。
>> Googleの画像圧縮アプリSquooshが便利！使い方を画像付きで解説！
次世代フォーマットのWebP
一番おすすめの画像形式は、Googleもおすすめする次世代フォーマットのWebPという画像形式です。
WebPにすることで画像サイズを大幅に軽減できサイトの速度が大幅に向上します。
- JPEG
- PNG
- GIF
のどれでもWebPに変換して画像サイズを小さくできるのでとてもおすすめです。
以下の画像ではSquooshでWebPに変換・圧縮して画像サイズを92%削減しています。
>> WordPressでWebP画像に変換・対応させる3つの方法【WebP画像】
>> 【画像付き】EWWW Image OptimizerでWebP画像への変換を設定する方法
>> Googleの画像圧縮アプリSquooshが便利！使い方を画像付きで解説！
WordPressの画像容量(ファイルサイズ)に関するQ&A
Q. 圧縮やリサイズはプラグインと手動のどっちがおすすめ？
こんな心配をされる方もいるかもしれませんが、プラグインを使うことで
- 画像を自動で圧縮・リサイズしてくれるので時間を何倍も節約できる
- 圧縮・リサイズだけでなく最適化や読み込み遅延などの機能もあるので結果として読み込みを速くできる
という理由から、利便性でもサイト高速化の面でもプラグインがおすすめです。
Q. WordPressにアップロード済みの画像を圧縮・リサイズするには？
既にアップロード済みの画像を圧縮・リサイズする場合もEWWW Image OptimizerやImsanityを使えば一括で自動でできます。
再度アップロードし直す必要はありません。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
>> 【2021年最新】Imsanityの設定方法とおすすめの使い方：画像リサイズプラグイン【WordPress】
Q. 写真とイラストで画像サイズに違いはある？
写真よりもイラストの方が画像サイズが小さい場合が多いです。
飾りのために画像を使うだけであれば、写真ではなくイラストを使うと画像サイズを節約できてサイト速度を改善できます。
無料のおすすめフリー素材サイトは以下の記事で紹介しています。
>> 【無料】ブログに使えるフリー画像素材サイトおすすめ34選
Q. 画像が重いページを特定する方法はある？
Googleアナリティクスを使うことで、表示速度が遅いページ(画像サイズが大きくて重いページ)を特定することができます。
上の画像のように、平均読み込み時間をページごとに確認することができます。
読み込み時間が長いページには画像サイズが大きな画像がある可能性が高いです。
Googleアナリティクスで以下の手順で確認できます。
- Googleアナリティクスを開く
- 「行動」をクリック
- 「サイトの速度」をクリック
- 「ページ速度」をクリック
WordPressの画像サイズは圧縮して最適化しよう
WordPressブログに挿入する画像の最適な画像サイズ(容量)やサイズを小さくする方法について解説しました。
何枚も画像を使っているとあっという間に合計の画像サイズが膨らんで、ページがどんどん遅くなります。
画像サイズを最適化することで、ページ速度が速くなりSEOの検索順位アップにも売上にもつながるので、この機会に改善しておきましょう。
ブログの最適な画像サイズ(ピクセル)については、以下の記事で解説しています。
>> WordPressブログに最適な画像サイズ(ピクセル)の目安とリサイズ方法【2021年】
リサイズ方法は以下の記事で、
>> 【2021年最新】Imsanityの設定方法とおすすめの使い方：画像リサイズプラグイン【WordPress】
圧縮方法は以下の記事で、
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
Google推奨のWebPを使う方法は以下の記事で解説しています。
>> WordPressでWebP画像に変換・対応させる3つの方法【WebP画像】
公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。
LINE参加者の声
400名が以上参加中！無料で読めます♪
＼ 最短で収益化 ／
