ブログに最適な画像サイズ・容量とは？おすすめの圧縮方法も紹介！

2024-10-08

ブログの画像サイズ・容量の目安は？
ファイルサイズはどうやって小さくするの？

今回は、こんな疑問を解決します。

▼▼この記事でわかること▼▼

ブログの画像サイズ・容量の目安
容量を小さくする3つのコツ
画像の圧縮するならSquooshを使え！

SEO対策では、ページ表示速度の改善が欠かせません。

ページ速度の表示速度が遅いと、ユーザーの離脱につながりかねません。

そんな表示速度ですが、実は画像サイズと容量を最適化するだけで、容量が少なくなり表示速度が速く読みやすいブログを作れます。

そこで本記事では、画像サイズと容量を最適化して、ブログの表示速度を大きく改善する方法をご紹介します。

初心者でも簡単にできる方法を解説するので、ぜひ参考にして見てください！

国内最速のレンタルサーバーを利用しよう！

ページの表示スピードを早くするには、接続が速くなるレンタルサーバーを利用することが大切です。

ページ表示速度を速くしたい方は、国内最速サーバーであるConoHa WINGを利用がおすすめです。

表示速度が速くなり、読者のストレス低下に繋がります。

＼今なら54%OFFキャンペーン実施中！／

ConoHa WINGでブログを始める

※クリックすると公式HPに飛びます

ブログ画像の目安のサイズ・容量とは？

まずブログ画像の目安のサイズと容量を解説します。

画像サイズ：横幅1,000px程度
画像容量：理想は50KB 多くても200KB

画像サイズ：横幅1,000px程度

ブログの画像サイズは、幅1000px程度で作成すればOKです。

なぜならほとんどのブログは、本文の幅が850px以下だからです。

1,000pxの画像を使用すると本文幅より大きくなりますが、表示の際は自動で縮小されます。

逆に本文幅よりも小さいと拡大されて、画質が悪くなるので注意しましょう。

画像容量：理想は50KB 多くても200KB

画像容量は、50KBが理想です。

一つの画像につき、30~70KBの範囲に収められるといいですね。

100KBを超える画像は、かなり重い部類になってしまいます。

しかし容量を小さくすると、画質がかなり悪くなる場合もありますよね。

その場合は、最低でも200KBに抑えられるようにしましょう。

まなと

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

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

では、画像の容量をできるだけ小さく圧縮する方法を解説します。

その方法は下記の３つです。

写真よりもイラストを優先する
画像を適切なファイル形式で書き出す
画像圧縮ツールを使う

写真よりもイラストを優先する

容量を減らすには、写真よりもイラストがおすすめです。

写真は、イラストに比べてファイルの容量が大きくなりやすいため、画像を選ぶ時点で、なるべく写真ではなくイラストを選びましょう。

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

色味の少ない「フラットデザイン」のイラストがおすすめです。

フラットデザインとは、平面でシンプルなデザインのこと。

例えば下記のような画像がフラットデザインです。

この画像の容量は、たった15KBしかありません！

アドバイス

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

ちなみにおすすめのフリー素材サイトについては、記事後半の「おすすめの画像サイトは？」で紹介しています。

画像を適切なファイル形式で書き出す

使用する画像は、適切なファイル形式で書き出しましょう。

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

この２つをざっくり説明すると下記のような感じ。

JPEG：色数の多い画像の圧縮が得意　主に写真の圧縮に使用
PNG：色数の少ない画像の圧縮が得意　主にイラストの圧縮に使用

例外もありますが、基本的には上記のイメージで大丈夫です。

例えば、次の画像は色数が少ないため、PNGに適しています。

注意

JPEGとPNGを不適切なまま書き出すと、ファイルの容量が極端に大きくなる場合があります。

例えば色数の多い写真をPNGで書き出すと、JPEGの時の倍以上のファイルサイズになることがあるので注意しましょう。

画像圧縮ツールを使う

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

例えばツールAで書き出すと100KBでも、ツールBは200KBになることもザラにあります。

そのため、画像圧縮にはツール選びが重要になります。

画像圧縮におすすめの無料ツールは、下記の３つです。

TinyJPG(PNG)：細かい調節はできないが便利で使いやすい。
Optimizilla：画像を見ながら細かく調節ができる
Squoosh：Google公式の画像圧縮ツール。最も高性能。

この中でも最もおすすめなのは、Google公式の画像圧縮ツールであるSquoosh（スクーシュ）です。

では、Squooshを使用して画像を圧縮する方法を解説していきます。

Squooshで画像を圧縮する手順

では当サイト一押しのSquooshを使って画像を圧縮する方法を解説します。

Squooshの特徴は下記の通りです。

Squooshの特徴

画像をリサイズできる
手動で細かい圧縮の調整ができる
ファイル形式を自分で選択できる
JPEGの圧縮に強い

他の画像圧縮ツールは、リサイズができなかったり、ファイル形式を選択できないことが多いです。

正直、これだけ高機能な圧縮ツールは他にありません。

では早速Squooshを使って画像を圧縮していきましょう！

まずSquooshにアクセスします。

Squooshへアクセス

Squooshのホーム画面で、圧縮したい画像ファイルをドロップするか、あらかじめコピーした画像をペーストしていきます。

まず写真を見やすいサイズに調整します。（すでに見やすいサイズの場合はそのままでOK）

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

このままでは画像サイズが大きいので、「Resize（リサイズ）」していきます。

元の画像は横幅が2081pxあるので、適切な横幅を設定しましょう。

「Width」に横幅の数値を入力します。（1,000pxでOK）

横幅を変更すれば、それに合わせて縦幅（Height）も調節してくれます。

次に書き出すファイルを選択し、圧縮率の調整をしましょう。

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

MozJEPGは、通常のJPEGよりも高圧縮で高品質に描き出せます。

ファイルを選択したら、「Quality」のバーを使い、画像を見ながら圧縮率を調節します。

圧縮したいサイズに合わせて調節しましょう。

圧縮が完了したら、右下の「保存」ボタンを押して、画像をダウンロードします。

これでSquooshを使った画像の圧縮は完了です。

4.89MBあった画像を、約100分の1の53KBまで小さくすることができました！

よくあるQ&A

最後にブログ画像のサイズ・圧縮方法について、よくある質問に回答します。

プラグインでの画像圧縮は良くないの？

代表的な画像圧縮プラグインにEWWW Image Optimizerがあります。

EWWW Image Optimizerは有効化するだけで、自動的に画像を圧縮し、ファイルサイズを小さくしてくれます。

便利な反面、それほど精度は高くないのも事実です。

少し手間はかかりますが、今回紹介した方法を使用するのが一番効果的です。

１ページあたり何枚まで使えばいい？

Googleは１ページあたりの総容量が1.6MBを推奨しています。

Aim to keep your total byte size below 1,600 KiB. This target is based on the amount of data that can be theoretically downloaded on a 3G connection while still achieving a Time to Interactive of 10 seconds or less.
Avoid enormous network payloads

１つのWebページには、文章や画像、動画など様々な素材が使われています。

仮に画像以外のリソースに1MBほど使用した場合、画像を600KBに収める必要があります。

まなと

1枚100KBであれば、6枚分ですね。

しかし、画像が多くて問題が起きることは稀です。ユーザビリティを最優先して画像を使用しましょう。