ブログに載せる画像の最適化

f:id:taberu_salad:20190808152706p:plain

このブログがどうも重くて、色々調べたのでメモしておく

単純に表示を早くするだけなら、TwitterFacebookのソーシャルパーツ(拡散ボタン)を表示しないようにすれば話は早そうだが、今回は記事内の「画像の最適化」を試してみる。

本当に重いのか

まずは本当の表示が遅いのか調べてみる

方法

今回は、表示速度の評価にGooglePageSpeedInsightsを使用する

developers.google.com

結果

f:id:taberu_salad:20190808152614p:plain

確かに異常に遅い…

これは改善せねば…

結果を分析する

なんでこんなに遅いのか、改善するべきところはどこか見てみる

f:id:taberu_salad:20190808152601p:plain

次世代フォーマットでの画像の配信???

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNGJPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

なるほど。わからん。

次世代フォーマット

知らなかったので調べてみた

JPEG 2000

JPEG 2000は、JPEGより画質と圧縮率を向上させるために規格化された次世代画像フォーマット

一般的に、同じ画質ならJPEGの半分程度に圧縮できるが、計算処理に100倍かかる。しかし、JPEGの規格が策定された1990年代と比べて、コンピュータの性能は大幅に上がっているため、そこは大きな問題とならない。

対応ブラウザ

JPEG XR

JPEG XRは、マイクロソフトが開発したJPEG 2000を効率的な変換方式に改善した画像フォーマット

マイクロソフトの独自規格という位置づけになっている

対応ブラウザ

WebP

WebPは、Googleが開発した静止画像フォーマット

非可逆圧縮やアニメーション、透明度などをサポートしている

対応ブラウザ

主要なブラウザ全てに対応しているフォーマットないんかい!

これじゃ流石に使えないので、別の手法を調べてみる

まずは、今アップロードしている画像は全てpng形式だが、本当にこれでいいのか

画像ファイルフォーマットの違い

画像ファイルのフォーマットは他にも、

などがあるが、今回はより一般的なpngjpegを比較する

PNG(.png)とJPEG(.jpg、.jpeg)の違い

簡単な使い分け

  • PNG : 人や景色や食べ物などの「自然物」
  • JPEG : スクショや文字を含む図などの「人工物」

このように使い分けると、「綺麗」で「軽い」画像が表示される

もう少し詳しく

違いはこんな感じ

PNGJPEG
色数最大280兆色約1670万色
画像サイズ比較的大きい(重い)比較的小さい(軽い)
逆圧縮可逆圧縮非可逆圧縮
備考透明色を用いることが可能保存毎に画像が劣化する

PNGとJPEGを使い分けてみた

と言う見出しにしたものの、このブログで使用するような画像の場合、全てPNGの方が向いていそう

例えば、冒頭の画像をPNGJPEGで比較してみた

スマホぐらいのサイズだとあまり違和感はないかもしれないが、
一般的なPCのサイズで表示してみると、JPEGの方が明らかに荒い

他の改善方法

次世代画像フォーマットも使えない、JPEGも使えない。しかし、画像の容量を小さくしたい。

そんな時、こんなサイトを見つけた。

tinyjpg.com

どうやら、JPEGPNGの画像を圧縮してくれるらしい

結果

で、使ってみた

f:id:taberu_salad:20190808152555p:plain

-79%!?!?

使用前(PNG)使用後(PNG)
見た目f:id:taberu_salad:20190808152719p:plainf:id:taberu_salad:20190808152706p:plain
容量423.5 KB90.6 KB

これはすごい。見た目の違いはほとんど分からない…

どうやってこんなに容量を減らしているのか

サイトの説明を見てみると…

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も)ファイルを作成します。最終結果はオリジナルと比較され、微調整されます。不要なメタデータも削除されます。

つまり、オリジナルと比較しながら色数を抑えた画像にし、さらに余計なメタデータを削除しているよう

今回私が用意した画像では、

  • PNGは、ビット数が3タイプ(8ビット、16ビット、24ビット)あり、元画像は16もしくは24ビットだった。これを8ビットタイプに圧縮している?
  • Excelで作ったので、余計なメタデータが多かった?

表示速度の評価は?

上記のサイトで画像を圧縮後、ブログの画像を入れ替えた

その後、再度PageSpeedInsightsで評価してみた

f:id:taberu_salad:20190808152608p:plain

微妙…

結論

そもそもネットワークが重いんじゃね?と言う話

f:id:taberu_salad:20190808152545p:plain

yahoo.co.jpでもこのスコアなので、どうしようもなさそう

回線の契約見直そう

参考

コメント

タイトルとURLをコピーしました