ブログの画像容量の目安と圧縮、そして効果は・・・？

最近アクセス数が上がってきてとってもブログ書くのたーのしー！
やっぱり作ったものがみんなの目に触れて数字にそのまま直結するのって嬉しいですよね。
さて、インターネットサイトやブログで大事な集客対策でよく聞かれるのが「SEO対策」

• SEOとは？？「Search Engine Optimization」の略称で直訳すると「検索エンジン最適化」
  これを対策することによって検索サイトで上位に表示されたり、GoogleやYahoo!からの検索流入が増えたりします。
  ＝PV数(見ている数)やUU数(訪問者数)が増えていくわけです。

一昔前はひたすら検索ワードを盛り込んだり、相互リンクをやたら増やしたりとまぁ結構簡単でしたが、現在のGoogleでは評価基準がだいぶ変わっています。(2021年2月現在)
いくつかSEO対策することはあるのですが、大事な物の一つが「ページ表示速度」の改善です。

ではどれくらいの写真がブログやワードプレスの画像として最適なのか？？
圧縮はどれくらいなのか？効果はあるのか？今回はそんなお話です(*･ω･)ノ

Googleが推奨しているWebページ全体のサイズは「2MB」程度。
少なっ！！これ実際問題iPhoneの写真1枚でオーバーします。

「Webページ1枚の大きさが2MB」ですので、ここをカバーするのは無理ですｗ
僕みたいにライブドアブログなどの無料ブログを使用していたりする人には普通に書くだけで2MBはオーバーします。

さて、ページ全体の軽量化なんてかなり詳しくないとできないので、この2MB情報は何となく頭に入れておく程度で良いでしょう。
サクッとページ全体の容量を軽くするためにはやはり記事内の画像の「容量」を減らすことが大切です。

ブログで使う画像の容量サイズ目安は大体「1枚＝100～500KB」程度がいいのではないかと。
結構幅が大きいのですが、用途やサイトの内容に変えるべきかなと。

なんだかいろんなアフィリエイトブログとかだと頭ごなしに「100KBまで！！」なんて言ってたりしますが、それはそういったサイトさんはそうした方がいいだけであって、自分のやっているジャンルによってはそこまで軽量化しなくてもいいと思います。

私のブログのように比較的しっかり「写真を載せたい！」なんて場合は500KBまでは許容範囲ではないかなと。

写真や情報をしっかり載せたいサイトなのに写真が荒すぎ・小さすぎなんてのは本末転倒なんじゃないかなと。

さて結局見てみないとわからないのが画像圧縮の効果。

• 「圧縮した方が良いことはわかるんだけど、汚くなるのは嫌だなぁ・・・」
• 「圧縮したらどれくらい軽くなるの？」
  

なんて意見が多いでしょうから、私が実際に圧縮した写真を並べて表示させていただきます！
圧縮の仕方はシンプルに「画像の大きさ」を縮小して容量ダウンさせる方法を採用しています。
※縦横比を維持した状態で長辺(横)を縮小させていきます。

• 画像の大きさ：5472×3648pixel
  画像容量：4.2MB

• 画像の大きさ：3000×2000pixel
  画像容量：2.8MB

• 画像の大きさ：1500×1000pixel
  画像容量：757KB

• 画像の大きさ：1000×667pixel
  画像容量：360KB

• 画像の大きさ：500×334pixel
  画像容量：117KB

さて、ここで数値をまとめてみましょう。

• 画像の大きさ：5472×3648pixel　画像容量：4.2MB
  
• 画像の大きさ：3000×2000pixel　画像容量：2.8MB
  
• 画像の大きさ：1500×1000pixel　画像容量：757KB
• 画像の大きさ：1000×667pixel　画像容量：360KB
• 画像の大きさ：500×334pixel　画像容量：117KB

大まかに計算すれば一番大きいところから、一番小さくしたときの画像容量の変動は
「4.2MB(4200KB)→117KB」まで軽くすることができました。
1/10以下までサイズダウンできることがよくわかると思います。

！ここでもう一度上の画像を見てきてほしいのです！

→クリック(タッチ)すれば「画像圧縮してみた実例」の所まで戻れます

見ていただけたでしょうか？？
どうでしたか？ぱっと見ほとんど変わらないですよね？？
5000サイズでも1000サイズでもさほど変わらないと思うのです。
サムネイル状態では。

サムネイル(画像がページに小さく表示されている状態)をクリックすると別ページで画像が開くのですが、ここでやっとしっかり比較ができます。
とはいえ高画質画像を見たい人が見るだけで良いと思うので基本的には軽い方が良いと思います。

で す が

5000px→1000pxはそこまでものすごい変化はないのですが、今回の例だと500pxサイズの一番小さい画像はさすがにボヤけています。

ここが先ほどお話しした「サイトの用途によっては容量を100～500KBで良いと思う」理由です。
今回の写真は「しっかり綺麗に見せたい！」ので「5472px：4.2MB」はさすがに大きすぎなのでこれは縮小すべきですね。

このなかだと比較的見劣りしない「1000px：360KB」の画像を採用して、ぼやけてしまう「500px：117KB」まで縮小しなくていいのではないか？と感じます。
よってブログに載せるなら今回の場合は「1000px：360KB 」を採用！みたいに考えるといいかと。

逆にそこまで画質を求めていないならガッツリサイズダウンさせるのは大事ってことですね。

さて画像圧縮する方法ですが結構いろいろあるんですよね。
私の場合「一眼レフ」も「iPhone」も全部「PC」に画像を転送してから作業しているので編集ソフトを使っています。

GIMPという編集ソフトです。

色味の調整やフィルター効果、切り取りや圧縮などいろいろ使えて便利です。
単純に縦横サイズを縮小する場合もありますが、縮小はせずに「切り取り(トリミング)」して結果的に容量を小さくしたりと用途によって変えています。

• GIMPを使用した縮小方法などのレクチャー動画を作りました。
  先ほどの大きさによっての画質の違いなんかも比較しています
  詳しく知りたい方はこちらをご覧ください↓

「パソコン持ってないからできないよぉ！！」
なんて方はオンライン圧縮サービスを使いましょう。

• Optimizilla
  日本語で書いてあるので誰でも使えると思います。
  一度に編集できる枚数は20枚。
  プレビューを見ながら変換ができるので初心者には使いやすいです。

さてこんな感じで圧縮した画像を使えばきっとブログが軽くなるはず！！
Webページの重さを測定してくれるGoogleのサービス「PegeSpeed Insights」を使用して「軽量化の効果を実感するぞぉ！！」とワクワクで試した見たところ・・・問題発生。

• PegeSpeed Insights
  ここのページにアクセスして測定したいURLを入力するとどれくらいの重さなのか測定してくれます

あまり軽くなっていないのもそうなのですが、上に掲載したサイズがバラバラな画像のリソースサイズ(容量)が変わってない！！
＝「サムネイル状態では容量の大きさに依存せず、サムネイルの大きさに依存する」わけですね。
もちろん画像をクリックして本来の大きさにすればデータの読み込みは遅くなるはずです。

結構いろんなサイトで「圧縮すれば軽くなる！」「ブログはこれでSEO対策完璧！」みたいに書いてありましたが、画像サイズを軽量化するだけではページサイズの重さは変わらないってことですね。

少し難しい話になりますが、この場合は「サムネイルのサイズを変える」ことで対応すべきってことですね。

ここについてですが「無理やりにとにかく軽くする必要はない」のですが
「画像の軽量化は結果的に必要」と考えます。

無料ブログや各種WEBサービスを使用して作成している場合、「アップロードの容量」が決まっていたりと「総合的に考えれば容量は軽い方が良い」というのが私なりの結論です。

• WEBサービスの画像フォルダを容量を軽くするため
  私の現在使用しているライブドアブログは画像フォルダの制限がないのですが「はてなブログ」なんかだと容量制限「300MB/月」ですし「FC2ブログ」では「10GB」、ワードプレスなんかでは使用しているサーバーの容量によって制限があるはずなので、これらを考えると画像は軽くすること＝利点に繋がると思います。

• 編集時の軽さに直結するため
  ブログサービスで執筆時の軽さに影響すると思います(個人的な見解)
  投稿→閲覧時にはサムネイルに変換されているので重さは感じないのですが、書いているときには多分等倍(元の容量依存)で書くことになる感じがします。
  軽い画像はやはりすぐ記事に張り付けたり呼び出したりすることができるので、ここの点を考えると重すぎる画像じゃなくてもいいのかなと。
  これは私自身のライブドアブログ・アメーバブログでの経験ですので他のサービスでは少し変わるかもしれません。

• アップロード時間を短くするため
  1枚だけ4MBアップロードなんて場合は良いのですが、私は記事によっては20枚以上画像を使います。
  4MB×20枚＝80MBものアップロードになりますし、何個か一気に記事を書く場合は一度に100枚以上アップロードをする事もあります。
  単純計算で4MB×100枚＝約400MBという事ですね。
  これが1枚500KBとかなら500KB(0.5MB)×100枚＝約50MBで済むわけです。300KBなら100枚でも約30MB。

上記の理由により 自分の使用しているサービスと照らし合わせて 計算(軽量化)するのが良いと思います。

• SEO対策の為には画像の軽量化(ページスピードの高速化)が必要
• ブログの画像容量の目安は100～500KB。自分のサイトジャンルによって変更
• 画像は小さくするか切り取ってサイズダウン
• とにかく絶対軽量化！というよりは適切な大きさ→容量という順で確認するのがおススメ(縮小化しすぎると劣化する＝見せたいものが見せられない)
• 画像を軽量化＝ページ速度が改善するわけではない場合も有り≠SEO対策には直結しない場合も
• 軽量化は使用サービスによって利便性が向上する＝SEO対策というより自分の為に軽量化する

こんなところだと思います。
今回の発端は私がSEO対策するために画像軽量化を試したところ・・・という所から始まっており、結果的にはガッツリとしたページ速度の高速化には繋がりませんでしたｗ

とはいえ画像を縮小したときの見え方の比較や、逆にゴリゴリ軽量化したときの視認性の悪さ、そして結果的に自分のブログ運営での利便性が向上し、こんな風にガッツリ1本記事書けたから全然ヨシ！

もちろんいろんな目線があるとは思いますが私は今までリサイズの写真サイズが大まかに「長辺3000px」にしていたところを「長辺1500～1000px：500～100KB」あたりを基本に調整していこうと思っています。
(画質がいらないものに関してはもっと小さくしていく予定)

あまりこういった比較・検証記事がなかったので備忘録兼、参考になると嬉しいです(*･ω･)ノ