画像を圧縮してページ表示速度を上げよう！
スポンサーリンク
サイトを運営していてやったほうがいいことの１つとして、「ページ表示速度を短くすること」があります。
ページの表示に時間がかかるとユーザーはイライラしますし、サイトの離脱につながりやすいですよね。
私も気になったので、PageSpeed Insightsで調べてみました。
使い方は簡単です。評価してほしいサイトのURLを入力すると、入力したURLのページの結果が表示されます。
例として、私が書いた記事の1つで確かめてみましょう。
・・・30点。実に酷いですね。
結果ページでは、何が原因なのかが各項目ごと（HTML, JavaScript, CSS, 画像など）に明記されています。これを1つ1つ修正していくことでページ速度の改善に繋がります。
では、「画像を最適化する」の修正方法を表示してみましょう。
画像を圧縮してファイルサイズを小さくしてみると良いようですね。。
確かにPC画面キャプチャして少し手を入れただけで圧縮作業は全くしていなかったです。
PCのキャプチャ画像って結構サイズ大きいんですね。。
ということで、画像ファイルを圧縮してみます。
画像を圧縮してみよう！
画像圧縮にオススメなツールですが、私はTinyPNGを使用しています。
TinyPNG – Compress PNG images while preserving transparency
使い方は簡単です。「Drop your .png or .jpg files here!」の枠に圧縮したいファイルをドラッグ＆ドロップするだけです。複数の画像ファイルを一括で圧縮することもできます（20ファイル、5MBまで）。
左の数値が圧縮前のサイズ、右の数値が圧縮後のサイズです。
圧縮率80%以上って・・（笑）画像の圧縮って思っている以上にされるものなんです。
圧縮された画像ですが、個別でも一括でもダウンロードが可能です。
結果はいかに・・？
画像が無事圧縮されたということで、早速ページに反映させて、再度PageSpeed Insightsでチェックしてみましょう。
67点！！！スコアが倍以上になりました！まだまだ改善の余地はありますけど、今回はこれでよしとします。
実は・・
実は、PageSpeed Insightsでも最適化された画像ファイルを取得することができます。ただ、画像が荒かったりするケースがあるため、より良い方法を探し、TinyPNGにたどり着きました。
TinyPNGは分かりやすい圧縮方法で、かつ圧縮率も高く画質も保たれますので、最適なツールなのは間違いないです。
まとめ
ページの表示速度を短くするためにHTML, CSS, JavaScriptを最適化するのももちろん必要ですが、１番手軽にできるのが画像圧縮です。特に必要な技術も必要がないので、是非試してみてください。
少しの手間で大きな改善につながるかもしれません。
