【第7回】ブログ作成記録(画像圧縮編)
今回は画像の圧縮方法を紹介します。
- なぜ圧縮するの?
- 今回のサイト紹介
- 元のファイルサイズは・・・
- 初期設定でアップロードした場合
- 「Hatena fotolife」の設定を変更
- 画質70%でアップロードした場合
- 画質を比較してみる
- 最後に
なぜ圧縮するの?
画像を圧縮せずに貼り付けるとサイトが重くなり、表示速度が遅くなってしまいます。
すると、せっかく訪問してくれた人達に不快感を与えかねませんね。
見ずに去っていかれるかもしれません。
そこで、表示速度を改善させるために、画像を圧縮してみましょうというわけです。
圧縮といっても難しくなくて、「Hatena fotolife」の設定を1ヶ所変更するだけです。
私は今まで圧縮せずに貼り付けていたので、結構遅いようです(泣)
表示速度は、ここで測定してくれます。Googleですね。
【 測定サイト 】 PageSpeed Insights
ちなみに今の私の結果です・・・ぐすん
モバイル(スマホ)版は良いですが、パソコン版が微妙ですね・・・
今回のサイト紹介
こちらのサイトで勉強させていただきました。
ありがとうございました!
旅行ブログ楽しく拝見しています。私も旅行した気分になれます♪
元のファイルサイズは・・・
今回は、この桜の画像で検証します。
画像のプロパティを見ると下のようになっています。
ファイル容量:1.82MB、大きさ:2048×1536
結構重いですね・・・(汗)画像の大きさも結構あります。
初期設定でアップロードした場合
比較のため、まずそのままの画像をアップロードしてみます。
画質調整前(初期値100%でアップロード)
518KBになりました。かなり軽くなりましたね。
「Hatena fotolife」の設定は、画質は100%のままですが、大きさが800ピクセル(初期設定)なので、サイズが縮小されて軽くなったようですね。
「Hatena fotolife」の設定を変更
次に「Hatena fotolife」で、画質の数値を設定します。
ログインして、画面右上のメニューの「設定」を選んでください。
「フォトライフの設定」画面が出ますので、「画質」の数値を下げてください。
そして「Enter」キーで設定が反映されます。
この設定が今後のアップロード時に反映されます。(初期値は100%)
画像のサイズ(大きさ)も調整できます。
画質70%でアップロードした場合
次に、画質70%の設定で、同じ画像をアップロードします。
画質調整後(画質70%でアップロード)
さて、ファイル容量はどのくらいになったでしょう・・・わくわく
なんと!
169KBになりました!!
圧縮しすぎじゃないですかね・・・?(汗)
画質を比較してみる
では画質を見比べてみましょう。
画質100%の場合
画質70%の場合
変わりませんね!
私はそんなに違いは無いように思います。
見た目は変わらなくて、かつサイトが軽くなることで見てくれる方のストレスが軽減できるのであれば、やらなきゃ損ですね!
「じゃあ、いつやるの?」
「今でしょ!?」
最後に
「画像の圧縮」と聞いて難しいなと思いましたが、この方法は簡単ですね!
教えてくださった今回のサイトの方に感謝です。
ありがとうございました。
今までの画像をすべて圧縮して貼り直すのは大変ですから、無理をする必要はないと思います。私は少しずつ地道に貼り直そうかと思っています・・・(泣)
ですが、今後は軽くできるので安心ですね!
それでは、今日はこのあたりで失礼します。
今回もお付き合いいただきまして、ありがとうございました。