画像圧縮まじ大事

• パフォーマンスに直結
• サイトの検索順位にも影響あり
• ユーザーの通信量を削減できる
• サイトの表示速度を改善することで、
  コンバージョン率も向上する
• でも汚い画像が表示されてるとなえる、最悪
• きれいなまま画像ファイルの容量をへらすことが大切

PNG

• Portable Network Graphics
• ロスレス圧縮
• Deflateというアルゴリズムを採用
• DeflateはLZ77というデータ圧縮アルゴリズムとハフマン符号化を組み合わせた可逆データ圧縮アルゴリズム
  ZIPやgzipなどでも使われている
• PNG自体は画素配列(ビットマップ)なので、色が規則的でノイズが少ない画像につよい

JPEG

• Joint Photographic Experts Group
• 不可逆圧縮
• 画像データを離散コサイン変換によって周波数領域に変換し、量子化によって情報量を落としてから、ハフマン符号によるエントロピー符号化がなされ圧縮が行われる

JPEG

• 要するに人間が知覚できない部分の情報を削って圧縮
• ノイズが多い画像（実写など）に強い
• 圧縮率を上げるとブロックノイズが生じる

WebP

• グーグルが開発している画像フォーマット
• 可逆圧縮と不可逆圧縮の両方をサポートしている
• 不可逆圧縮でも透明度を扱うことができる
• 可逆圧縮だとPNGより26%軽く、非可逆圧縮だとJPEGより25-34%軽い
• 非可逆圧縮では、VP8というビデオ圧縮フォーマットと同じ予測符号化を用いている
• ブラウザのサポートが進んでいないのが現状

SVG

• Scalable Vector Graphics
• XMLベースおの2次元ベクターイメージ用画像形式
• テキストファイルなので軽く、テキストエディタで編集可能
• CSSやJavaScriptから操作可能

PNG

• 色数を減らす
• 画素の起伏を減らす（規則的にする）

JPEG

• 特にできることはない
• 書き出すときのクオリティを調整する
• 色が規則的な画像はPNGにしたほうが軽くなる場合も

WebP

• よくわからない

SVG

• 無駄な記述を減らす（タイトルとか）
• 無駄なgタグとか減らす
• パスデータは人間が編集できるものではない

PNG

• pngquant
  https://pngquant.org/
• ImageAlpha
  https://pngmini.com/
• pngnq
  http://pngnq.sourceforge.net/

JPEG

• mozjpeg
  https://github.com/mozilla/mozjpeg
  Mozilla開発したエンコーダ
• jpegtran
  http://jpegclub.org/jpegtran/

Guetzli

• https://github.com/google/guetzli
• Googleが新しく開発したJPEGエンコーダ
• Butteraugliという新しい画品質評価アルゴリズムを用いている
  （人間の目により近い、らしい）
• 圧縮により生じる視覚的・心理的誤差を小さくすることを目的としてる
• パラメータを変化させながら、より最適な解が見つかるまで何回もエンコード処理を行う、らしい

SVG

Imagemin

• PNG、JPEG、SVGの各エンコーダ（pngquantやmozjpegなど）をNode.js経由で使えるように
  してくれるスグレモノ
• これを使えばBuildの処理に画像圧縮を組み込める
• Gulpのwrapperもある

• imageminはPromiseを返す
• 他のプラグインを読み込んで複数のフォーマットを同時に処理できる