最近思ったことなんですが、有名なサイトは比較的大きな画像をブログに使っています。
確かに画像は大きい方が見やすいと思いますが、大きい画像を使うとそれだけ画像が重くなります。
けれど自分の知っている有名なサイトがこぞって大きい画像を使っているとなると、どのくらいのサイズの画像を使っているのか気になります。
そこでこの記事にはブログに最適な画像サイズと、大きい画像を使った場合に画像サイズが大きくなるので画像の最適化について書いていきます。
ブログに最適な画像サイズ
どのくらいのサイズの画像を使っているのか調べるため、有名なサイトの画像サイズを調べてみました。
すると、ほとんどのサイトが記事幅と同じ横幅の画像を使用していました。
現在、画像サイズの主流は記事幅と同じサイズのようです。
たつじんwが使用しているテーマの記事幅
| 各テーマの記事幅 | |
|---|---|
| 賢威7 | 700px |
| Simplicity | 680px |
| Twenty Seventeen | 526px |
他のテーマについては調べていませんが、記事幅は640px～728pxの間が多いです。
このブログは賢威7なので、記事幅と同じ横幅の画像を使うなら700pxになります。
ブログの記事幅の調べ方
Chromeでマウスの右クリックして「検証」でデベロッパーツールが開きます。
するとデベロッパーツールが開くので、赤枠で囲っているところをクリックし、調べたい箇所にマウスオーバーするとサイズが表示されます。
デベロッパーツールは「Ctrlキー」+「Shift」+「I」のショートカットキーでも開きます。
記事幅と同じサイズと小さいサイズの比較
多くの有名なサイトが記事幅と同じ横幅の画像を使用しているのは、おそらく記事幅と同じサイズの画像を使用したほうが見栄えがいいんだと思います。
そこで記事幅と同じサイズの画像と小さいサイズを使用して比較してみます。
これが賢威7との記事幅と同じ、横幅が700pxの画像です。
何となく記事にマッチしている気がします。
猫のかわいさもアップしています（笑）。
こちらは横幅を500pxに指定した画像です。
先ほどの記事幅と同じサイズの画像と比べると余白が多く、なんとなく寂しい印象を受けます。
記事幅と画像のサイズを合わせるメリットは、「画像をより良く見せられる」ことかもしれません。
有名サイトが記事幅と同じ横幅の画像を使用しているので、印象操作されている可能性もありますが。。（笑）
そうなるとブログに使う画像の横幅はなるべく記事幅に合わせたい気がします。
「けれど画像のサイズにそれ程こだわる必要があるのか？」
とも思います。
そこで、ブログに画像を使う目的を考えてみました。
ブログに画像を入れる3つの目的と効果
- 文章の補足
- ブログの見栄えをよくする
- 読み手に興味をわかせる
ブログに画像を使う目的について考えてみました。
１つ目は「文章の補足」です。
文章だけの説明を読んでもすぐに理解できなかったり、全く意味がわからないことが多いです。
けれど画像付きで説明されている他の記事を読んだり、動画で操作方法を見ると、
「簡単やんか（笑）」
と、すぐに理解できる時があります。。
文字だけでは理解しにくいこともあるので、文章の補足として画像を使用します。
文章の補足として画像を使用する場合、大きい画像の方がわかりやすいとは思います。
けれど理解の助けになり、画像が見にくくなければそんなに画像のサイズにこだわる必要はないかもしれません。
では、「ブログの見栄えを良くする」・「読み手に興味をわかせる」についても考えてみます。
読者をひきつける目的の場合
「ブログの見栄えを良くする」・「読み手に興味をわかせる」と、分けましたが目的は同じで、読者をブログにひきつけることです。。
文字ばかりの記事はかたい印象になり「よほど面白い」か、「物凄く興味があること」でないと読むのに疲れてしまうと思います。
そこで適度に画像を使い、見栄えを良くして箸休めとして読者を疲れさせないようにします。
また、画像でより読者の興味をひきつける効果もあります。
漢字ばかりの文章だと難しい印象を与え、読むのがしんどくなることと同じだと思います。
画像を記事に使うのと同じで、あえてひらがなを使用することも大事かもしれません。
となると、「読者をひきつける目的」で画像を使う場合、記事幅と同じサイズの画像を使った方が個人的には良いと思います。
けれど記事幅に合わせて大きい画像を使うと１つデメリットがあります。
大きい画像を使うデメリット
当たり前の話ですが、画像が大きくなればなるほど画像サイズが大きくなってしまいます。
そして画像サイズが大きければ大きいほど読み込むデータ量が大きくなり、ページの表示速度が遅くなります。
大きい画像を使うメリットは大きいかもしれませんが、ページの表示速度を考えると悩むところです。
そこで画像を最適化して、できるだけ画像ファイルを軽くして読み込むデータ量を少なくします。
画像を最適化する
- 画像編集ソフトで画像をアップロード前に最適化する
- アップロード後の画像をプラグインで最適化
アップロード前に画想を圧縮
検索すると画像圧縮できるフリーソフトは沢山出てきます。
JPEG画像を圧縮できるフリーソフトは何個か使用してみましたが、使い慣れていることもありJtrimが個人的には使いやすいです。
Jtrimは品質を指定してプレビューを見ながら圧縮できる点で自分には合っています。
フリーソフトを何個か使用しましたが、個人的にはJtrimが1番使いやすいと思います。
ただ、画像を自分の納得いくまで調節して最適化できますが、複数の画像を一変に最適化することはできません。
けれどとても使いやすいフリーソフトで、Windows10でも問題なく動きます。
ブラグインを使用してアップロード後の画像を最適化
「EWWW Image Optimizer」は画像をアップロードした時に、自動的に画像を最適化（圧縮）してくれます。
そして既にアップロードしている画像も一括して最適化することができます。
設定も簡単で、今まで画像を最適化せずにアップロードしていた画像も最適化できるので、WordPressの高速化には欠かせないプラグインだと思います。
まとめ
記事幅に合った画像を使用したほうが、画像をよりよく見せることができます。
ただ画像サイズが大きいとそれだけ重くなるので、画像の最適化は必須だと思います。
特にスマホで撮影した画像はサイズが大きいので、最適化は必須です。
今日のたつじんへの一歩
たつじんｗ 728pxの記事幅のテーマが多いです。
今後テーマを変更する可能性もあることを考えると、使用しているテーマが700pxでも横幅が728pxの画像をアップロードしたほうがいいかもしれません
