webp による画像の最適化

画像の最適化 jpegoptim、jpegtran、optipng、pngcrush、および ImageMagick については、既にいくつかの記事を作成しました。今日は、webp による画像の最適化について説明したいと思います。

縮小と圧縮は、Web ページのコードを最適化するための非常に標準的なものになりました。一般的な Web リソースはすべて、画像を最適化し、可能な限り同じ CSS を使用し、適切な画像形式を選択します。しかし、これでは十分ではありません。 HTTP アーカイブの統計によると、画像は Web ページのサイズの約 64% を占めています。新しい WebP 標準は、JPEG と PNG を置き換えるのに役立ちます。

WebP について簡単に

この形式は 2010 年に登場し、その後 Google によって開発されました。 WebP は、損失の有無にかかわらず、VP8 ビデオコーデックのキーフレームの圧縮アルゴリズムに基づいており、RIFF に基づくコンテナーにパッケージ化されています。 WebP ロスレス画像は、PNG と比較して平均で 26% 小さく、WebP ロッシー画像は、同じ SSIM インデックスの JPEG と比較して 25 ～ 34% 小さくなっています。新しい形式は透明度 (アルファチャネルと呼ばれる) もサポートします。

動作原理

非可逆圧縮では、WebP は予測コーディングを使用します。このコーディングでは、隣接するピクセルブロックの値を使用して目的のピクセルブロックの値を予測し、その差をエンコードします。

無損失圧縮では、画像のよく知られたフラグメントを使用して、ピクセルを正確に再構築します。興味のあるマッチングアルゴリズムがない場合は、ローカルパレットを使用することもできます。

メリットとデメリット

背後:

小さい画像サイズ;
高度な圧縮アルゴリズム;
高画質;
透明性のサポート

反対:

普及率が低い;
損失を伴う圧縮の「可塑性」
ピクセルの色やその他のコンピュータグラフィックスが失われる可能性があります。

WebP は、Chrome、Opera、および標準の Android ブラウザーで既にサポートされており、WebPJS ライブラリを使用して、すべての一般的なブラウザー (Flash を使用する IE 6 以降) で表示できます。さらに、libwebp のエンコードとデコードの軽量ライブラリ、WebP のエンコードとデコードのためのコマンドラインユーティリティ、およびこの形式の画像を表示、多重化、およびアニメーション化するためのツールが開発されました。

cwebp のインストール

Cwebp には、コンパイル済みの Linux バイナリがあります。そのため、インストールは簡単にダウンロードして解凍するだけです:

# wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.0.3-linux-x86-64.tar.gz
# tar zxf libwebp-1.0.3-linux-x86-64.tar.gz 
# cp -a libwebp-1.0.3-linux-x86-64/bin/cwebp /usr/bin/
# cp -a libwebp-1.0.3-linux-x86-64/bin/dwebp /usr/bin/

cwebp の使用法

cwebp ユーティリティは JPEG、PNG、および TIFF からの変換に使用され、dwebp はデコードに使用されます。変換は (ユーティリティディレクトリから) 簡単なコマンドで開始されます:

# cwebp input.png -q 80 -o output.webp

同じ原理で、デコードを開始できます。エンコーディングのチェックなど、多くのオプションと追加パラメーターがあります。

WebP 導入

あなたは新しい形式に興味を持ち、すべてのテストを行い、統計をもう一度見て、Chrome が依然として最も人気のある Web ブラウザーであることを確認しました。次は何？次に、WebP 内のすべての画像のコピーを作成する必要があります (すべてのファイルを変換する簡単なスクリプトを作成できます)。次に、サイトのユーザーをチェックし、ブラウザーが WebP をサポートしている場合は、コンパクトな画像を送信します。

つまり、クライアントのブラウザーでフォーマットのサポートをチェックする独自のスクリプトを作成し、Web サーバーからパームオフするか、このタスクを Web サーバーに完全に割り当てることができます。 2 番目のオプションは、より論理的に思えます。

Accept ヘッダーを使用したネゴシエーション

ブラウザーは Accept ヘッダーを次のように渡します:

オペラで:

Accept: text / html, application / xml; q = 0.9, application / xhtml + xml,
image / png, image / webp, image / jpeg, image / gif, image / x-xbitmap, * / *; q = 0.1

Chrome の場合:

Accept: image / webp, * / *; q = 0.8

これを知っていれば、WebP を自動的に送信するように Web サーバーを構成できます。例として、構成ファイルに次のようなものを追加する必要がある Nginx を使用します。

location / {

  if ($http_accept ~* "webp")    { set $webp_accept "true"; }
  if (-f $request_filename.webp) { set $webp_local  "true"; }

  if ($webp_local = "true") {
    add_header Vary Accept;
  }

  # if the client supports WebP, then upload the file
  if ($webp_accept = "true") {
    rewrite (.*) $1.webp break;
  }
}

Apache の設定も同様です。 Accept で WebP サポートが見つからない場合は、通常のファイルが転送されます。 Nginx が静的データをキャッシュするためのプロキシとして使用されている場合、構成は異なります:

server {
  location / {
   
    if ($http_accept ~* "webp") { set $webp T; }
    proxy_cache_key $scheme$proxy_host$request_uri$webp;

    proxy_pass http://backend;
    proxy_cache my-cache;
  }
}

結論

WebP 画像形式は Web ページのサイズを大幅に縮小しますが、サポートが限られているため、Web サーバーを追加で構成し、すべての画像のコピーをいくつかの形式で含める必要があります。