画像を最適化して軽くしよう！サイト表示速度改善策

梅雨の季節、皆さんいかがお過ごしでしょうか。
天気が悪いと室内でネットな時間が増えるのも自然でしょう。

ジメジメした日に、中々開かない重いサイトに出会うと『イラッ』としてしまう方いませんか？
あなたがユーザーとして感じるのであれば、あなたのウェブサイトへ訪れたユーザーも同じ点を重視しているかもしれません。

今日は、だーいぶ前にお話したGTmetrixの『Optimize images』に関する内容です。
SEO効果あり！ページ表示速度の改善方法
端的に言えば『必要以上に高画質すぎる画像をほどほどのサイズにしよう』というテーマです。

少しおさらい。あなたのサイトの画像は最適？

あなたのサイトで写真が多く掲載されているページのURLを用意しましょう。
ブログであれば、図解での説明記事ページやサムネイルが並ぶカテゴリ一覧ページかもしれません。
URLの準備が出来た方は、次のリンク先で窓にURLを入力し、【GO】ボタンをクリックします。
http://gtmetrix.com/

少し待つと、スコアが表示されたかと思います。
下の一覧内に『Optimize images』がありますので、探しましょう。

数値がBランク以下（cやDなど）であれば大きな改善効果が見込めます。
既にA評価の場合には手間の割に効果が見込めません。

画像の最適化手順

すごい難しく思うかもしれませんが、簡単な方法で対応できます。

ここでは最も簡単な方法をご紹介します。

ロスレス圧縮サービスを使う

実は、ドラッグ＆ドロップだけで最適化が出来てしまうサービスがあったりします。
それがこちら。
https://tinypng.com/

使い方は簡単です。
1：URL（https://tinypng.com/）にアクセスする。

2：枠の中に画像をドラッグ＆ドロップする。

3：Downloadをクリックして、最適化された画像を取得する。

4：これ以上なかった！

ウェブサイトの画像を差し替えよう

ここまでで、手元には圧縮された最適な画像があるかと思います。
ウェブサーバーにアップし、旧画像と差し替えましょう。

以上で最適化作業は終わりです。
非常に簡単なステップで画像の軽量化が出来ました。
巨大なサイトの場合、作業量が膨大となり現実的ではない場合もあるでしょう。
この場合には、表示回数の多い画像から最適化してみてはどうでしょう。
（多くの場合は、サイトロゴや電話番号画像、サイドバーにあるバナー画像等が表示回数が多いでしょう。）

ブログのように日々更新を行うサイトでは、更新作業の中に画像の最適化を組み込むと良いでしょう。
日頃からページの表示速度を意識することは非常に大切です。

画像の最適化って結局なんだったの？

画像はファイルサイズをどんどん削れば、どんどん粗い画像になっていきます。
ファイルサイズが小さくなり、表示速度が改善しても、あまりにチープな印象を与える画像や文字が読みにくい画像では本末転倒です。
人の目で見て、違いが分からない範囲で無駄な画質を下げ、圧縮したことが分からない範囲でファイルサイズを小さくすることが最適化です。
（実際には、僅かに荒くなったように見える程度を最適化だと判断するツールが多いです。Googleの速度チェックツールにおいてもこのことが言えます。）

作業が終わったらどの位、数値が改善したか見てみましょう。
今回の最適化についてはこれまで。