ブログ起業セミナーをプレゼント!

ブログで使う画像容量の目安と圧縮方法を徹底解説!

ブログで使う画像容量の目安と圧縮方法を徹底解説!
ずーみー

こんにちは!

ブログ起業コンサルタントのずーみー(⇒プロフィール)です^^

「ブログで使う画像の容量(=ファイルサイズ)は、どれくらいが目安なの?」

「どういう手順・ツールで画像を圧縮すると、容量が一番小さくなるの?」

今回は、そんな読者さんのご質問にお答えします。

現在のSEO対策で絶対に欠かせないのは、ページの表示速度の改善です。

今までもページの表示速度は重要でしたが、2021年6月中旬からGoogleがランキング要因にページの表示速度(=Core Web Vitals)を導入すると発表したため、その重要性は増しています。(⇒参考:Google公式ブログ

ページの表示速度の改善において特に有効なのは、画像の容量を小さく圧縮することです。

ブログ初心者の多くは画像容量まで気が回らず、大きくて重たい画像を使って、低速度のSEOに弱いブログを作ってしまいがちです。

でも、そういう人でも、この記事で紹介する無料ツールを使えば、画像サイズをリサイズしたり、容量を圧縮したりすることで、ブログの表示速度を4分の1以下に改善することも可能です。

ここからは、ブログで使う画像の容量の目安と、画像をできるだけ小さく圧縮する4つの方法を徹底解説します!

Googleが推奨する1ウェブページあたりの合計サイズとは?

Googleが推奨する1ウェブページあたりの合計サイズとは?

あなたは、Googleが推奨する1ウェブページあたりの合計サイズを知っていますか?

Googleが推奨する1ページあたりの合計サイズは、1.6MBです。(⇒出典

1つのウェブページには、文章や画像、動画など、さまざまな素材が使われます。

Googleは、それらの合計サイズを重視しており、合計サイズの小さいウェブページほどSEO効果があると言われています。

一般的なウェブページの合計サイズの平均は2.4MBなので、1.6MBはかなり厳しい基準です。

この厳しい基準に合格するためには、合計サイズを大きくする原因になりやすい写真や画像のデータサイズを、極力小さくしなければいけません。

ずーみー

なお、ウェブページの合計サイズを調べるときは、GTmetrixというツールがおすすめです。

当ブログのトップページを測定すると、合計サイズは973KBでした。

GTmetrixでトップページを測定した結果
トップページの合計サイズは973KB|GTmetrix

 

ブログで使う画像のファイルサイズは50KB前後を目安に!

ブログで使う画像のファイルサイズは50KB前後を目安に!

では、ブログで使う画像のファイルサイズは、どれくらいにすれば良いのでしょうか?

僕は経験上、50KB前後を目安にしています。

ひとつの画像につき、できれば30KBから70KBくらいの範囲内におさめるのが理想です。

100KBを超える画像は、最近の基準ではかなり重たいので注意してください。

ずーみー

これからお話しする画像圧縮方法を使えば、ほとんどの画像を50KB以下まで軽くできるので安心してくださいね!

 

画像容量を小さく圧縮する4つの方法とは?

では、画像の容量をできるだけ小さく圧縮するには、どうすればいいのでしょうか?

その方法とは、次の4つです。

画像の容量を小さく圧縮する4つの方法

  1. なるべく写真ではなくイラストを使う
  2. ワードプレステーマの横幅に合わせて画像をリサイズする
  3. 画像を適切なファイル形式で書き出す(JPEG・PNG)
  4. 画像圧縮ツールを使う

 

①:なるべく写真ではなくイラストを使う

写真は、イラストに比べてファイルの容量が大きくなりやすいという特徴があります。

そのため、使用する画像を選ぶ時点で、なるべく写真ではなくイラストを選びましょう。

ただし、イラストならなんでも良いわけではありません。

使っている色数が少ない「フラットデザイン」のイラストを選ぶのがおすすめです。

フラットデザインとは、立体感がなく平面的でシンプルなデザインのことです。

たとえば、次のような画像がフラットデザインです。

この画像は容量は、なんとたった12KBしかありません!

フラットデザインのイラストの例(12KB)
フラットデザインのイラストの例(12KB)
ワンポイントアドバイス

Pixabayなどの海外の画像素材サイトで、フラットデザインの無料イラストを探すときは、「探したいイメージの英単語」+「flat」で検索するとヒットしやすいですよ!

 

②:ワードプレステーマの横幅に合わせて画像をリサイズする

使用するワードプレステーマによって、画像の「推奨横幅」が違うことを知っていますか?

たとえば、STORK19の推奨横幅は728px、SANGOは680px、JINは760pxです。

ブログで使用する画像を決めて文字などを入れたら、あなたがお使いのワードプレステーマの推奨横幅に合わせて、画像をリサイズ(=縦横の大きさを変更すること)しましょう。

たとえば、画像の素材サイトでは、横幅1920pxや1600pxの画像がよく配布されていますが、推奨横幅に合わせてリサイズするだけで、容量が約4分の1以下にまで小さくなります。

画像のリサイズは、Photoshopなどの画像編集ソフトを使って行うのが一般的ですが、Windowsなら「ペイント」、Macなら「プレビュー」という最初から入っているアプリでも可能です。

ずーみー

ちなみに、旧ストークやSTORK19を使っている人は、次の記事で画像圧縮以外のサイト高速化のコツを解説しているので、ぜひ読んでみてください!

【サイト高速化】STORK19でモバイル80点以上を目指す方法

 

③:画像を適切なファイル形式で書き出す(JPEG・PNG)

画像をワードプレステーマの推奨横幅に合わせてリサイズしたら、適切なファイル形式で書き出しましょう。

現在使われている主なファイル形式は、JPEGPNGです。

JPEGとPNGには、次の特徴があります。

  • JPEG:色数の多い画像の圧縮に適しているので、主に写真の圧縮に使用。
  • PNG:色数の少ない画像の圧縮に適しているので、主にイラストの圧縮に使用。

例外もありますが、基本的に写真はJPEG、イラストはPNGと覚えてください。

たとえば、次の画像は色数の少ないイラストなので、PNGが適しています。

PNGに適した画像
PNGに適した画像(19KB)

なお、この工程も、Photoshopなどの画像編集ソフトを使って行うのが一般的ですが、ペイント(Windows)やプレビュー(Mac)を使って行うことも可能です。

注意点

JPEGとPNGを間違えて書き出すと、ファイルの容量が極端に大きくなるケースがあるので注意してください。

たとえば、色数の多い写真をPNGで書き出すと、JPEGで書き出したときよりもファイルサイズが倍以上大きくなるケースがあります。

 

④:画像圧縮ツールを使う

あなたが適切なファイル形式を選んで画像を書き出したとしても、実は使用するツールによって、書き出した後のファイルサイズに大きな差が出ます。

たとえば、ある画像をツールAで書き出すと100KBになるのに、ツールBで書き出すと200KBになってしまったりするのです。

先ほど紹介したペイント(Windows)やプレビュー(Mac)は画像圧縮に強くないので、画像圧縮に強いツールを使って画像を書き出しましょう。

画像圧縮に強い無料ツールの代表格は、次の3つです。

  • TinyJPG(PNG):細かいことはできないが使いやすい。パンダがかわいい。
  • Optimizilla:画像を見ながら細かく圧縮率の調整ができる。日本語なのが良い。
  • Squoosh:Google公式の画像圧縮ツールで一番高性能!

僕のおすすめは、Google公式の画像圧縮ツールであるSquoosh(スクーシュ)です。

ここからは、Squooshを使って画像を圧縮する方法を解説しますね。

 

【神ツール】Squooshを使って画像を圧縮する方法

Squooshは、ブラウザ上で使えるフリーの画像圧縮ツールです。

Squooshの特徴は、次の4つです。

Squooshの特徴
  • 画像をリサイズできる。
  • 画像を見ながら細かく圧縮率の調整ができる。
  • ファイル形式を選択して書き出すことができる。
  • 特にJPEGの圧縮に強い。

先ほどご紹介した画像圧縮ツールのTinyJPG(PNG)とOptimizillaでは、画像のリサイズとファイル形式を選択して書き出すことができません。

Squooshを使えば、画像圧縮に必要なことが全てまとめてできるので、大変便利です。

ではさっそく、Squooshを使って画像を圧縮してみましょう!

まず、Squooshにアクセスしてください。

Squooshのホーム画面で、圧縮したい画像ファイルを直接ドラッグ&ドロップするか、「select an image」をクリックして画像を選択します。

Squooshのホーム画面

今回は、12.9MBもある大きな写真(JPEG)を選んでみました。

まず、写真を見やすいサイズに縮小します。(既に見やすいサイズの人はそのままでOK)

画面左がオリジナル画像で、画面右が圧縮後の画像です。

画像を見ながら圧縮率を調整できるのが、Squooshの便利なところです。

このままだと写真のサイズが大きすぎるので、「Resize」にチェックを入れます。

「Resize」にチェックを入れる

元の画像は横幅が5568pxもあるので、ワードプレステーマの推奨横幅に変更しましょう。

「Width」に推奨横幅の数値を入力します。(今回はSTORK19の728px)

横幅を変更すると、それに合わせて縦幅(Height)も勝手に変更してくれますよ。

「Width」に推奨横幅の数値を入力

「Quality」のバーを動かして、画像を見ながら圧縮率を調整します。

JPEGの場合、75前後が良いと思います。

画像を見ながら圧縮率を調整

最後に、書き出すファイル形式を選択します。

JPEGの場合は、「MozJPEG」というファイル形式がおすすめです。

MozJPEGは、通常のJPEGよりも高圧縮かつ高品質に書き出せるファイル形式です。

右下の青い「保存」ボタンを押して、画像をダウンロードしたら作業完了です。

12.9MBあった画像を、400分の1の32.3KBまで小さくすることができました!

書き出すファイル形式を選択して保存

 

Q&A

ブログの画像圧縮に関するQ&A

最後に、ブログの画像圧縮についてよくいただくご質問に回答します。

 

Q1:プラグインを使って画像を圧縮したらダメなの?

WordPressプラグインのEWWW Image Optimizerを入れておくと、自動で画像を圧縮して、ある程度小さくしてくれます。

ただし、精度はそれほど高くありません。

ちょっと面倒ですが、今回紹介した方法で圧縮するのが一番効果があります。

 

Q2:既にブログにアップした画像を圧縮するには?

WordPressプラグインのEWWW Image Optimizerを使うと、既にブログにアップした画像を一括で圧縮してくれます。

ただし、精度はそれほど高くありません。

Squooshなどのツールを使って、画像を1枚ずつ圧縮して再アップするのがベストです。

 

Q3:画像の解像度は考えなくていいの?

素材サイトで配布される画像は、印刷に対応するため高解像度(300dpi)な場合があります。

そのままだとファイルサイズが大きくなりすぎるため、画像編集ソフトで書き出すときに、ウェブ用の解像度(72dpi)に落とす必要があります。

Squooshなどのツールを使うと、自動でウェブ用の解像度に落としてくれて便利です。

 

ずーみー

なお、次の記事では、これから本気でブログで稼ぎたい人におすすめの20個のツールをご紹介しているので、ぜひチェックしてください!

迷ったらコレ!ブログ運営に必須のおすすめツール20選を紹介

 

▼当記事監修・セッジさんのブログ▼Sedge Design

 

▼この記事が「ためになった!」と思ったら、ポチッと押してくれると嬉しいです^^

にほんブログ村 ライフスタイルブログ セミリタイア生活へ

3件のコメント

いつも大変貴重な情報をありがとうございます。画像のサイズなどわかりませんでした。

ずーみーさん、こんにちは!
「ブログで使う画像の容量の目安と、画像を小さく圧縮する4つの方法」
とても分かりやすかったです。
ブログを始める時に活かしますね。
ありがとうございます。

毎度セッジさんのデザイン理論は勉強になります。ファイルサイズとか気にしたこともなかったので笑

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUT ME

ずーみー
早大→テレビディレクター→会社をクビになり映像制作で起業。現在はブログ起業コンサルタントとして活動中。2018年からブロガー向けサロン『ずーみースクール』主宰。80人に1PVあたり10円以上の高単価ブログの作り方を教えてます。少ないアクセス数のブログで収益化するのが得意。3児の父。