WebP
日々テクノロジーが進化していますが、Webにおける画像の形式も進化が必要なようです。
その一つにあるのが「WebP」という画像フォーマット。ちなみに読み方はウェッピーと読むそうです。
Googleが開発しているオープンな静止画フォーマットでファイルの拡張子は「.webp」となっています。
歴史は意外と古く2010年ぐらいから開発していたそうです。
特徴
最大の特徴は「画質綺麗なのに軽い」というところ。
PNGに比べて26%軽く、JPGより25~34%も軽くなるそうです。
モバイルでのWeb読み込み速度のアップにつながるのでかなり大きいのではないでしょうか。
ちなみに、透過画像やアニメーションもできるそうです。
普及度
気になる普及度です。当然ながら対応していないブラウザでWebPは表示することはできません。
まぁ、結論から言うと最近のブラウザであればまずまず問題はなさそう。
唯一対応していないのはSafariぐらいでしょうか。
IEもまぁ、対応していないといえばいないですが…
共存？
こういった最新の技術につきものの古い子をどうするか。
WordpressであればEWWW Image Optimizerあたりを使っていれば、WebPへの変換オプションが付いているのでそれを使えば今のところ楽できます。
そんでもって、アクセスしてきた人がWebP対応ブラウザで、且つWebP画像が用意されていれば表示するといったようにhtaccessで制御をするだけですかね。
htaccessめも
調べていくつかあったので適当にメモ。
古いChromeとかFirefoxとか使ってると場合によってうまく出ない時があるような気がする。
EWWWのやつ
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$ RewriteCond %{REQUEST_FILENAME}\.webp -f RewriteCond %{QUERY_STRING} !type=original RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp |
アイデアマンズブログより
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
# WebP対応ブラウザかつWebPファイルがあればWebPファイルを返す設定 <IfModule mod_rewrite.c> # Rewriteモジュールを有効にする RewriteEngine On # WebP対応ブラウザはAcceptリクエストヘッダにimage/webpを含む慣例 # その場合のみ後続のRewriteRuleを適用する RewriteCond %{HTTP_ACCEPT} image/webp # 対応するWebP版のファイルがある場合のみ後続のRewriteRuleを適用する RewriteCond %{SCRIPT_FILENAME}.webp -f # *.jpg、*.png、*.gifファイルを*.webpファイルに内部的にルーティングする(ルーティング先は$0.webpでも可) # Content-Typeはimage/webpにする RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp] </IfModule> # 拡張子.webpファイルへの直接アクセスにはContent-Typeとしてimage/webpを返す設定 <IfModule mod_mime.c> AddType image/webp .webp </IfModule> # WebPファイルがあるかもしれない画像へのリクエストは全てVary: Acceptレスポンスヘッダを返す設定(CDN対策) # Headerディレクティブ単独ではできないのでSetEnvIfディレクティブとの組み合わせで実現する <IfModule mod_setenvif.c> SetEnvIf Request_URI "\.(jpe?g|png|gif)$" _image_request </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=_image_request </IfModule> |
よくあるやつの改良型
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<IfModule mod_setenvif.c> # WebP版があるかもしれない画像へのリクエストは全てVaryレスポンスヘッダを返す SetEnvIf Request_URI "\.(jpe?g|png)$" _image_request </IfModule> <IfModule mod_rewrite.c> # Rewriteモジュールを有効にする RewriteEngine On # ブラウザから送信されるAcceptリクエストヘッダがimage/webpを含む場合のみ # 後続のRewriteRuleを適用する RewriteCond %{HTTP_ACCEPT} image/webp # WebP版のファイルがある場合のみ後続のRewriteRuleを適用する # SCRIPT_FILENAMEを使うことでサブディレクトリの補完が不要に RewriteCond %{SCRIPT_FILENAME}.webp -f # *.jpg、*.pngファイルを*.webpファイルに内部的にルーティングする # Content-Typeはimage/webpにする # リダイレクト先は $0.webp でも可 RewriteRule .(jpe?g|png)$ %{SCRIPT_FILENAME}.webp [T=image/webp] </IfModule> <IfModule mod_headers.c> # 環境変数_image_requestが真の(上記SetEnvIfが設定された)場合、 # VaryレスポンスヘッダにAcceptを追加する Header append Vary Accept env=_image_request </IfModule> <IfModule mod_mime.c> # 拡張子.webpファイルはContent-Typeとしてimage/webpを返す AddType image/webp .webp </IfModule> |
最後に
今回、この記事で使われている画像はすべてWebPに変換をしてアップロードをしてみました。
一応、EWWWによってPNGにも自動で変換されているっぽいのであまり利用する人は気にしなくてもよさそうなんですけどね。
しばらくの間はこうやって2つ用意しないといけないのはちょっと面倒よね。
あと検証はいろいろしているが、htaccessがうまいこと行ってるかがなかなか不安。
日々くだらないことを追い求め、黒歴史をまとめておくための自由なブログ。
あんまり役立つことは書きませんが主に日記・ゲームや買ったものについての記事を気まぐれで好き勝手書いています。