車中泊やドライブのネタ中心の当ブログですが、最近気になることがあります。
観光地の雰囲気をたくさん感じてもらうため、写真を多く使用していますが、「ページを開くのが重いのではないか？」という心配です。
記事のボリュームに比例して写真も増えていき、写真が20枚は当たり前、30枚を超えることもあります。文章を書くのがあまり得意ではないので、どうしても写真に頼っているところもあります。
そこで今回はブログ記事の写真容量を抑える方法と、その効果についてまとめてみたので紹介します。
現状のページ読み込み速度は？
ページの読み込み速度のスコアを出してくれるグーグルのサービス「PageSpeed Insights」で調べてみました。
使い方は簡単で、調べたいページのアドレスを入力し、解析ボタンを押すだけです。
試しに10/18にアップした伊豆戸田の旅の記事を調べてみました。
写真は37枚、合計の容量は7.2MBです（写真のみ）。
なんと、スコア３３。
赤色ゾーンで遅いページと評価されてしまいました。遅い要因として写真容量だけではありませんが、大きく寄与している可能性は高いです。
1ページ当たりの写真容量の目安は？
快適なページの閲覧のための、1ページ当たりの写真容量の目安は1.5～2MBと言われています。ざっくり3秒以内でページの読み込みが終わる速度です。
このぐらいであれば読み込み時間のストレスもなく、最後までしっかり読んでもらえる可能性が高くなります。途中で離脱される（ページを閉じられる）ことも減るかと思います。
写真容量を減らす方法
写真容量を減らす方法は３つあります。
①サイズを小さくする
②圧縮ツールを使う
③アップ時に画質を落とす
それぞれについて説明していきます。
①サイズを小さくする
ブログの写真はスマホカメラで撮影し、サイズは横2592×縦1936ピクセルを使用しています。サイズが大きいので写真は綺麗ですが、1枚だけで容量が数MBぐらいになります。そのまま何枚もブログに載せたら、読み込み時間が大変なことになります。
そこで実施するのがサイズ変更です。2592×1936を800×597に小さくすると、容量が数百kBぐらいになります。このサイズであればブログ記事でも十分綺麗です。このブログもこのサイズが基本になっています。
サイズ変更方法はとても簡単です。
Windowsであれば標準アプリのペイントを使います。写真を開き、サイズ変更後のサイズを指定するだけです。
はてなブログであれば、フォトライフの設定で画像サイズを指定すれば、ここからアップした写真は指定サイズに自動で変更してくれます。その際には、オリジナルサイズの画像を保存のチェックを外します。
②圧縮ツールを使う
サイズを小さくしたあと、圧縮ツールを使うと更に容量を小さくすることができます。操作が簡単な圧縮ツールを２つ紹介します。
◆JPEGmini
公式HP：https://www.jpegmini.com/
ソフトをインストールして使用します。
ソフトを起動し写真をドラッグすると圧縮処理が始まります。圧縮後はどのくらい容量が減ったかを数字で知らせてくれます。
圧縮前と圧縮後の写真はこちらです。
容量が300kBから184kBとかなり小さくなりました。写真を見比べても違いが分からないぐらいです。
簡単に圧縮できて便利なソフトですが、200枚までしかお試しでは処理できません。継続して使用するには有料版（7,000円ぐらい）へのアップグレードが必要です。
◆JPEG圧縮
公式HP：https://compressjpeg.com/ja/
ソフトインストール不要で、写真をアップロードするだけで利用できます。
こちらも同じように圧縮した写真がこちらです。容量が先ほどのツールと同じぐらいの173kBになりました。圧縮前と比べても問題ないレベルです。
写真をアップロードするだけで簡単ですが、念のため、顔写真やEXIF情報付きの写真アップは控えた方がよいかと思います。
EXIF情報とは写真に付与された情報で、撮影場所の位置情報が記録されている可能性もあります。消去方法はWindowsであれば、写真ファイルのプロパティを開き、詳細タグから個人情報削除を選択して処理すればOKです。
③アップ時に画質を落とす
画質を落とすツールなどがありますが、はてなブログの場合、フォトライフの設定で画質を落とすことができます。フォトライフから写真をアップすると適用されます。
フォトライフの設定から、画質のところに100%以下の数字を入力すればOKです。この数字を落とすと、かなり容量が小さくなります。
試しに70%に設定し、圧縮前の写真をアップロードし処理後の写真がこちらです。容量が300kBから132kBと半分以下になり、若干ザラザラ感がありますが、ブログで雰囲気を伝えるには、この画質でも十分かと思います。
ツールで圧縮後に画質も落とすのはアリ？
結論からいうと、少し容量が小さくなりますが、手間を考えるとやらなくてもOKかと思います。
写真の種類にもよるかと思いますが、旅でよく撮る景色、看板、料理、店舗内ショーケースなど、どれも劇的な容量縮小にはなりませんでした。
JPEG圧縮後に画質70%時は容量120kBで、画質70%のみの132kBとくらべ1割程度の容量低下になります。
はてなフォトライフの画質70%のみで問題なし
色々なパターンでの写真容量の変化をまとめると以下の通りです。
4種類の写真（景色、店舗内、料理、看板）の平均容量をオリジナル（サイズ変更した800×597）と比較すると、半分以下まで容量を減らすことができます。
この結果から、はてなフォトライフの画質70%のみで容量的には十分満足かと思います。
画質を落とすことでのデメリット
画質を落とすことで若干、写真にザラザラ感でてしまい、特に看板などの文字は読みにくくなる恐れがあります。写真によってはサイズや画質を上げて容量は我慢する必要があるかと思います。
画質70%の写真
4種類の写真（景色、店舗内、料理、看板）の画質70%の写真と、容量の変化を参考まで紹介します。
▼クリックすると大きく表示されます。
写真アップ時に注意すること
写真にはExif情報と呼ばれる、撮影位置などが記録されている場合があります。
はてなフォトライフにアップしてブログに貼り付ける場合、設定で画像情報を表示しない場合でも、写真自体のExif情報は削除されません。必要に応じて事前にExif情報を記録しない、もしくは消去するなど写真への処理が必要になります。（Windowsならプロパティから可能）
一方、はてなぶろぐ作成の写真投稿からアップ、記事に貼り付けた場合は、位置情報のみ自動で削除されます。ただし、それ以外のExif情報（撮影者、カメラ種類など）は消去されません。また自動での画質調整もありません。
写真アップ時には注意が必要です。
◇詳細は公式ブログ参照
まとめ
写真の容量を抑える方法と、その効果について紹介しました。
実際に同じぐらいの写真の枚数のブログ記事の写真を画質70%にしたところ、少しですがページ読み込み速度が、３３から４６にアップしました。枚数が多く、容量も3.7MBもあるため、まだまだ遅いページから脱却できていませんが、写真を多用する当ブログではかなりの改善になったかと思います。
画質を落として容量を抑える。
当たり前のことですが、なかなか実施できていない方も多いかと思います。はてなブログであれば設定するだけでOKです。
・写真の容量で困っている方
・ブログをこれから始める方
に本記事が少しでも参考になればうれしいです。
