かつおログ

「経験をカタチに」をテーマに、日々の行動・思考を記録、分析、活用し、より良く生きるための方法を考察します。

【ブログ】画像を圧縮してサイトの表示速度を上げる手順

Hatena Feedly

f:id:Katsuox:20170223215517j:plain

 

サイトの表示速度は早いに越したことはありません。

僕はページがなかなか表示されないと、ついつい戻るボタンを押して他のページへ移動してしまうことがあります。

 

そこで、今回は僕も対応中の表示速度の改善に関する話。

 

以下、調べる→改善するの2ステップでお話したいと思います。

 

サイトの表示速度を調べる

PageSpeed Insightsにお世話になっています。

PageSpeed Insights

 

特に登録も必要なく、サイトのURLを入力するだけで表示速度のスコアを採点してくれます。100点満点で数字が大きいほど高評価。

 

PCやスマホ別にスコアを出してくれたり、改善点も併せて提示してくれるという至れり尽くせりなツールです。

 

ちなみに当サイトは

  • モバイル:50点
  • PC:65点

という結果になりました。なかなか改善の余地がありそうです。

 

表示速度改善のための対策

改善のための施策はいくつもありますが、その中でも余り手間がかからない画像の圧縮について説明します。

 

運営期間が長くなるほど画像が増えて大変になってくるので、早い段階で圧縮した画像を使う習慣をつけておいた方が後々楽になります。

 

メリットとデメリット

具体的な手順に入る前に画像を圧縮するメリットとデメリットについて。

 

メリットはもちろん、画像の容量を抑えることによって、表示速度の改善に繋がることです。

画像1枚1枚における効果は微々たるものですが、重なってくると馬鹿にできません。

 

デメリットは多少手間が増えることと、画質が悪くなること。

しかし、個人的にはこのデメリット、大したことがないと思っています。

 

まず、手間が増えることについては、慣れたら画像1枚30秒程度で圧縮できるのでそれほどでもありません。

 

画質が悪くなることについては、実際に圧縮前後の画像をご覧ください。

f:id:Katsuox:20170222235812j:plain

f:id:Katsuox:20170223221801j:plain

 

どっちがどっちか分かるでしょうか?

正解は

  • 上:圧縮後(72KB)
  • 下:圧縮前(210KB)

 

少なくとも、僕は上下の違いが分かりません。

にも関わらず容量は3分の1近くまで抑えられているので、積極的に実施していきたいところです。

 

画像圧縮の方法

ここから具体的な方法に入ります。

 

JTrimというツールを用いて画像の圧縮を行うことが可能です。

JTrim - 窓の杜ライブラリ

 

インストールが完了したら、JTrimを起動して

ファイル>保存オプション

f:id:Katsuox:20170223223556j:plain

 

開いた画面で以下を確認

  • 「品質を数値で指定する」で任意の数字を指定
  • 「この設定を保存する」にチェック
  • Exifデータのチェックを外す

f:id:Katsuox:20170223223644j:plain

 

ここまでの操作は初回時のみでOKです。

 

以下が実際の圧縮操作。

ファイル>一括変換

f:id:Katsuox:20170223224228j:plain

 

事前に入力画像と出力画像のフォルダ部分にフォルダを作っておいてください。

 

入力画像の側に圧縮したい画像をまとめてぶち込んで、OKボタンを押すだけで完了です。

f:id:Katsuox:20170223224329j:plain

 

圧縮と同時にサイズ変更も行いたい場合はこの画面から変更が可能です。

 

今まで圧縮をしてきていなかったら

※ここからは、はてなブログ限定の操作になります。※

 

もし、今まで圧縮せずに画像をアップロードし続けてきていた場合、圧縮前の画像をアップロードしたまま残しておくと紛らわしいですよね。

 

しかし、はてなブログ内では今までアップロードしてきた画像を削除する機能がありません。

 

画像の削除には以下の手順が必要です。

 

はてなブログでの画像削除の手順

はてなフォトライフにアクセス。

はてなフォトライフ - 無料・大容量、写真や動画を共有できるウェブアルバム

 

マイフォト>Hatena Blog

右側にありますね。

f:id:Katsuox:20170223225503j:plain

 

画面右上のフォルダを編集

画像を選択して削除ボタン(複数選択可能)

f:id:Katsuox:20170223225820j:plain

 

 

古い画像の削除は、必ず新しい画像への差し替えが完了してからにしましょう。

差し替える前に誤って画像を消してしまうと、ブログ全体の画像が消えてしまう大惨事になります。

 

まさに今当ブログが大惨事

 

スコアへの影響

まだ圧縮作業の途中ではありますが、PageSpeed Insightsのスコアはどうなったか?

 

  • モバイル:50点→52点
  • PC:65点→66点

 

なんか、労力に見合わなくないか・・・?

 

ただ、今後画像は増えていく一方ですから、運営が長期化するほど恩恵は大きくなっていくものと見ています。

 

さいごに

当サイトは120記事ほど存在している段階で画像圧縮に取り組みました。

なかなかの手間です。

 

早ければ早いほどいいのは間違いないですね。

 

以上!

 

かつおログに対するご意見はこちらから

かつおログへのお問合せについて - かつおログ