【その画像、重過ぎませんか！？ロスレス圧縮のススメ】

ホームページを少しでも軽くしたい！少しでも表示を早くしたい！
画面が真っ白のまま進まなかったり、画像や動画がなかなか表示されなかったり。
これではせっかくあなたのホームページに来てくれたお客さまもイライラしたり、他の事を考えてしまい、場合によってはコンテンツさえ見ず帰ってしまうこともあるかもしれません。

ページの最速表示へ向けての解決はホームページを持つあなたにとって非常に重要な課題ですね。

cssファイルをコンパイルしたり、javaをhtmlの後に読み込ませたり、画像を軽いものにしたりと、一つ一つ問題を解決していかなければなりません。
画像の最適化について書いていきたいと思います。

1. 画像の最適化はロスレス圧縮で
2. 使い勝手の良いロスレス圧縮ツール
3. jpgファイルのロスレス圧縮比較
4. pngファイルのロスレス圧縮比較
5. さいごに

画像の最適化はロスレス圧縮で

画像データが多いページ、そしてその画像が大きかったり綺麗だったりするとサイズが大きくなってしまいます。
必然と読み込む量も増えるため表示に時間がかかってしまいますよね。

何とかしたい！そこで画像の最適化です。
ここで書く「画像の最適化」は、使っている画像の画質は保ったまま圧縮し、転送容量を減らし、表示させるスピードを速くすることです。
これを可能にするのが「ロスレス圧縮」です。難しい言葉でいうと可逆圧縮（かぎゃくあっしゅく）と言います。圧縮前のデータと、圧縮・展開の処理を経たデータが完全に等しくなるデータ圧縮方法を総称して使われています。

「そんなことが可能なの？というか簡単なの？」

はじめは私もそう思いましたが非常に簡単でした。

使い勝手の良いロスレス圧縮ツール

ソフトをダウンロードして立ち上げてやったり等、いろいろ試しましたが、最も使い勝手が良かったのはブラウザ上で画像をアップし、それをロスレス圧縮してもらいダウンロードするというタイプのツール。

TinyPNGというサイトです。

TinyPNG
https://tinypng.com/

このサイトを使用することでソフトをインストールすることもなくブラウザで完結することができます。魅力的！
操作も簡単、デスクトップなどからドラッグアンドドロップするだけ。マルチアップロードも可能です。

では実際にロスレス圧縮の記録をここに残しましょう。

jpgファイルのロスレス圧縮比較

今回のアイキャッチ画像のjpgでやってみたいと思います！

ロスレス圧縮前　20150901b_e.jpg　337 kB　800 × 800

さて、ブラウザにドロップします！

パンパカパーン（音は鳴らないです）
パンダさんも笑顔で祝福してくれました。

な、なんと-80％も削減されました！
ホクホクとロスレス圧縮されたファイルをダウンロードします。
さあどうでしょう。

ロスレス圧縮後　20150901b_e2.jpg　67 kB　800 × 800

すっごい軽くなったけど、画質に問題はない・・・？
2枚並べてみましょう。左がロスレス圧縮前、右がロスレス圧縮後です。

まったく差がありません！大成功ですね！
このロスレス圧縮で270 kBの削減が出来ました。この1枚でこの数字です。
jpg画像をたくさん使用しているホームページでは何百メガと節約できますね！

pngファイルのロスレス圧縮比較

さて、次はpngファイルのロスレス圧縮をかけて、前後の比較をしてみます。
実験ファイルはこれ！

ロスレス圧縮前 sample01.png　374 kB　800 × 800

さて、ブラウザにドロップします！
パンダさんは喜んでくれるのか！？

パンパカパーン！！

なんとこちらも-65％も削減されました！
ダウンロードして出来栄えを見てみます。

ロスレス圧縮後 sample03.png　132 kB　800 × 800

どうでしょう。あまり変わったような気はしませんが。
2枚並べてみましょう。左がロスレス圧縮前、右がロスレス圧縮後です。

違和感ありませんね！

さいごに

快適な表示速度はお客様だけでなくGoogleも評価しています。
モバイルフレンドリーかどうか、実のある被リンク多いかなども検索においての優劣判定の基準であったりしますが、表示速度においても優位にたって、よりお客様を囲っていきたいものですね！