今回は画像の圧縮の仕方や、ブログにおける適切なファイルサイズについて、知っておくと得することを書いていこうと思います。
ブログで使用する画像ファイルについて
画像のファイルサイズの大きさは、画像自体の大きさや画質などによって決まります。サイズが大きければ、画面に表示される画像が鮮明なものになりますが、その分サイト自体の読み込みが遅くなるといったデメリットがあります。
一般的にサイトの読み込みに2秒以上かかると、10%のユーザーが離脱し、10秒以上かかると50%のユーザーが離脱してしまうと言われています。サイトの直帰率につながってしまうので、かなり重要な要素だということが分かりますね。
はてなフォトライフ側の重要な設定
画像を載せる場合、事前に圧縮しておくことが重要だということを一度は耳にしたことがあると思います。圧縮することはもちろん大切ですが、圧縮する前にはてなフォトライフ側でしておくべき設定があります。
はてなブログでは画像を使用する場合「はてなフォトライフ」というサービスを利用して、画像をアップロードする必要がありますよね。
使用する画像のサイズと画質は、はてなフォトライフ側で設定します。ヘッダーの「設定」から、アップロードする画像について設定することができます。
ここで重要なのが「画像サイズ」と「画質」の項目です。
「画像サイズ」の数値（px）で、アップされる画像の大きさが決まります。設定したピクセル（px）数より大きい画像をアップロードした時は、画像の長辺を設定した値に自動でリサイズしてくれます。長辺が数値より小さい画像の場合は、リサイズされません。
そして「画質」の項目。「画質は良い方がいいや」とあまり気にしないという方が多いと思います。しかし、ここで設定する数値がファイルサイズに一番影響してきます。
この2つの設定を、きちんとブログにあったサイズや画質を指定してアップしていない場合、かなり損をしている場合があります。
比較してみた
無料素材をサイトから取ってきて、はてなフォトライフにアップロードするとします。ここではアップロードの例を4パターン用意しました。どれも長辺の設定は600pxです。
- 未圧縮 + 画質100%設定
- 圧縮済 + 画質100%設定
- 未圧縮 + 画質67%設定
- 圧縮済 + 画質67%設定
「圧縮済」となっているのは、あらかじめソフトや、サービスを使用して一度圧縮した画像を指しています。それでは実際にアップして、各画像の容量の違いを見比べてみましょう。
まずは未圧縮 + 画質100%設定の画像から。
ファイルサイズは「220KB」。
長辺を600pxにリサイズしただけで、一切圧縮処理はしていない画像になります。
続いて圧縮済 + 画質100%設定の画像。
ファイルサイズは「191KB」。
事前に圧縮処理はしたものの、「画質100%」の設定の影響で、ファイルサイズは大きめになってしまっています。
続いて未圧縮 + 画質67%設定の画像。
ファイルサイズは「66KB」。
事前に圧縮していないのにもかかわらず、「画質67%」に変更しただけで、元の画像と比べて約70%もファイルサイズが小さくなっています。
最後は圧縮済 + 画質67%設定の画像。
ファイルサイズは「36KB」。
事前に圧縮したうえで、「画質67%」に設定すると、元の画像と比べて約84%もファイルサイズを小さくなっています。
上の結果をまとめて比較すると以下の通りになりました。
- 未圧縮 + 画質100%設定・・・220KB
- 圧縮済 + 画質100%設定・・・191KB
- 未圧縮 + 画質67%設定・・・66KB
- 圧縮済 + 画質67%設定・・・36KB
上記の例を見てみるとわかる通り、アップ前に行う圧縮処理より、アップ時のはてなフォトライフ側の設定の方が、ファイルサイズに大きく影響することが分かります。
しかも見てもらえば分かる通り、画質の差もあまり感じられません。つまり、事前に圧縮するのが面倒な人は、一度「画像サイズ」と「画質」の設定だけでも見直すと、未圧縮の画像でもかなり軽くすることができます。
オススメの設定
私が普段アップロードしている画像の設定はこんな感じ。
- 風景画像やゲーム画面のキャプチャなど
-
- 画像サイズ：600px
- 画質：67%
- パソコン画面のキャプチャなど（文字がメインの画像）
-
- 画像サイズ：600px
- 画質：80%
文字がメインの画像の場合、67%だと少し読みにくくなってしまうため、80%に変更してアップしています。上記の設定は、jpg画像の場合ですが、文字の読みにくさを改善するだけであれば、gif画像としてアップすれば67%でもくっきりと見えます。
いちいち「設定」から変更しなければならないのは億劫ですが、圧縮と組み合わせて使用することで、ファイルサイズを大幅に減らせますね。
欲を言えば、はてなフォトライフにフォルダごとにアップロードの設定ができるようにして欲しいです。「画質67%用」「画質80%用」みたいな！！
圧縮に便利なサイト
画像圧縮用のソフト等もありますが、インストールがめんどくさいので、私の場合は圧縮サービスを無料で提供しているサイトを使用しています。
中でもよく使うサイトを4つ紹介しますので、圧縮したいファイル形式に合わせて使ってみてください。
JPGイメージをオンラインで圧縮する
圧縮したいjpg画像をドラッグ、ドロップするだけで、圧縮できます。ダウンロードする前にプレビューで品質を確認できるほか、プレビューの状態でクオリティを調整することができ、好みの画質やファイルサイズに変更してダウンロードすることができます。
圧縮後はファイル名の後に「-min」がついた状態で保存されるので、元データに上書きされる心配もありません。
14種類の言語に対応しているのも、使いやすさの特徴です。
対応ファイル：jpg
画像の減色 Reduced Color
http://www.petitmonte.com/labo/reducedcolor/
画像に使われている色の数を減らすことでファイルサイズを小さくすることができるサイト。私は主にgif画像の圧縮に使用します。
gif画像には、同じ色が連続している場合、圧縮率が高くなる性質があるため、ボタンやアイコンなど色数が元々少ない画像をgif形式にすることで、よりファイルサイズを軽くすることができます。
サイトに利用方法について詳細に記載されていますが、ポイントとしては、圧縮の際に「細部を中心に減色」を選択することで、色数を2色～256色まで自由に選択することができる点です。
ちなみに多くの色を使用している画像の場合にオススメな設定は128色です。色数を半分に設定するだけでかなりファイルサイズが軽くなると思います。
対応ファイル：gif、png、bmp
TinyPNG
こちらは海外のサイトですが、png画像を圧縮する際に重宝しています。
サイト自体は英語で書かれていますが、画像をドラッグ、ドロップするだけで、圧縮できるので特に操作で困ることはないと思います。
しかし、はてなブログでpng画像を使用することはないと思われるので、あまり出番はないかもしれません。一応jpgも対応しているようですが、jpgに関しては最初に紹介したサイトが優秀なので、こちらを利用することはないかもしれません。
仕事なんかではよく使うんですけどね！</p>
対応ファイル：png、jpg
ILoveIMG
トップページの「画像の圧縮」をクリックすると、圧縮画面に変わります。こちらは「jpg」「gif」「png」に対応しており、基本的な3つのファイル形式を全て圧縮できる点が魅力です。
個人的な感想で言ってしまうと、圧縮率や品質で上記のサイトには劣るかなと感じました。そもそも圧縮以外のサービスも提供しているサイトなので、サイズの変更や、ファイルの変換など、まとめて処理を行う際に便利なサイトと言えます。
ファイル形式ごとにサイトなんて使い分けてられない！といった方にはかなりオススメです。
対応ファイル：jpg、gif、png
サイトの速度評価を調べる
最後にサイトの読み込み速度を分析してくれる、Googleのサービス「PageSpeed Insights」をご紹介します。
https://developers.google.com/speed/pagespeed/insights/
「ウェブページのURLを入力」と書かれた欄に、調査したいページのURLを入力して「分析」をクリックすると、そのページの読み込み速度を、PCとモバイルの端末ごとに評価してくれます。
100点中の何点か、数値で評価してくれるほか、「赤」「黄」「緑」の三段階でそのサイトのパフォーマンスが良好かどうかが表示されるので、非常に便利なサービスです。
また評価だけでなく、「JavaScript を縮小する」「画像を最適化する」など、具体的な改善点と、改善することでどのくらいの容量を削減できるか、といったことまでチェックすることができます。
もしあまり良くない分析結果が出た場合は上記のサイトや、はてなフォトライフの設定を見直すなど、画像について改善してみてはいかがでしょうか。
まとめ
画像の圧縮って本当に手間ですよね。面倒なので後回しにしがちですが、ちゃんと行っておくことで後々助かるはずなので、タイミングをみて行っておくことが大切だと思います。
例外として、写真やイラストなど、画像コンテンツがメインのサイトでは鮮明さが大切なので、あまり圧縮しすぎるのも良くないかもしれません。自身のサイトに合った設定を見つけることが大切です。
ちなみに最後にご紹介した「PageSpeed Insights」で、当ブログも分析してもらった結果、PC「55=Poor(赤)」モバイル「57=Poor(赤)」という残念な結果に...。こりゃどこかで古い記事の画像も圧縮していかないとなあ...。泣
以上、最後まで読んでいただきありがとうございました！
気に入ってくださった方は、読者登録やブックマークなどしていただけると嬉しいです。（励みになっています！）
よろしくお願いいたします！m( )m
ブックマーク・コメントありがとうございます。
YUUU BroG
＞オレンジさん（id:mata1）
かなり違いが出るので、試してみる価値はあると思います。
＞64姉弟さん（id:gamestart）
最初に紹介したサイト、オススメなのでぜひ使ってみてください！
＞たいやんさん（id:taiyanmama）
私のブログもページによっては評価「30」とかなので、Googleさんも激怒してると思います(笑)