ブログで使用する画像のファイルサイズの目安とは?

ブログで使用する画像のファイルサイズの目安とは?
ずーみー
こんにちは!

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

最近のGoogleは、サイトの表示速度をとても重要視しています。

サイトの表示速度を高める上で、特に大切なのが、画像のファイルサイズ(=容量)です。

なぜなら、画像のファイルサイズが大きすぎると、表示速度が極端に遅くなるからです。

では、ブログで使用する画像のファイルサイズの目安とは、どれくらいなのでしょうか?

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

ブログで使用する画像のファイルサイズ(=容量)を考えるときに重要になるのは、1ウェブページあたりの合計サイズです。

1つのウェブページには、文章や画像など、さまざまなコンテンツが使用されます。

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

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

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

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

たとえば、GTmetrixで当ブログのトップページを測定すると、次の結果が出ました。

GTmetrixでトップページを測定した結果

トップページの合計サイズは973KB

 

ブログで使用する画像のファイルサイズの目安は300KB

Googleの推奨する合計サイズが1.6MBということは、あまり容量の大きい画像は使えません。

たとえば、「高画質な写真を使いたい!」と思って、1MBや2MBの画像を使うと、一気に容量がオーバーしてしまいます。

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

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

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

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

 

画像のファイルサイズを小さくする4つのコツとは?

ここまでは、ブログで使用する画像のファイルサイズの目安を解説してきました。

では、画像のファイルサイズを小さくするには、一体どうすればいいのでしょうか?

画像のファイルサイズを小さくするコツは、次の4つです。

画像のファイルサイズを小さくする4つのコツ

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

 

使用するワードプレステーマのメインコンテンツの横幅に合わせる

ワードプレステーマによって、メインコンテンツの横幅が微妙に違います。

たとえば、STORKのメインコンテンツの横幅は728px、SANGOは680px、JINは760pxです。

それらの横幅に合わせて、画像を書き出すようにしましょう。

また、素材サイトでは、横幅1920pxや1600pxの画像がよく配布されています。

そのままのサイズで画像を使用すると、メインコンテンツの横幅に合わせたときとくらべて、ファイルサイズが4倍以上になることもあるので、注意してください。

 

適切なファイル形式で書き出す(JPEG・PNG)

適切なファイル形式で画像を書き出すと、ファイルサイズが小さくなります。

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

JPEGは、色数の多い写真やイラストの圧縮に適しています。

PNGは、色数の少ないイラストや、単色背景と文字だけのような画像の圧縮に適しています。

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

PNGに適した画像

PNGに適した画像(19KB)

反対に、適切なファイル形式で画像を書き出さなかった場合、ファイルサイズが極端に大きくなるケースがあります。

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

あなたは、くれぐれも注意してくださいね。

 

画像圧縮に強いソフトを使う

あなたが適切なファイル形式を選んでも、使用するソフトによって、画像圧縮のクオリティに大きな差が出ます。

たとえば、ソフトAで書き出すと200KBなのに、ソフトBで書き出すと400KBになってしまったりするのです。

そのため、ファイルサイズを小さくするために、画像圧縮に強いソフトを使いましょう。

画像圧縮に特に強いのは、有料ですが、Adobe社のPhotoshopやIllustratorです。

でも、無料で画像を圧縮したいブロガーさんも多いですよね?

専門学校でデザインを教えている、デザイン講師ブロガーのセッジさんによると、無料の画像圧縮ツールでおすすめなのは、Optimiziraだそうです。

日本語であることと、画像を見ながら圧縮を調整できるのがポイントです。

 

写真ではなくイラストを使う

写真は、ファイルサイズが大きくなりやすいという特徴があります。

そのため、ファイルサイズを小さくしたい人は、色数の少ないイラストを使いましょう。

たとえば、最近よく見かけるフラットデザインのイラストは、スタイリッシュな見た目が人気ですが、機能面では、色数が少なくファイルサイズが小さくなるというメリットがあります。

フラットデザインのイラスト

フラットデザインのイラストの例(14KB)

 

まとめ

以上が、ブログで使用する画像のファイルサイズの目安と、画像のファイルサイズを小さくする4つのコツの解説でした。

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

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

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

SEOに強いブログを作る3つのコツとは?

SEOに強いブログを作る3つのコツとは?

2019-03-09

 

▼セッジさんのブログはこちら▼Sedge Design

 


▼おすすめ無料教材▼

加藤将太の次世代起業家育成セミナー

1 個のコメント

  • コメントを残す

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

    CAPTCHA