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ヘッダーを次のように渡します。

Operaで：

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サーバーを追加で構成し、すべての画像のコピーをいくつかの形式で含める必要があります。

The post webpによる画像の最適化–オタク日記 appeared first on Gamingsym Japan.

Gadget Gate