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

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

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

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

最近のSEO対策で絶対に欠かせないのは、サイトの表示速度の改善です。

そして、そのために特に意識しないといけないのが、画像の容量(=ファイルサイズ)をできるだけ小さく圧縮することです。

なぜなら、画像の容量が少し大きくなっただけで、サイトスピードが極端に遅くなるからです。

では、ブログで使う画像の容量は、どれくらいが目安なのでしょうか?

また、どのような手順で画像を圧縮すると、容量が一番小さくなるのでしょうか?

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

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

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

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

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

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

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

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

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

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

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

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

 

ブログで使う画像のファイルサイズは200KBまでが目安

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

僕は経験上、200KB(=0.2MB)までをひとつの目安にしています。

以前は300KBまでを目安にしていましたが、最近Googleの基準がより厳しくなったので、目安も厳しくしました。

200KBを超える画像は、表示速度が遅くなるので、使わない方がおすすめです。

あなたも、ブログで画像を使用するときに、ひとつの目安にしてください。

ずーみー
これからお話しする画像圧縮方法を使えば、ほとんどの画像が100KB以下になるので安心してくださいね!

 

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

画像容量を小さく圧縮する3つのコツとは?

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

その方法とは、次の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でモバイル96点出した方法まとめ

【サイト高速化】STORK19でモバイル96点出した方法まとめ

 

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

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

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

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

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

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

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

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

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

注意点

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

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

 

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

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

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

先ほど紹介したペイント(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:プラグインを使って画像を圧縮したらダメなの?

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

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

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

Q:既にブログにアップした画像を圧縮するにはどうしたらいいの?

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

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

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

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

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

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

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

 

まとめ

以上が、ブログで使う画像の容量の目安と、画像を小さく圧縮する4つの方法の解説でした。

ファイルサイズの大きな画像を使うと、SEOで不利になります。

あなたも、ぜひこの記事を参考に、なるべくファイルサイズの小さい画像を使いましょう^^

なお、そのほかのSEOのコツについては、次の記事でお話ししています。

SEO初心者が狙うべき月間検索ボリュームの目安とは?

SEO初心者が狙うべき月間検索ボリュームの目安とは?

ブログの適切な更新頻度とは?毎日更新って必要?

ブログの適切な更新頻度とは?毎日更新って必要?

 

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

 

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

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

2 件のコメント

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

  • コメントを残す

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