このブログがどうも重くて、色々調べたのでメモしておく
単純に表示を早くするだけなら、TwitterやFacebookのソーシャルパーツ（拡散ボタン）を表示しないようにすれば話は早そうだが、今回は記事内の「画像の最適化」を試してみる。
本当に重いのか
まずは本当の表示が遅いのか調べてみる
方法
今回は、表示速度の評価にGoogleのPageSpeedInsightsを使用する
結果
確かに異常に遅い…
これは改善せねば…
結果を分析する
なんでこんなに遅いのか、改善するべきところはどこか見てみる
次世代フォーマットでの画像の配信???
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
なるほど。わからん。
次世代フォーマット
知らなかったので調べてみた
JPEG 2000
JPEG 2000は、JPEGより画質と圧縮率を向上させるために規格化された次世代画像フォーマット
一般的に、同じ画質ならJPEGの半分程度に圧縮できるが、計算処理に100倍かかる。しかし、JPEGの規格が策定された1990年代と比べて、コンピュータの性能は大幅に上がっているため、そこは大きな問題とならない。
対応ブラウザ
JPEG XR
JPEG XRは、マイクロソフトが開発したJPEG 2000を効率的な変換方式に改善した画像フォーマット
マイクロソフトの独自規格という位置づけになっている
対応ブラウザ
WebP
WebPは、Googleが開発した静止画像フォーマット
非可逆圧縮やアニメーション、透明度などをサポートしている
対応ブラウザ
主要なブラウザ全てに対応しているフォーマットないんかい！
これじゃ流石に使えないので、別の手法を調べてみる
まずは、今アップロードしている画像は全てpng形式だが、本当にこれでいいのか
画像ファイルフォーマットの違い
画像ファイルのフォーマットは他にも、
などがあるが、今回はより一般的なpngとjpegを比較する
PNG(.png)とJPEG(.jpg、.jpeg)の違い
簡単な使い分け
このように使い分けると、「綺麗」で「軽い」画像が表示される
もう少し詳しく
違いはこんな感じ
PNGとJPEGを使い分けてみた
と言う見出しにしたものの、このブログで使用するような画像の場合、全てPNGの方が向いていそう
スマホぐらいのサイズだとあまり違和感はないかもしれないが、
一般的なPCのサイズで表示してみると、JPEGの方が明らかに荒い
他の改善方法
次世代画像フォーマットも使えない、JPEGも使えない。しかし、画像の容量を小さくしたい。
そんな時、こんなサイトを見つけた。
結果
で、使ってみた
-79%!?!?
これはすごい。見た目の違いはほとんど分からない…
どうやってこんなに容量を減らしているのか
サイトの説明を見てみると…
When you upload a JPEG file, the image is analyzed. Textures, patterns and colours are automatically identified. The encoder creates an optimally compressed JPEG file based on that information. The final result is compared with the orginal and fine-tuned. Distracting JPEG artifacts are minimized without big sacrifices in file size. Unnecessary metadata is stripped as well.
と書いてあった。
要点だけ掻い摘んで和訳すると、
画像を分析して、その情報に基づいて最適に圧縮されたJPEG(おそらくPNGも)ファイルを作成します。最終結果はオリジナルと比較され、微調整されます。不要なメタデータも削除されます。
つまり、オリジナルと比較しながら色数を抑えた画像にし、さらに余計なメタデータを削除しているよう
今回私が用意した画像では、
表示速度の評価は？
上記のサイトで画像を圧縮後、ブログの画像を入れ替えた
その後、再度PageSpeedInsightsで評価してみた
微妙…
結論
そもそもネットワークが重いんじゃね？と言う話
yahoo.co.jpでもこのスコアなので、どうしようもなさそう
回線の契約見直そう
