ブログに画像を使う時、サイズはどのくらいが最適？
画像を圧縮するのは地味に面倒だから、簡単に圧縮する方法があれば知りたい。
このような悩みに答えます。
ブログを重くする原因として一番多いのが、「画像」です。
しかし、画像が入ることで、ブログは一気にオシャレになるし、視覚的に見やすくもなります。
最適なサイズで使用することで、サイトは重くならず、見た目もキレイなサイトになります。
今回は、ブログに最適な画像サイズとその変更方法、さらに画像を簡単に圧縮する方法も合わせて解説していきます。
ブログが重いなと感じたら、画像を圧縮することで解決できるかもしれません。
ぜひ本記事を参考にしてみてください。
ブログ画像に最適なサイズとは
画像サイズとは？
画像のサイズは「ピクセル」という単位で表示されます。
ピクセルというのは、画像を構成する要素の最小単位のこと。
以下の画像を見てみると、
りんごの画像を拡大してみると、小さな正方形が見えますね。この正方形一つが1ピクセルです。
つまりこのりんごは、縦407×横404＝164,428個の正方形が集まっていることになります。
ちなみにピクセルのことを日本語では「画素」ともいいます。
カメラの説明で「30万画素」というのは、「そのカメラで撮影した写真は30万個の正方形で構成されてます」という意味になりますね。
ピクセルはあくまで画像を構成する正方形の個数なので、1ピクセルが何センチとかでは表せません。
最適な画像サイズ
ブログの場合、記事の幅に合わせて画像のサイズは変わります。
また記事の幅は、「PCで表示した場合」と、「スマホで表示した場合」で変わります。
この場合、想定する最も大きい画面サイズに合わせておくと良いです。
ちなみにこの「MAKOTO × BLOG」では、記事の横幅は694pxとなっていますので、キリよく横幅を700pxで設定しておくと丁度いいということになります。
大きすぎる or 小さすぎる場合は？
画像はピクセル数が多いほうがキレイなんでしょ？
という意見もあるかもしれませんが、一定以上になると、ほとんど差を感じられなくなります。
以下の画像をみてください。
写真A
写真B
一見同じように見えますが、実は
- 写真A：幅2560ピクセル
- 写真B：幅700ピクセル
と違います。
ですが、ほとんどの人が見分けはつかないと思います。
ピクセル数は一定以上になるとその違いは分からなくなり、画像を引き伸ばすことでようやく違いがはっきりします。
ポスターなど大きい紙に印刷する場合は、ピクセル数は大きい方がよいですが、ブログで使うぶんには、記事幅サイズでも十分キレイに見えるというわけですね。
さらに容量に注目してみると、
- 写真A：964KB
- 写真B：86KB
10倍も違います。そこまで見た目が変わらないのなら、少しでも軽いほうが良いですね。
ただし、記事幅より小さすぎると、画像がぼやけてキレイに見えないので、画像サイズは最低でも記事の幅に合わせましょう。
画像サイズを変更する方法
WordPressにアップロードしてから変更する
WordPressで画像をアップロードするし、詳細のところに現在のサイズが表示されています。
サイズを変更した画像を選んで、編集をクリック
横幅の数字を入力すると、縦幅は自動で変わるので、保存。
これで画像サイズの変更ができました。
ブログ画像を圧縮する方法
1ページのデータ容量が1.6MB以内であることを、グーグルは推奨しています。
ですので、1画像=0.3MB（300KB）くらいが目安。
写真は1枚で1MBを超えてくるので、積極的に圧縮した方が良いですね。
画像を圧縮する方法を紹介します。
ブログ画像を圧縮する方法①プラグインを使用する【おすすめ】
- EWWW Image Optimizer
画像を劣化させることなく、アップ時に自動で画像サイズを圧縮してくれるプラグイン。
さらに、すでにアップロードされた画像も一括で圧縮できます。
当ブログでもこのプラグインによって、
- イラスト：100〜200KB
- 写真：600〜700KB
に収まっています。
普通にアップロードするだけなので、手間もいらず便利ですね。
WordPress内のプラグインの項目から、「EWWW Image Optimizer」で検索すれば出てきます。
ブログ画像を圧縮する方法②サイトを利用する
WordPress以外で使用する画像を圧縮したいならこの２つがおすすめ。
無料ですが、しっかり圧縮することができます。
ただし、TinyPNGは一度に20個まで、ファイルの上限5MBまでと制限があります。
有料版に登録すればこの制限は解除できますが、年間25$かかるので微妙ですね。
最適な画像サイズを選択しよう
ブログにとって画像はなくてはならない存在だと思います。
しかし、最適な画像サイズをしっていないと、逆にユーザーの利便性を損なうことになってしまうので、サイズが大きい場合はリサイズし、容量も圧縮して表示速度の向上に努めましょう。
ちなみに、ブログで使用可能（商用利用可能）な画像素材を提供してくれるサイトをこちらの記事で紹介しています。
「なかなかブログで使えるオシャレな画像が見つからない」という方、よかったら参考にしてみてください。
