Webエンジニアなら
知っておきたい
画像圧縮

 

Takanori Oki @Web界隈LT会

Self-Introduction

  • @takanorip
  • Frontend Developer
  • SmartDrive Inc.
  • Nuxt.js, Polymer, React, etc...
  • Polymer Japan Translation Team

画像圧縮してますか？

画像圧縮まじ大事

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

Image Formats

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から操作可能

Strategy

PNG

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

JPEG

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

WebP

  • よくわからない

SVG

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

Encoder

PNG

JPEG

Guetzli

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

SVG

Tool

Imagemin

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

imagemin(['images/*.png'], 'build/images', {
    use: [imageminPngquant()]
}).then(() => {
    console.log('Images optimized');
});
  • imageminはPromiseを返す
  • 他のプラグインを読み込んで複数のフォーマットを同時に処理できる

THANK YOU!

Made with Slides.com