Googleさんに、ページの表示が遅い！！！と怒られたのでブログのレスポンスにも大きな影響を与える画像について書いていきたいと思います。
はてなブログでは、はてなPROになってもカスタマイズできる範囲は限られているため、レスポンス改善するためには主に画像について改善していくことになります。
はてなブログ自体、重いので改善してもある程度までしか速度は出ないようですが…
月額500円はレンタルサーバーの最低ラインなので仕方ないのですが…！
はてなブログでアップすることができる画像ファイル
はてなブログにアップロードできる画像形式は JPEGとGIFとPNGになります。
この中でも、圧縮率が高く容量が少なくできるJPEGで画像をアップロードすることをおすすめします！
PNGの方が表現できる色が多く、逆圧縮が可能などメリットもありますが、重いです！(PNGはJPEGと比べると圧倒的に重いです。)
はてなブログ側のアップロード設定
はてなブログの
から投稿した画像は、はてなフォトライフというサービスに保存されています。
はてなフォトライフ - 無料・大容量、写真を共有できるウェブアルバム
そのため、はてなフォトライフのアップロード設定を変更することで、アップロード時に画像のサイズを設定したり、画質を設定したりすることができます。
※はてなフォトライブラリーで設定しても、はてなブログ側からのアップロードの場合は設定が適用されません。
アップロードする際は、はてなフォトライフからアップロードしましょう。
(ファイルサイズ無視で高画質な画像を使いたい場合は、はてなブログからアップロードすると良いです。)
はてなフォトライフのアップロード設定
画像サイズを落とすために、はてなフォトライフ側で必要な設定を行っていきます。
下記のリンクから、はてなフォトライフに飛ぶことができます。
はてなフォトライフ - 無料・大容量、写真を共有できるウェブアルバム
上のリンクから ジャンプした後、ログインするとはてなフォトライフのトップページに遷移します。
はてなフォトライフの右上の方に設置されている、下画像の赤枠で囲んだ「設定」をクリックします。
設定をクリックすると上の画像のような設定画面が開かれます。
設定の項目の中で下の画像の赤枠で囲んだ項目を今回は設定します。
・画像サイズ
アップロードする画像の長辺が設定した数値よりも大きい場合に、設定した数値までサイズを下げてくれます。
長辺が設定した数値よりも小さい場合は、サイズ変更は行わずにアップロードされます。
・画質
アップロードする際に、画質を落としてアップロードすることによって画像のファイルサイズを下げることができます。
画質の%を落とせば落とすほど、ファイルサイズは小さくなりますが画質が悪くなります。
ファイルサイズと画質は反比例しますので、用途や画像サイズを考慮して設定してください！
私は、画像サイズが800pxで、画質が85%に設定しました。
(参考：画質100%と画質60%の比較)
左側の画像が画質100%でアップロードしたもので、右側の画像が画質60%でアップロードしたものになります。
画像は右側の画像が170KBと左側の画像が44KBと約1/4になります！(アップロードした画像のファイルサイズは画像の編集から確認することができます。)
牛の部分は元からノイズっぽくなっているので、柵の部分で比較していただけると良いと思います。
44KB？もっと小さくならないの！？って方のために元画像の圧縮という方法を説明していきます！
JPEG画像を圧縮できるサイトの紹介
元の画像を圧縮するという方法で画像のファイルサイズを更に小さくすることができます。
はてなブログにアップロードする前に、画像を圧縮する方法を紹介します！
今回紹介するサイトは
というサイトになります。
圧縮の方法は簡単で、ファイルをドラッグ&ドロップかファイル参照でアップロードすると、自動で圧縮してくれます。
圧縮してアップロードしたものがコチラです。
画像を圧縮して、はてなフォトライフにアップロードした画像でファイルサイズは30KBとなります。
圧縮せずにアップロードした画像が44KBだったので、約2/3になりました！
更にファイルサイズを小さくしたい場合は、圧縮率を上げるか、画質を更に下げる必要があります！
説明ではない拡大されないような画像は圧縮率が高くても問題ないような気がします。
まとめ
・とりあずPNGでアップロードした画像は差し替えを推奨(画像のサイズを小さくしても数百KBあることが多いです。)
・はてなフォトライフ側の設定を調整することで、アップロードする画像のファイルサイズを下げることができる
・はてなフォトライフ側からアップロードしないと設定が反映されない
ここまで
最後までお読みいただきありがとうございました。